feat(admin-ui): Improve list & chip styles

packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.html

@@ -1,69 +1,73 @@
 <div class="bulk-actions">
     <ng-content select="vdr-bulk-action-menu"></ng-content>
 </div>
-<table class="" [class.no-select]="disableSelect" [style.table-layout]="!items?.length ? 'fixed' : 'inherit'">
-    <thead [class.items-selected]="selectionManager?.selection.length">
-        <tr class="heading-row">
-            <th *ngIf="selectionManager" class="align-middle">
-                <input
-                    type="checkbox"
-                    clrCheckbox
-                    [checked]="selectionManager?.areAllCurrentItemsSelected()"
-                    (change)="onToggleAllClick()"
-                />
-            </th>
-            <th *ngFor="let column of visibleColumns; last as isLast" [class.expand]="column.expand">
-                <div class="cell-content" [ngClass]="column.align">
-                    <span>{{ column.heading }}</span>
-                    <div *ngIf="column.sort as sort" class="sort-toggle">
-                        <button (click)="sort.toggleSortOrder()" [class.active]="sort.sortOrder">
-                            <clr-icon *ngIf="!sort.sortOrder" shape="two-way-arrows left"></clr-icon>
-                            <clr-icon *ngIf="sort.sortOrder === 'ASC'" shape="arrow up"></clr-icon>
-                            <clr-icon *ngIf="sort.sortOrder === 'DESC'" shape="arrow down"></clr-icon>
-                        </button>
-                        <div class="sort-label" *ngIf="sort.sortOrder">{{ sort.sortOrder }}</div>
+<div class="table-wrapper">
+    <table
+        class=""
+        [class.no-select]="disableSelect"
+        [style.table-layout]="!items?.length ? 'fixed' : 'inherit'"
+    >
+        <thead [class.items-selected]="selectionManager?.selection.length">
+            <tr class="heading-row">
+                <th *ngIf="selectionManager" class="flex">
+                    <div class="drag-handle-spacer"></div>
+                    <input
+                        type="checkbox"
+                        clrCheckbox
+                        [checked]="selectionManager?.areAllCurrentItemsSelected()"
+                        (change)="onToggleAllClick()"
+                    />
+                </th>
+                <th *ngFor="let column of visibleColumns; last as isLast" [class.expand]="column.expand">
+                    <div class="cell-content" [ngClass]="column.align">
+                        <span>{{ column.heading }}</span>
+                        <div *ngIf="column.sort as sort" class="sort-toggle">
+                            <button (click)="sort.toggleSortOrder()" [class.active]="sort.sortOrder">
+                                <clr-icon *ngIf="!sort.sortOrder" shape="two-way-arrows left"></clr-icon>
+                                <clr-icon *ngIf="sort.sortOrder === 'ASC'" shape="arrow up"></clr-icon>
+                                <clr-icon *ngIf="sort.sortOrder === 'DESC'" shape="arrow down"></clr-icon>
+                            </button>
+                            <div class="sort-label" *ngIf="sort.sortOrder">{{ sort.sortOrder }}</div>
+                        </div>
                     </div>
-                </div>
 
-                <div *ngIf="isLast" class="column-picker">
-                    <vdr-data-table-colum-picker [columns]="columns?.toArray()"></vdr-data-table-colum-picker>
-                </div>
-            </th>
-        </tr>
-        <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
-            <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
-                <!--<div class="search-wrapper">
-                    <clr-icon shape="search" class="search-icon"></clr-icon>
-                    <input [formControl]="searchTermControl" [placeholder]="searchTermPlaceholder" />
-                </div>-->
-                <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
-                <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
-                <ng-container *ngIf="filters">
-                    <div class="filters">
-                        <vdr-data-table-filters
-                            *ngFor="let activeFilter of filters.activeFilters"
-                            [filterWithValue]="activeFilter"
-                            [filters]="filters"
-                            class="mt-1"
-                        ></vdr-data-table-filters>
-                        <vdr-data-table-filters
-                            *ngIf="filters.length"
-                            [filters]="filters"
-                            class="mt-1"
-                        ></vdr-data-table-filters>
+                    <div *ngIf="isLast" class="column-picker">
+                        <vdr-data-table-colum-picker
+                            [columns]="columns?.toArray()"
+                        ></vdr-data-table-colum-picker>
                     </div>
-                </ng-container>
-            </th>
-        </tr>
-    </thead>
-    <tbody
-        cdkDropList
-        cdkDropListLockAxis="y"
-        (cdkDropListDropped)="onDrop($event)"
-        [cdkDropListSortPredicate]="sortPredicate"
-    >
-        <ng-container
-            *ngFor="
+                </th>
+            </tr>
+            <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
+                <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
+                    <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
+                    <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
+                    <ng-container *ngIf="filters">
+                        <div class="filters">
+                            <vdr-data-table-filters
+                                *ngFor="let activeFilter of filters.activeFilters"
+                                [filterWithValue]="activeFilter"
+                                [filters]="filters"
+                                class="mt-1"
+                            ></vdr-data-table-filters>
+                            <vdr-data-table-filters
+                                *ngIf="filters.length"
+                                [filters]="filters"
+                                class="mt-1"
+                            ></vdr-data-table-filters>
+                        </div>
+                    </ng-container>
+                </th>
+            </tr>
+        </thead>
+        <tbody
+            cdkDropList
+            cdkDropListLockAxis="y"
+            (cdkDropListDropped)="onDrop($event)"
+            [cdkDropListSortPredicate]="sortPredicate"
+        >
+            <ng-container
+                *ngFor="
                 let item of items
                     | paginate
                         : {
@@ -75,21 +79,22 @@
                 index as i;
                 trackBy: trackByFn
             "
-        >
-            <ng-container
-                [ngTemplateOutlet]="collectionRowTmp"
-                [ngTemplateOutletContext]="{ item: item, i: i, depth: 0 }"
-            ></ng-container>
-        </ng-container>
-        <ng-container>
-            <tr *ngIf="!items?.length">
-                <td [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)">
-                    <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
-                </td>
-            </tr>
-        </ng-container>
-    </tbody>
-</table>
+            >
+                <ng-container
+                    [ngTemplateOutlet]="collectionRowTmp"
+                    [ngTemplateOutletContext]="{ item: item, i: i, depth: 0 }"
+                ></ng-container>
+            </ng-container>
+            <ng-container>
+                <tr *ngIf="!items?.length">
+                    <td [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)">
+                        <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
+                    </td>
+                </tr>
+            </ng-container>
+        </tbody>
+    </table>
+</div>
 <div class="table-footer ml-4">
     <vdr-items-per-page-controls
         *ngIf="totalItems"

packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.scss

@@ -1,9 +1,16 @@
+.bulk-actions {
+    margin-left: calc(var(--space-unit) * 10);
+}
+
 .selection-col {
     display: flex;
 }
 .drag-handle {
     cursor: grab;
 }
+.drag-handle-spacer {
+    width: 14px;
+}
 
 /* Animate items as they're being sorted. */
 .cdk-drop-list-dragging .cdk-drag {

packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.scss

@@ -1,55 +0,0 @@
-
-:host {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.bulk-select-controls {
-    min-height: 36px;
-    padding-left: 14px;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--color-component-border-200);
-}
-.collection-wrapper {
-    display: flex;
-    height: calc(100% - 50px);
-
-    vdr-collection-tree {
-        flex: 1;
-        height: 100%;
-        overflow: auto;
-    }
-
-    .collection-contents {
-
-        height: 100%;
-        width: 0;
-        opacity: 0;
-        visibility: hidden;
-        overflow: auto;
-        transition: width 0.3s, opacity 0.2s 0.3s, visibility 0s 0.3s;
-
-        &.expanded {
-            width: 30vw;
-            visibility: visible;
-            opacity: 1;
-            padding-left: 12px;
-        }
-
-        .close-button {
-            margin: 0;
-            background: none;
-            border: none;
-            cursor: pointer;
-        }
-    }
-}
-
-.paging-controls {
-    padding-top: 6px;
-    border-top: 1px solid var(--color-component-border-100);
-    display: flex;
-    justify-content: space-between;
-}

packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html

@@ -67,8 +67,8 @@
             </vdr-dt2-column>
             <vdr-dt2-column [heading]="'common.visibility' | translate">
                 <ng-template let-facet="item">
-                    <div class="badge warning" *ngIf="facet.isPrivate">{{ 'common.private' }}</div>
-                    <div class="badge success" *ngIf="!facet.isPrivate">{{ 'common.public' }}</div>
+                    <vdr-chip  *ngIf="facet.isPrivate" colorType="warning">{{ 'common.private' | translate }}</vdr-chip>
+                    <vdr-chip  *ngIf="!facet.isPrivate" colorType="success">{{ 'common.public' | translate }}</vdr-chip>
                 </ng-template>
             </vdr-dt2-column>
             <vdr-dt2-column [heading]="'catalog.values' | translate">
@@ -81,7 +81,7 @@
                             [displayFacetName]="false"
                         ></vdr-facet-value-chip>
                         <button
-                            class="button-ghost"
+                            class="button-small"
                             *ngIf="facet.values.length > initialLimit"
                             (click)="toggleDisplayLimit(facet)"
                         >

packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.scss

@@ -3,4 +3,5 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    gap: 4px;
 }

packages/admin-ui/src/lib/core/src/common/utilities/string-to-color.ts

@@ -3,7 +3,7 @@
  */
 export function stringToColor(input: string): string {
     if (!input || input === '') {
-        return 'var(--color-component-bg-100)';
+        return '';
     }
     const safeColors = [
         '#10893E',
@@ -28,6 +28,8 @@ export function stringToColor(input: string): string {
         '#7A7574',
         '#767676',
     ];
-    const value = input.split('').reduce((prev, curr, index) => prev + Math.round(curr.charCodeAt(0) * Math.log(index + 2)), 0);
+    const value = input
+        .split('')
+        .reduce((prev, curr, index) => prev + Math.round(curr.charCodeAt(0) * Math.log(index + 2)), 0);
     return safeColors[value % safeColors.length];
 }

packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss

@@ -15,9 +15,8 @@
     border-right: 1px solid var(--color-weight-150);
     //box-shadow: -3px 1px 10px 0px rgb(0 0 0 / 18%);
     z-index: 1;
-    @media screen and (min-width: $breakpoint-medium) {
-        width: 300px;
-    }
+    width: var(--left-nav-width);
+    max-width: var(--left-nav-width);
 }
 
 .top-bar {

packages/admin-ui/src/lib/core/src/shared/components/chip/chip.component.scss

@@ -6,12 +6,19 @@
 
 .wrapper {
     display: flex;
-    border: 1px solid var(--color-component-border-300);
-    border-radius: 3px;
-    margin: 6px;
+    vertical-align: baseline;
+    font-size: var(--font-size-xs);
+    border-radius: var(--border-radius-lg);
+    font-weight: 600;
+    line-height: 12px;
+    text-align: center;
+    color: var(--color-weight-700);
+    border: 1px solid var(--color-weight-125);
+
     &.with-background {
         color: var(--color-grey-100);
         border-color: transparent;
+
         .chip-label {
             opacity: 0.9;
         }
@@ -19,33 +26,28 @@
 
     &.warning {
         border-color: var(--color-chip-warning-border);
-        .chip-label {
-            color: var(--color-chip-warning-text);
-            background-color: var(--color-chip-warning-bg);
-        }
+
+        color: var(--color-chip-warning-text);
+        background-color: var(--color-chip-warning-bg);
     }
 
     &.success {
         border-color: var(--color-chip-success-border);
-        .chip-label {
-            color: var(--color-chip-success-text);
-            background-color: var(--color-chip-success-bg);
-        }
+
+        color: var(--color-chip-success-text);
+        background-color: var(--color-chip-success-bg);
     }
 
     &.error {
         border-color: var(--color-chip-error-border);
-        .chip-label {
-            color: var(--color-chip-error-text);
-            background-color: var(--color-chip-error-bg);
-        }
+
+        color: var(--color-chip-error-text);
+        background-color: var(--color-chip-error-bg);
     }
 }
 
 .chip-label {
-    padding: 3px 6px;
-    line-height: 1em;
-    border-radius: 3px;
+    padding: 5px 8px;
     white-space: nowrap;
     display: flex;
     align-items: center;

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.html

@@ -1,100 +1,104 @@
 <div class="bulk-actions">
     <ng-content select="vdr-bulk-action-menu"></ng-content>
 </div>
-<table class="" [class.no-select]="disableSelect" [style.table-layout]="!items?.length ? 'fixed' : 'inherit'">
-    <thead [class.items-selected]="selectionManager?.selection.length">
-        <tr class="heading-row">
-            <th *ngIf="selectionManager" class="align-middle">
-                <input
-                    type="checkbox"
-                    clrCheckbox
-                    [checked]="selectionManager?.areAllCurrentItemsSelected()"
-                    (change)="onToggleAllClick()"
-                />
-            </th>
-            <th *ngFor="let column of visibleColumns; last as isLast" [class.expand]="column.expand">
-                <div class="cell-content" [ngClass]="column.align">
-                    <span>{{ column.heading }}</span>
-                    <div *ngIf="column.sort as sort" class="sort-toggle">
-                        <button (click)="sort.toggleSortOrder()" [class.active]="sort.sortOrder">
-                            <clr-icon *ngIf="!sort.sortOrder" shape="two-way-arrows left"></clr-icon>
-                            <clr-icon *ngIf="sort.sortOrder === 'ASC'" shape="arrow up"></clr-icon>
-                            <clr-icon *ngIf="sort.sortOrder === 'DESC'" shape="arrow down"></clr-icon>
-                        </button>
-                        <div class="sort-label" *ngIf="sort.sortOrder">{{ sort.sortOrder }}</div>
+<div class="table-wrapper">
+    <table
+        class=""
+        [class.no-select]="disableSelect"
+        [style.table-layout]="!items?.length ? 'fixed' : 'inherit'"
+    >
+        <thead [class.items-selected]="selectionManager?.selection.length">
+            <tr class="heading-row">
+                <th *ngIf="selectionManager" class="selection-col">
+                    <input
+                        type="checkbox"
+                        clrCheckbox
+                        [checked]="selectionManager?.areAllCurrentItemsSelected()"
+                        (change)="onToggleAllClick()"
+                    />
+                </th>
+                <th *ngFor="let column of visibleColumns; last as isLast" [class.expand]="column.expand">
+                    <div class="cell-content" [ngClass]="column.align">
+                        <span>{{ column.heading }}</span>
+                        <div *ngIf="column.sort as sort" class="sort-toggle">
+                            <button (click)="sort.toggleSortOrder()" [class.active]="sort.sortOrder">
+                                <clr-icon *ngIf="!sort.sortOrder" shape="two-way-arrows left"></clr-icon>
+                                <clr-icon *ngIf="sort.sortOrder === 'ASC'" shape="arrow up"></clr-icon>
+                                <clr-icon *ngIf="sort.sortOrder === 'DESC'" shape="arrow down"></clr-icon>
+                            </button>
+                            <div class="sort-label" *ngIf="sort.sortOrder">{{ sort.sortOrder }}</div>
+                        </div>
                     </div>
-                </div>
 
-                <div *ngIf="isLast" class="column-picker">
-                    <vdr-data-table-colum-picker [columns]="columns?.toArray()"></vdr-data-table-colum-picker>
-                </div>
-            </th>
-        </tr>
-        <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
-            <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
-                <!--<div class="search-wrapper">
-                    <clr-icon shape="search" class="search-icon"></clr-icon>
-                    <input [formControl]="searchTermControl" [placeholder]="searchTermPlaceholder" />
-                </div>-->
-                <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
-                <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
-                <ng-container *ngIf="filters">
-                    <div class="filters">
-                        <vdr-data-table-filters
-                            *ngFor="let activeFilter of filters.activeFilters"
-                            [filterWithValue]="activeFilter"
-                            [filters]="filters"
-                            class="mt-1"
-                        ></vdr-data-table-filters>
-                        <vdr-data-table-filters
-                            *ngIf="filters.length"
-                            [filters]="filters"
-                            class="mt-1"
-                        ></vdr-data-table-filters>
+                    <div *ngIf="isLast" class="column-picker">
+                        <vdr-data-table-colum-picker
+                            [columns]="columns?.toArray()"
+                        ></vdr-data-table-colum-picker>
+                    </div>
+                </th>
+            </tr>
+            <tr *ngIf="searchComponent || customSearchTemplate || filters?.length">
+                <th [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)" class="filter-row">
+                    <ng-container *ngTemplateOutlet="searchComponent?.template"></ng-container>
+                    <ng-container *ngTemplateOutlet="customSearchTemplate"></ng-container>
+                    <ng-container *ngIf="filters">
+                        <div class="filters">
+                            <vdr-data-table-filters
+                                *ngFor="let activeFilter of filters.activeFilters"
+                                [filterWithValue]="activeFilter"
+                                [filters]="filters"
+                                class="mt-1"
+                            ></vdr-data-table-filters>
+                            <vdr-data-table-filters
+                                *ngIf="filters.length"
+                                [filters]="filters"
+                                class="mt-1"
+                            ></vdr-data-table-filters>
+                        </div>
+                    </ng-container>
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr
+                *ngFor="
+                    let item of items
+                        | paginate
+                            : {
+                                  itemsPerPage: itemsPerPage,
+                                  currentPage: currentPage,
+                                  totalItems: totalItems
+                              };
+                    index as i;
+                    trackBy: trackByFn
+                "
+            >
+                <td *ngIf="selectionManager" class="selection-col" [class.active]="activeIndex === i">
+                    <input
+                        type="checkbox"
+                        clrCheckbox
+                        [checked]="selectionManager?.isSelected(item)"
+                        (click)="onRowClick(item, $event)"
+                    />
+                </td>
+                <td *ngFor="let column of visibleColumns" [class.active]="activeIndex === i">
+                    <div class="cell-content" [ngClass]="column.align">
+                        <ng-container
+                            *ngTemplateOutlet="column.template; context: { item: item, index: i }"
+                        ></ng-container>
                     </div>
-                </ng-container>
-            </th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr
-            *ngFor="
-                let item of items
-                    | paginate
-                        : {
-                              itemsPerPage: itemsPerPage,
-                              currentPage: currentPage,
-                              totalItems: totalItems
-                          };
-                index as i;
-                trackBy: trackByFn
-            "
-        >
-            <td *ngIf="selectionManager" class="selection-col" [class.active]="activeIndex === i">
-                <input
-                    type="checkbox"
-                    clrCheckbox
-                    [checked]="selectionManager?.isSelected(item)"
-                    (click)="onRowClick(item, $event)"
-                />
-            </td>
-            <td *ngFor="let column of visibleColumns" [class.active]="activeIndex === i">
-                <div class="cell-content" [ngClass]="column.align">
-                    <ng-container
-                        *ngTemplateOutlet="column.template; context: { item: item, index: i }"
-                    ></ng-container>
-                </div>
-            </td>
-        </tr>
-        <ng-container>
-            <tr *ngIf="!items?.length">
-                <td [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)">
-                    <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
                 </td>
             </tr>
-        </ng-container>
-    </tbody>
-</table>
+            <ng-container>
+                <tr *ngIf="!items?.length">
+                    <td [attr.colspan]="visibleColumns.length + (selectionManager ? 1 : 0)">
+                        <vdr-empty-placeholder [emptyStateLabel]="emptyStateLabel"></vdr-empty-placeholder>
+                    </td>
+                </tr>
+            </ng-container>
+        </tbody>
+    </table>
+</div>
 <div class="table-footer ml-4">
     <vdr-items-per-page-controls
         *ngIf="totalItems"
@@ -107,6 +111,7 @@
 
     <vdr-pagination-controls
         *ngIf="totalItems"
+        [id]="id"
         [currentPage]="currentPage"
         [itemsPerPage]="itemsPerPage"
         [totalItems]="totalItems"

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.scss

@@ -1,22 +1,28 @@
 :host {
     display: block;
     max-width: 100%;
-    overflow: auto;
     position: relative;
     margin-bottom: calc(var(--space-unit) * 4);
 }
 
 .bulk-actions {
-    margin-top: 4px;
-    padding-left: calc(var(--space-unit) * 4);
+    margin-left: calc(var(--space-unit) * 8);
+    // gradient bg from white to transparent
+    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    z-index: 10;
+    display: flex;
+    position: absolute;
+    height: 40px;
+}
+.table-wrapper {
+    display: block;
+    overflow: auto;
+    width: 100%;
+    max-width: var(--surface-width);
 }
-
 table {
-    max-width: 100vw;
-    overflow-x: auto;
     width: 100%;
 }
-
 table.no-select {
     user-select: none;
 }
@@ -30,9 +36,10 @@ table.no-select {
 .heading-row th {
     border-bottom: 1px solid var(--color-weight-200);
     font-size: var(--font-size-xs);
-     font-weight: 600;
-     text-transform: uppercase;
-     position: relative;
+    font-weight: 600;
+    text-transform: uppercase;
+    position: relative;
+    white-space: nowrap;
 }
 
 .sort-toggle {
@@ -56,7 +63,6 @@ table.no-select {
         color: var(--color-primary-600);
         font-weight: 400;
     }
-
 }
 
 .filter-row {
@@ -82,7 +88,7 @@ table.no-select {
 
 th,
 td {
-    padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 1);
+    padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1);
     font-size: var(--font-size-sm);
 }
 
@@ -91,6 +97,18 @@ tr th:first-of-type {
     padding-left: calc(var(--space-unit) * 4);
 }
 
+th:last-of-type,
+td:last-of-type {
+    border-right: 1px solid var(--color-weight-200);
+}
+
+tr:first-of-type th:last-of-type {
+    border-image: linear-gradient(0deg, var(--color-weight-200), transparent) 1;
+}
+tr:last-of-type td:last-of-type {
+    border-image: linear-gradient(180deg, var(--color-weight-200), transparent) 1;
+}
+
 // odd rows
 tbody tr:nth-child(even) {
     background-color: var(--color-table-alternate-row-bg);
@@ -113,6 +131,7 @@ td.active {
 .cell-content {
     display: flex;
     align-items: center;
+    line-height: var(--font-size-sm);
     color: var(--color-weight-700);
     &.left {
         justify-content: flex-start;
@@ -126,7 +145,7 @@ td.active {
 }
 
 .selection-col {
-    width: 24px;
+    width: calc(var(--space-unit) * 8);
 }
 
 vdr-empty-placeholder {

packages/admin-ui/src/lib/core/src/shared/components/split-view/split-view.component.scss

@@ -29,6 +29,8 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    margin-left: -1px;
+    z-index: 10;
 
     &.hidden {
         display: none;
@@ -68,6 +70,7 @@
     justify-content: space-between;
     padding: calc(var(--space-unit) * 1);
     padding-left: calc(var(--space-unit) * 4);
+    padding-right: 4px;
 }
 .right-panel {
     height: 100%;

packages/admin-ui/src/lib/marketing/src/components/promotion-list/promotion-list.component.html

@@ -60,8 +60,8 @@
         </vdr-dt2-column>
         <vdr-dt2-column [heading]="'common.enabled' | translate">
             <ng-template let-promotion="item">
-                <div class="badge success" *ngIf="promotion.enabled">{{ 'common.enabled' }}</div>
-                <div class="badge warning" *ngIf="!promotion.enabled">{{ 'common.disabled' }}</div>
+                <vdr-chip  *ngIf="promotion.enabled" colorType="success">{{ 'common.enabled' | translate }}</vdr-chip>
+                <vdr-chip  *ngIf="!promotion.enabled" colorType="warning">{{ 'common.disabled' | translate }}</vdr-chip>
             </ng-template>
         </vdr-dt2-column>
         <vdr-dt2-column [heading]="'marketing.coupon-code' | translate" [sort]="sorts.get('couponCode')">

packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html

@@ -80,8 +80,8 @@
         </vdr-dt2-column>
         <vdr-dt2-column [heading]="'common.enabled' | translate">
             <ng-template let-country="item">
-                <div class="badge success" *ngIf="country.enabled">{{ 'common.enabled' }}</div>
-                <div class="badge warning" *ngIf="!country.enabled">{{ 'common.disabled' }}</div>
+                <vdr-chip  *ngIf="country.enabled" colorType="success">{{ 'common.enabled' | translate }}</vdr-chip>
+                <vdr-chip  *ngIf="!country.enabled" colorType="warning">{{ 'common.disabled' | translate }}</vdr-chip>
             </ng-template>
         </vdr-dt2-column>
     </vdr-data-table-2>

packages/admin-ui/src/lib/settings/src/components/payment-method-list/payment-method-list.component.html

@@ -71,8 +71,8 @@
         </vdr-dt2-column>
         <vdr-dt2-column [heading]="'common.enabled' | translate">
             <ng-template let-paymentMethod="item">
-                <div class="badge success" *ngIf="paymentMethod.enabled">{{ 'common.enabled' }}</div>
-                <div class="badge warning" *ngIf="!paymentMethod.enabled">{{ 'common.disabled' }}</div>
+                <vdr-chip  *ngIf="paymentMethod.enabled" colorType="success">{{ 'common.enabled' | translate }}</vdr-chip>
+                <vdr-chip  *ngIf="!paymentMethod.enabled" colorType="warning">{{ 'common.disabled' | translate }}</vdr-chip>
             </ng-template>
         </vdr-dt2-column>
     </vdr-data-table-2>

packages/admin-ui/src/lib/settings/src/components/tax-rate-list/tax-rate-list.component.html

@@ -78,8 +78,8 @@
         </vdr-dt2-column>
         <vdr-dt2-column [heading]="'common.enabled' | translate">
             <ng-template let-taxRate="item">
-                <div class="badge success" *ngIf="taxRate.enabled">{{ 'common.enabled' }}</div>
-                <div class="badge warning" *ngIf="!taxRate.enabled">{{ 'common.disabled' }}</div>
+                <vdr-chip  *ngIf="taxRate.enabled" colorType="success">{{ 'common.enabled' | translate }}</vdr-chip>
+                <vdr-chip  *ngIf="!taxRate.enabled" colorType="warning">{{ 'common.disabled' | translate }}</vdr-chip>
             </ng-template>
         </vdr-dt2-column>
     </vdr-data-table-2>

packages/admin-ui/src/lib/settings/src/components/zone-member-list/zone-member-list.component.html

@@ -46,8 +46,8 @@
     </vdr-dt2-column>
     <vdr-dt2-column [heading]="'common.enabled' | translate">
         <ng-template let-member="item">
-            <div class="badge success" *ngIf="member.enabled">{{ 'common.enabled' }}</div>
-            <div class="badge warning" *ngIf="!member.enabled">{{ 'common.disabled' }}</div>
+            <vdr-chip  *ngIf="member.enabled" colorType="success">{{ 'common.enabled' | translate }}</vdr-chip>
+            <vdr-chip  *ngIf="!member.enabled" colorType="warning">{{ 'common.disabled' | translate }}</vdr-chip>
         </ng-template>
     </vdr-dt2-column>
 </vdr-data-table-2>

packages/admin-ui/src/lib/static/styles/global/_badges.scss

@@ -1,34 +0,0 @@
-.badge {
-    display: inline-block;
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 12px;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: var(--border-radius-lg);
-    padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 1.5);
-    color: var(--color-weight-700);
-    background-color: var(--color-weight-100);
-
-    &.primary {
-        color: var(--color-primary-800);
-        background-color: var(--color-primary-125);
-    }
-    &.accent {
-        color: var(--color-accent-800);
-        background-color: var(--color-accent-125);
-    }
-    &.success {
-        color: var(--color-success-800);
-        background-color: var(--color-success-125);
-    }
-    &.warning {
-        color: var(--color-warning-800);
-        background-color: var(--color-warning-125);
-    }
-    &.error {
-        color: var(--color-error-800);
-        background-color: var(--color-error-125);
-    }
-}

packages/admin-ui/src/lib/static/styles/global/_buttons.scss

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    white-space: nowrap;
     align-items: center;
     padding: var(--space-unit);
     font-size: var(--font-size-sm);
@@ -26,6 +27,7 @@
 
 .button-ghost {
     display: flex;
+    white-space: nowrap;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
@@ -51,13 +53,16 @@ a.button-ghost:hover {
 
 .button-small {
     display: flex;
+    white-space: nowrap;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
     padding: 0 var(--space-unit);
-    height: calc(var(--space-unit) * 3);
+    height: 22px;
     font-size: var(--font-size-xs);
-    gap: 12px;
+    background-color: var(--color-weight-150);
+    color: var(--color-weight-700);
+    gap: 4px;
     border: none;
     border-radius: var(--border-radius-lg);
     cursor: pointer;

packages/admin-ui/src/lib/static/styles/styles.scss

@@ -3,7 +3,6 @@
 @import "@clr/icons/clr-icons.min.css";
 @import "@ng-select/ng-select/themes/default.theme.css";
 @import '@angular/cdk/overlay-prebuilt.css';
-@import "global/badges";
 @import "global/buttons";
 @import "global/forms";
 @import "global/overrides";

packages/admin-ui/src/lib/static/styles/theme/default.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 // Default Vendure light theme. The Clarity component custom properties
 // are left as their defaults.
@@ -110,9 +110,25 @@
     --color-left-nav-text: var(--color-text);
     --color-left-nav-text-hover: var(--color-primary-700);
 
-
     // Layout
-    --layout-content-max-width: 1200px;
+    --layout-content-max-width: 1600px;
+    --left-nav-width: 0px;
+    --surface-width: 100vw;
+
+    @media screen and (min-width: $breakpoint-small) {
+        --left-nav-width: 100px;
+        --surface-width: calc(100vw - 100px);
+    }
+
+    @media screen and (min-width: $breakpoint-medium) {
+        --left-nav-width: 250px;
+        --surface-width: calc(100vw - 250px);
+    }
+
+    @media screen and (min-width: $breakpoint-large) {
+        --left-nav-width: 300px;
+        --surface-width: calc(100vw - 300px);
+    }
 
     // Login page
     --login-page-bg: url(data:image/gif;base64,R0lGODlhFAAhAKIAABwcHBsbGxcXFx0dHRUVFRkZGR4eHhQUFCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ2NzI5LCAyMDEyLzA1LzAzLTEzOjQwOjAzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTIuMCBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTg1NDlCNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTg1NDlDNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5ODU0OTk2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5ODU0OUE2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAFAAhAAADfSi23M7igEcZOIfUSvApm1N42RAuQ0cqZ0Ri0xa8nlaltAdSY44RJsfAt3q4iLDGDFlj4Ji6RQ/6GwypqyOtwO12BQKv+EawnRq93dlwLa0NWtZpSYptniRzZfpSP9o0QBVaNHJKUHYoKkh6BnxIaoBMgnBYGAp0lgCLlgQJADs=);
@@ -140,7 +156,6 @@
     // spacing
     --space-unit: 8px;
 
-
     // Universal semantic colors
     --color-component-bg-100: var(--color-grey-100);
     --color-component-bg-200: var(--color-grey-200);
@@ -160,15 +175,15 @@
     --color-form-input-bg: white;
     --color-timeline-thread: var(--color-primary-100);
 
-    --color-chip-warning-border: var(--color-warning-200);
-    --color-chip-warning-text: var(--color-warning-600);
-    --color-chip-warning-bg: var(--color-warning-100);
+    --color-chip-warning-border: var(--color-warning-300);
+    --color-chip-warning-text: var(--color-warning-800);
+    --color-chip-warning-bg: var(--color-warning-150);
     --color-chip-success-border: var(--color-success-200);
-    --color-chip-success-text: var(--color-success-600);
-    --color-chip-success-bg: var(--color-success-100);
+    --color-chip-success-text: var(--color-success-800);
+    --color-chip-success-bg: var(--color-success-150);
     --color-chip-error-border: var(--color-error-200);
-    --color-chip-error-text: var(--color-error-600);
-    --color-chip-error-bg: var(--color-error-100);
+    --color-chip-error-text: var(--color-error-800);
+    --color-chip-error-bg: var(--color-error-150);
 
     --color-json-editor-background-color: var(--color-grey-200);
     --color-json-editor-text: var(--color-grey-600);