feat(admin-ui): Improve layout & styling of order payment cards

vendure-ecommerce · Jan 17, 2024 · 4a8b91a · 4a8b91a
1 parent ccbf9ec
commit 4a8b91a
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 39 deletions.
diff --git a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html
@@ -94,16 +94,13 @@
 
 <vdr-page-detail-layout *ngIf="entity$ | async as order">
     <vdr-page-detail-sidebar>
-        <vdr-card>
-            <vdr-order-state-label [state]="order.state">
-                <button
-                    class="icon-button"
-                    (click)="openStateDiagram()"
-                    [title]="'order.order-state-diagram' | translate"
-                >
+        <vdr-card [title]="'order.state' | translate">
+            <ng-template vdrCardControls>
+                <button class="button-small" (click)="openStateDiagram()" [title]="'order.order-state-diagram' | translate">
                     <clr-icon shape="list"></clr-icon>
                 </button>
-            </vdr-order-state-label>
+            </ng-template>
+            <vdr-order-state-label [state]="order.state"></vdr-order-state-label>
         </vdr-card>
         <vdr-card [title]="'order.customer' | translate">
             <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
@@ -169,7 +166,7 @@
                 <tbody>
                     <tr *ngFor="let row of order.taxSummary">
                         <td>{{ row.description }}</td>
-                        <td>{{ row.taxRate / 100 | percent:'0.0-2' }}</td>
+                        <td>{{ row.taxRate / 100 | percent : '0.0-2' }}</td>
                         <td>{{ row.taxBase | localeCurrency : order.currencyCode }}</td>
                         <td>{{ row.taxTotal | localeCurrency : order.currencyCode }}</td>
                     </tr>

diff --git a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.scss b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.scss
@@ -12,3 +12,7 @@
         color: var(--color-text-200);
     }
 }
+
+vdr-order-payment-card + vdr-order-payment-card {
+    margin-top: var(--space-unit);
+}
diff --git a/...dmin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.html b/...dmin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.html
@@ -12,33 +12,38 @@
         <vdr-payment-detail [payment]="payment" [currencyCode]="currencyCode"></vdr-payment-detail>
     </div>
     <ng-container *ngFor="let refund of payment.refunds">
-        <div class="card-header payment-header">
-            <clr-icon shape="redo" class="refund-icon" dir="down"></clr-icon>
-            {{ 'order.refund' | translate }} #{{ refund.id }}
-            <div class="clr-flex-fill"></div>
-            <vdr-refund-state-label [state]="refund.state"></vdr-refund-state-label>
-        </div>
-        <div class="card-block">
-            <vdr-labeled-data [label]="'common.created-at' | translate">
-                {{ refund.createdAt | localeDate: 'medium' }}
-            </vdr-labeled-data>
-            <vdr-labeled-data [label]="'order.refund-total' | translate">
-                {{ refund.total | localeCurrency: currencyCode }}
-            </vdr-labeled-data>
-            <vdr-labeled-data [label]="'order.transaction-id' | translate" *ngIf="refund.transactionId">
-                {{ refund.transactionId }}
-            </vdr-labeled-data>
-            <vdr-labeled-data [label]="'order.refund-reason' | translate" *ngIf="refund.reason">
-                {{ refund.reason }}
-            </vdr-labeled-data>
-            <vdr-labeled-data [label]="'order.refund-metadata' | translate" *ngIf="refundHasMetadata(refund)">
-                <vdr-object-tree [value]="refund.metadata"></vdr-object-tree>
-            </vdr-labeled-data>
-        </div>
-        <div class="card-footer" *ngIf="refund.state === 'Pending'">
-            <button class="btn btn-sm btn-primary" (click)="settleRefund.emit(refund)">
-                {{ 'order.settle-refund' | translate }}
-            </button>
+        <div class="refund-wrapper card-block">
+            <div class="card-header payment-header refund-header">
+                <clr-icon shape="redo" class="refund-icon" dir="down"></clr-icon>
+                {{ 'order.refund' | translate }} #{{ refund.id }}
+                <div class="clr-flex-fill"></div>
+                <vdr-refund-state-label [state]="refund.state"></vdr-refund-state-label>
+            </div>
+            <div class="card-block">
+                <vdr-labeled-data [label]="'common.created-at' | translate">
+                    {{ refund.createdAt | localeDate : 'medium' }}
+                </vdr-labeled-data>
+                <vdr-labeled-data [label]="'order.refund-total' | translate">
+                    {{ refund.total | localeCurrency : currencyCode }}
+                </vdr-labeled-data>
+                <vdr-labeled-data [label]="'order.transaction-id' | translate" *ngIf="refund.transactionId">
+                    {{ refund.transactionId }}
+                </vdr-labeled-data>
+                <vdr-labeled-data [label]="'order.refund-reason' | translate" *ngIf="refund.reason">
+                    {{ refund.reason }}
+                </vdr-labeled-data>
+                <vdr-labeled-data
+                    [label]="'order.refund-metadata' | translate"
+                    *ngIf="refundHasMetadata(refund)"
+                >
+                    <vdr-object-tree [value]="refund.metadata"></vdr-object-tree>
+                </vdr-labeled-data>
+            </div>
+            <div class="card-footer" *ngIf="refund.state === 'Pending'">
+                <button class="btn btn-sm btn-primary" (click)="settleRefund.emit(refund)">
+                    {{ 'order.settle-refund' | translate }}
+                </button>
+            </div>
         </div>
     </ng-container>
     <div class="card-footer" *ngIf="payment.nextStates.length">
@@ -64,7 +69,7 @@
                             <clr-icon shape="step-forward-2"></clr-icon>
                             {{
                                 'order.transition-to-state'
-                                    | translate: { state: (nextState | stateI18nToken | translate) }
+                                    | translate : { state: (nextState | stateI18nToken | translate) }
                             }}
                         </ng-container>
                         <ng-template #cancel>

diff --git a/...dmin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.scss b/...dmin-ui/src/lib/order/src/components/order-payment-card/order-payment-card.component.scss
@@ -1,4 +1,6 @@
-
+:host {
+    display: block;
+}
 .payment-header {
     display: flex;
     justify-content: space-between;
@@ -16,3 +18,8 @@
     align-items: center;
     justify-content: flex-end;
 }
+
+.refund-wrapper {
+    //margin-left: calc(var(--space-unit) * 2);
+    //border-left: 2px solid var(--color-grey-300);
+}
diff --git a/...in-ui/src/lib/order/src/components/payment-state-label/payment-state-label.component.scss b/...in-ui/src/lib/order/src/components/payment-state-label/payment-state-label.component.scss
@@ -1,3 +1,4 @@
 :host {
+    display: flex;
     font-size: 14px;
 }
diff --git a/...dmin-ui/src/lib/order/src/components/refund-state-label/refund-state-label.component.scss b/...dmin-ui/src/lib/order/src/components/refund-state-label/refund-state-label.component.scss
@@ -1,3 +1,4 @@
 :host {
+    display: flex;
     font-size: 14px;
 }
diff --git a/packages/admin-ui/src/lib/static/styles/theme/dark.scss b/packages/admin-ui/src/lib/static/styles/theme/dark.scss
@@ -408,6 +408,7 @@
     --clr-modal-bg-color: hsl(198, 28%, 18%);
     --clr-modal-title-color: var(--clr-global-font-color);
     --clr-modal-backdrop-color: hsla(0, 0%, 0%, 0.85);
+    --clr-modal-text-color: var(--color-text-100);
     // END Modal
 
     /***************
@@ -530,7 +531,7 @@
     * Typography
     */
     --clr-global-font-color: var(--color-text-100);
-    --clr-global-font-color-secondary: var(--color-text-200);
+    --clr-global-font-color-secondary: var(--color-text-100);
 
     --clr-h1-color: var(--clr-global-font-color);
     --clr-h2-color: var(--clr-global-font-color);
@@ -558,6 +559,8 @@
     --clr-accordion-border-color: hsl(208, 16%, 34%);
     // END: ACCORDION
 
+    --clr-list-item-color: var(--color-text-100);
+
 
     clr-icon {
         &.is-green,