chore(admin-ui): Update login screen

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

@@ -6,15 +6,18 @@
                     {{ 'common.login-image-title' | translate }}
                 </div>
                 <div class="login-wrapper-image-copyright">
-                    <p *ngIf="imageCreator" class="creator">Photo by  <a [href]="imageCreatorUrl" target="_blank">{{ imageCreator }}</a> on <a [href]="imageUnsplashUrl" target="_blank">Unsplash</a></p>
+                    <p *ngIf="imageCreator" class="creator">
+                        Photo by <a [href]="imageCreatorUrl" target="_blank">{{ imageCreator }}</a> on
+                        <a [href]="imageUnsplashUrl" target="_blank">Unsplash</a>
+                    </p>
                     <p *ngIf="imageLocation" class="location">{{ imageLocation }}</p>
                 </div>
             </div>
-            <img *ngIf="imageUrl" [src]="imageUrl" [alt]="imageUrl">
+            <img *ngIf="imageUrl" [src]="imageUrl" [alt]="imageUrl" />
         </div>
         <div class="login-wrapper-form">
             <p class="login-title">
-                {{ 'common.login-title' | translate: { brand: hideVendureBranding ? brand : "Vendure" } }}
+                {{ 'common.login-title' | translate : { brand: hideVendureBranding ? brand : 'Vendure' } }}
             </p>
             <form class="login-form">
                 <div class="login-group">
@@ -34,7 +37,12 @@
                         [(ngModel)]="password"
                         [placeholder]="'common.password' | translate"
                     />
-                    <clr-alert [clrAlertType]="'danger'"  [clrAlertClosable]="false" [class.visible]="errorMessage" class="login-error">
+                    <clr-alert
+                        [clrAlertType]="'danger'"
+                        [clrAlertClosable]="false"
+                        [class.visible]="errorMessage"
+                        class="login-error"
+                    >
                         <clr-alert-item>
                             <span class="alert-text">
                                 {{ errorMessage }}
@@ -51,22 +59,26 @@
                         />
                         <label>{{ 'common.remember-me' | translate }}</label>
                     </clr-checkbox-wrapper>
-                    <button
-                        type="submit"
-                        class="btn btn-primary"
-                        (click)="logIn()"
-                        [disabled]="!username || !password"
-                    >
-                        {{ 'common.login' | translate }}
-                    </button>
+                    <div>
+                        <button
+                            type="submit"
+                            class="button primary login-button"
+                            (click)="logIn()"
+                            [disabled]="!username || !password"
+                        >
+                            {{ 'common.login' | translate }}
+                        </button>
+                    </div>
                 </div>
                 <div class="version">
-                    <span *ngIf="brand">{{ brand }} <span *ngIf="!hideVendureBranding || !hideVersion">-</span></span>
+                    <span *ngIf="brand"
+                        >{{ brand }} <span *ngIf="!hideVendureBranding || !hideVersion">-</span></span
+                    >
                     <span *ngIf="!hideVendureBranding">vendure</span>
                     <span *ngIf="!hideVersion">v{{ version }}</span>
                 </div>
             </form>
         </div>
-        <img class="login-wrapper-logo" src="assets/logo-300px.png" />
+        <img class="login-wrapper-logo" src="assets/logo-300px.png" *ngIf="!hideVendureBranding" />
     </div>
 </div>

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

@@ -1,7 +1,7 @@
 @import 'variables';
 
 .login-wrapper {
-    background: #f0f2f5;
+    background: var(--color-login-page-bg);
     background-image: none;
     height: 100vh;
     display: flex;
@@ -17,7 +17,8 @@
         justify-content: flex-start;
         align-items: stretch;
         position: relative;
-        border-radius: 3px;
+        border-radius: var(--border-radius);
+        border: 1px solid var(--color-weight-150);
         overflow: hidden;
 
         @media (max-width: $breakpoint-medium) {
@@ -34,7 +35,7 @@
             @media (max-width: $breakpoint-medium) {
                 height: 300px;
             }
-    
+
             img {
                 display: block;
                 width: 100%;
@@ -78,7 +79,7 @@
                         color: white;
                         margin: 0 !important;
                     }
-                    
+
                     a{
                         color: white;
                         text-decoration: underline;
@@ -110,7 +111,7 @@
                 font-weight: bold;
                 font-size: 1.2rem;
                 margin-bottom: 20px;
-                color: #afafaf; 
+                color: var(--color-weight-600);
             }
 
             .login-group {
@@ -146,6 +147,12 @@
     }
 }
 
+.login-button {
+    width: 100%;
+    margin-top: var(--space-unit);
+    justify-content: center;
+}
+
 .version {
     flex: 1;
     flex-grow: 1;
@@ -195,4 +202,4 @@
     60% {
         transform: translate3d(4px, 0, 0);
     }
-}
+}

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

@@ -182,6 +182,8 @@
     --color-split-view-separator-border: var(--color-weight-150);
     --color-split-view-separator-resize-border: var(--color-primary-400);
 
+    --color-login-page-bg: var(--color-weight-100);
+
     // Layout
     --layout-content-max-width: 1400px;
     --left-nav-width: 0px;