feat(admin-ui): Various styling improvements

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

@@ -17,6 +17,11 @@
     background: var(--color-component-bg-200);
     padding: 6px;
     cursor: pointer;
+    border-radius: var(--border-radius-img);
+
+    img {
+        border-radius: var(--border-radius-img);
+    }
 
     &.compact {
         width: 100%;
@@ -46,15 +51,18 @@
         margin: 3px;
         padding: 0;
         border: 2px solid var(--color-component-border-100);
+        border-radius: var(--border-radius-img);
         cursor: pointer;
 
         img {
             width: 50px;
             height: 50px;
+            border-radius: var(--border-radius-img);
         }
 
         &.featured {
             border-color: var(--color-primary-500);
+            border-radius: calc(var(--border-radius-img) + 2px);
         }
     }
 

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

@@ -20,7 +20,7 @@
                     vdrDropdownTrigger
                 >
                     <clr-icon shape="cog"></clr-icon>
-                    <vdr-status-badge *ngIf="pendingSearchIndexUpdates" type="warning"> </vdr-status-badge>
+                    <vdr-status-badge *ngIf="pendingSearchIndexUpdates" type="warning"></vdr-status-badge>
                 </button>
                 <vdr-dropdown-menu vdrPosition="bottom-right">
                     <h4 class="dropdown-header">{{ 'catalog.search-index-controls' | translate }}</h4>
@@ -32,10 +32,10 @@
                             (click)="runPendingSearchIndexUpdates()"
                             [disabled]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
                         >
-                            <vdr-status-badge type="warning"> </vdr-status-badge>
+                            <vdr-status-badge type="warning"></vdr-status-badge>
                             {{
-                                'catalog.run-pending-search-index-updates'
-                                    | translate: { count: pendingSearchIndexUpdates }
+                            'catalog.run-pending-search-index-updates'
+                                | translate: {count: pendingSearchIndexUpdates}
                             }}
                         </button>
                         <div class="dropdown-divider"></div>
@@ -53,7 +53,7 @@
         </div>
         <div class="flex wrap">
             <clr-checkbox-wrapper class="mt2">
-                <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct" (ngModelChange)="refresh()" />
+                <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct" (ngModelChange)="refresh()"/>
                 <label>{{ 'catalog.group-by-product' | translate }}</label>
             </clr-checkbox-wrapper>
             <vdr-language-selector
@@ -85,7 +85,7 @@
     (itemsPerPageChange)="setItemsPerPage($event)"
 >
     <ng-template let-result="item">
-        <td class="left align-middle" [class.disabled]="!result.enabled">
+        <td class="left align-middle image-col" [class.disabled]="!result.enabled">
             <div class="image-placeholder">
                 <img
                     *ngIf="
@@ -111,12 +111,11 @@
         </td>
         <td class="right align-middle" [class.disabled]="!result.enabled">
             <vdr-table-row-action
+                class="edit-button"
                 iconShape="edit"
                 [label]="'common.edit' | translate"
                 [linkTo]="['./', result.productId]"
             ></vdr-table-row-action>
-        </td>
-        <td class="right align-middle" [class.disabled]="!result.enabled">
             <vdr-dropdown>
                 <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                     {{ 'common.actions' | translate }}

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

@@ -1,9 +1,15 @@
 @import "variables";
 
+.image-col {
+    width: 70px;
+}
 .image-placeholder {
     width: 50px;
     height: 50px;
     background-color: var(--color-component-bg-200);
+    img {
+        border-radius: var(--border-radius-img);
+    }
     .placeholder {
         text-align: center;
         color: var(--color-grey-300);
@@ -41,3 +47,6 @@ td.disabled {
         top: 10px;
     }
 }
+.edit-button {
+    margin-right: 24px;
+}

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

@@ -1,7 +1,7 @@
 <clr-main-container>
     <clr-header>
         <div class="branding">
-            <a [routerLink]="['/']"><img src="assets/logo-75px.png" class="logo" /></a>
+            <a [routerLink]="['/']"><img src="assets/logo-75px.png" class="logo" /><span class="wordmark" *ngIf="!hideVendureBranding">vendure</span></a>
         </div>
         <div class="header-nav"></div>
         <div class="header-actions">

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

@@ -4,7 +4,13 @@
     min-width: 0;
 }
 .logo {
-    width: 60px;
+    width: 40px;
+}
+.wordmark {
+    font-weight: bold;
+    margin-left: 12px;
+    font-size: 24px;
+    color: var(--color-primary-500);
 }
 vdr-breadcrumb {
     @media screen and (min-width: $breakpoint-small){
@@ -17,3 +23,9 @@ vdr-breadcrumb {
 .content-area {
     position: relative;
 }
+
+::ng-deep {
+    .header {
+        background-image: linear-gradient(to right, var(--color-header-gradient-from), var(--color-header-gradient-to));
+    }
+}

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

@@ -21,6 +21,7 @@ export class AppShellComponent implements OnInit {
     userName$: Observable<string>;
     uiLanguageAndLocale$: Observable<[LanguageCode, string | undefined]>;
     availableLanguages: LanguageCode[] = [];
+    hideVendureBranding = getAppConfig().hideVendureBranding;
 
     constructor(
         private authService: AuthService,

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -178,6 +178,7 @@ export * from './shared/directives/if-multichannel.directive';
 export * from './shared/directives/if-permissions.directive';
 export * from './shared/dynamic-form-inputs/boolean-form-input/boolean-form-input.component';
 export * from './shared/dynamic-form-inputs/code-editor-form-input/json-editor-form-input.component';
+export * from './shared/dynamic-form-inputs/combination-mode-form-input/combination-mode-form-input.component';
 export * from './shared/dynamic-form-inputs/currency-form-input/currency-form-input.component';
 export * from './shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component';
 export * from './shared/dynamic-form-inputs/date-form-input/date-form-input.component';

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/rich-text-editor.component.scss

@@ -21,6 +21,7 @@
     border-bottom: none;
     background-color: var(--color-component-bg-200);
     color: var(--color-icon-button);
+    border-radius: var(--border-radius-input) var(--border-radius-input) 0 0;
     padding: 6px 12px;
     display: flex;
     flex-wrap: wrap;
@@ -31,7 +32,7 @@
     min-height: 128px;
     min-width: 200px;
     border: 1px solid var(--color-component-border-200);
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 var(--border-radius-input) var(--border-radius-input);
     transition: border-color 0.2s;
     overflow: auto;
     text-align: initial;

packages/admin-ui/src/lib/dashboard/src/components/dashboard/dashboard.component.scss

@@ -1,5 +1,11 @@
 @import 'variables';
 
+:host {
+    display: block;
+    max-width: 1200px;
+    margin: auto;
+}
+
 .widget-header {
     display: flex;
     justify-content: flex-end;

packages/admin-ui/src/lib/dashboard/src/widgets/order-summary-widget/order-summary-widget.component.scss

@@ -21,8 +21,5 @@
     margin-top: 24px;
     display: flex;
     flex-direction: column;
-    @media screen and (min-width: $breakpoint-small) {
-        flex-direction: row;
-    }
     justify-content: space-between;
 }

packages/admin-ui/src/lib/login/src/components/login/login.component.html

@@ -1,6 +1,9 @@
 <div class="login-wrapper">
     <form class="login">
-        <label class="title"><img src="assets/logo-300px.png" /></label>
+        <label class="title">
+            <img src="assets/logo-300px.png" />
+            <span *ngIf="!hideVendureBranding">vendure</span>
+        </label>
         <div class="login-group">
             <input
                 class="username"

packages/admin-ui/src/lib/login/src/components/login/login.component.scss

@@ -1,13 +1,50 @@
 @import 'variables';
 
 .login-wrapper {
-    background: var(--login-page-bg);
+    background-image: linear-gradient(135deg, var(--color-login-gradient-top), var(--color-login-gradient-bottom)),
+    var(--login-page-bg);
+    background-blend-mode: screen;
+    background-repeat: repeat;
     background-size: auto;
+    background-position: initial;
     justify-content: center;
 }
 
+@media screen and (max-width: $breakpoint-small) {
+    .login-wrapper {
+        justify-content: center;
+        background-color: transparent;
+        .login {
+            margin: 20px;
+            padding: 24px;
+        }
+    }
+}
+
+.login {
+    margin: 5vh 0;
+    border-radius: 6px;
+    min-height: calc(100vh - 10vh);
+    max-height: 800px;
+}
+
 .title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
+    margin-top: 8vh;
+
+    img {
+        max-width: 100%;
+        width: 150px;
+    }
+    span {
+        padding-top: 12px;
+        font-weight: bold;
+        color: var(--color-primary-500);
+        font-size: 38px;
+    }
 }
 
 .version {
@@ -25,6 +62,7 @@
 .login-error {
     max-height: 0;
     overflow: hidden;
+
     &.visible {
         max-height: 46px;
         transition: max-height 0.2s;

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

@@ -46,7 +46,7 @@ textarea,
 
 input,
 select {
-    border-radius: 3px !important;
+    border-radius: var(--border-radius-input) !important;
     border: 1px solid var(--color-grey-300) !important;
     padding: 5px !important;
     height: initial !important;

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

@@ -37,6 +37,10 @@ a:focus, button:focus {
     td.align-middle {
         vertical-align: middle!important;
     }
+
+    td.right {
+        text-align: right;
+    }
 }
 
 .full-label, .compact-label {

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

@@ -74,6 +74,7 @@
     --color-icon-button: var(--color-grey-600);
     --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);
@@ -83,6 +84,7 @@
     --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-json-editor-background-color: var(--color-grey-200);
     --color-json-editor-text: var(--color-grey-600);
     --color-json-editor-string: var(--color-secondary-600);
@@ -92,7 +94,17 @@
     --color-json-editor-key: var(--color-success-500);
     --color-json-editor-error: var(--color-error-500);
 
-    // Other variables
+    // 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=);
+    --color-login-gradient-top: var(--color-primary-800);
+    --color-login-gradient-bottom: black;
+
+    // header
+    --color-header-gradient-from: var(--color-primary-800);
+    --color-header-gradient-to: var(--color-primary-900);
+
+    // Other variables
     --breakpoint-small: 768px;
+    --border-radius-img: var(--clr-global-borderradius);
+    --border-radius-input: var(--clr-global-borderradius);
 }