fix(admin-ui): Small fixes

packages/admin-ui/src/lib/core/src/shared/pipes/state-i18n-token.pipe.ts

@@ -26,7 +26,7 @@ export class StateI18nTokenPipe implements PipeTransform {
         Modifying: _('state.modifying'),
         ArrangingAdditionalPayment: _('state.arranging-additional-payment'),
     };
-    transform<T extends unknown>(value: T): T {
+    transform<T>(value: T): T {
         if (typeof value === 'string' && value.length) {
             const defaultStateToken = this.stateI18nTokens[value as any];
             if (defaultStateToken) {

packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.html

@@ -214,10 +214,10 @@
                                 <img
                                     *ngIf="addItemSelectedVariant.productAsset as asset"
                                     [src]="asset | assetPreview : 'tiny'"
-                                    class="mr4"
+                                    class="mr-4 add-item-thumb"
                                 />
                                 <div>
-                                    <strong class="mr4">{{
+                                    <strong class="mr-4">{{
                                         addItemSelectedVariant.productVariantName
                                     }}</strong>
                                     <small>{{ addItemSelectedVariant.sku }}</small>

packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.scss

@@ -11,3 +11,6 @@
         text-align: start;
     }
 }
+.add-item-thumb {
+    max-width: 50px;
+}

packages/admin-ui/src/lib/order/src/components/order-state-select-dialog/order-state-select-dialog.component.html

@@ -1,12 +1,12 @@
 <ng-template vdrDialogTitle>{{ 'order.select-state' | translate }}</ng-template>
 <p>{{ message | translate }}</p>
-<clr-select-container>
-    <select clrSelect name="state" [(ngModel)]="selectedState">
+<vdr-form-field>
+    <select name="state" [(ngModel)]="selectedState">
         <option *ngFor="let state of nextStates" [value]="state">
             {{ state | stateI18nToken | translate }}
         </option>
     </select>
-</clr-select-container>
+</vdr-form-field>
 <ng-template vdrDialogButtons>
     <button type="submit" *ngIf="cancellable" (click)="cancel()" class="btn btn-secondary">
         {{ 'common.cancel' | translate }}

packages/admin-ui/src/lib/order/src/order.routes.ts

@@ -112,8 +112,7 @@ export function modifyingOrderBreadcrumb(data: any, params: any) {
     return orderBreadcrumb(data, params).pipe(
         map((breadcrumbs: BreadcrumbLabelLinkPair[]) => {
             const modifiedBreadcrumbs = breadcrumbs.slice();
-            modifiedBreadcrumbs[0].link[0] = '../';
-            modifiedBreadcrumbs[1].link[0] = '../orders';
+            modifiedBreadcrumbs[1].link = ['../', breadcrumbs[1].link[0]];
             return modifiedBreadcrumbs.concat({ label: _('breadcrumb.modifying'), link: [''] });
         }) as any,
     );

packages/admin-ui/src/lib/settings/src/components/test-order-builder/test-order-builder.component.scss

@@ -5,3 +5,6 @@
 .empty-text {
     font-size: 22px;
 }
+.thumb {
+    max-width: 50px;
+}

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

@@ -169,11 +169,11 @@
     --color-json-editor-background-color: var(--color-grey-200);
     --color-json-editor-text: var(--color-grey-600);
     --color-json-editor-string: var(--color-secondary-600);
-    --color-json-editor-number: var(--color-primary-600);
-    --color-json-editor-boolean: var(--color-primary-600);
+    --color-json-editor-number: var(--color-primary-700);
+    --color-json-editor-boolean: var(--color-primary-700);
     --color-json-editor-null: var(--color-grey-500);
-    --color-json-editor-key: var(--color-success-500);
-    --color-json-editor-error: var(--color-error-500);
+    --color-json-editor-key: var(--color-success-800);
+    --color-json-editor-error: var(--color-error-700);
 
     --color-table-row-hover-bg: var(--color-weight-100);
     --color-table-row-active-bg: var(--color-primary-100);