feat: Update login modal

Author: zatteo

src/app/accounts/login.component.html

@@ -1,10 +1,10 @@
 <form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="localFormPromise" attr.aria-hidden="{{showingModal}}">
-    <div class="content CozyTheme--inverted">
+    <div class="content">
         <img class="logo-image" alt="Bitwarden">
         <p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p>
         <div class="box last">
             <div class="box-content">
-                <svg *ngIf="!canAuthWithOIDC" width="96" height="64" class="u-mb-half"><path fill="#FFF" fill-rule="evenodd" d="M80 32c8.837 0 16 7.163 16 16s-7.163 16-16 16-16-7.163-16-16 7.163-16 16-16zm0 8c-2.206 0-4 1.794-4 4v2h-1c-.552 0-1 .456-1 .995v8.01c0 .55.456.995 1.002.995h9.996c.553 0 1.002-.456 1.002-.995v-8.01A.995.995 0 0085 46h-1v-2c0-2.206-1.795-4-4-4zm0 8.5c.826 0 1.5.672 1.5 1.5 0 .552-.305 1.032-.75 1.29v2.46a.751.751 0 01-1.5 0v-2.46A1.49 1.49 0 0178.5 50a1.5 1.5 0 011.5-1.5zM47.755 0c4.455 0 8.665 1.689 11.85 4.762 2.779 2.679 4.507 6.147 4.97 9.9 8.201.724 14.74 7.229 15.374 15.339L80 30c-9.941 0-18 8.059-18 18H32.946C23.6 48 16 40.507 16 31.297c0-4.393 1.716-8.542 4.833-11.681a16.942 16.942 0 0110.096-4.903c.452-3.772 2.185-7.26 4.975-9.95C39.09 1.689 43.298 0 47.754 0zM80 42c1.103 0 2 1.121 2 2.5V46h-4v-1.5c0-1.379.897-2.5 2-2.5zM55.386 28a1.132 1.132 0 00-1.113 1.154c.011.203.02.3.056.51.04.227.096.46.172.692-3.7 3.16-9.297 3.168-13.007.023.165-.49.233-.942.233-1.234a1.13 1.13 0 00-1.104-1.143 1.136 1.136 0 00-1.157 1.1c0 .11-.04.36-.135.618-.153.419-.41.771-.802 1.017a1.136 1.136 0 00-.333 1.597 1.127 1.127 0 001.538.323 4.21 4.21 0 00.505-.375C42.426 34.054 45.163 35 47.986 35c2.83 0 5.573-.95 7.764-2.73.16.141.332.27.517.387a1.134 1.134 0 001.307-1.848l-.101-.073-.077-.048a1.9 1.9 0 01-.546-.589 2.312 2.312 0 01-.316-1.003A1.128 1.128 0 0055.386 28z"></path></svg>
+                <img *ngIf="!canAuthWithOIDC" width="96" height="64" class="u-mb-half" [src]="appIcon" />
                 <img *ngIf="canAuthWithOIDC" width="96" height="64" class="u-mb-half" [src]="appIconForOIDC" />
                 <h1>{{(canAuthWithOIDC ? 'authentification-oidc' : 'authentification') | i18n}}</h1>
                 <p>{{'confirmYourIdentity' | i18n}}</p>

src/app/accounts/login.component.ts

@@ -55,6 +55,7 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
     showingModal = false;
     isInCozyApp: boolean = false;
     baseUrl: string;
+    appIcon = 'images/icon.svg';
     canAuthWithOIDC = false;
     appIconForOIDC = 'images/icons-login.svg';
     forceLoading = false;

src/scss/misc.scss

@@ -436,11 +436,8 @@ img.icon-type {
     cursor:text;
     border: 1px solid;
     border-radius: 4px;
-    border-color: #ffffffa3;
+    border-color: $text-muted;
     position: relative;
-    & ::selection {
-        background: #b5d4ff;;
-    }
 
 
     .error label {
@@ -449,7 +446,6 @@ img.icon-type {
 
     label {
         font-size: 16px;
-        color: #b5d4ff;
     }
 
 
@@ -478,7 +474,7 @@ img.icon-type {
         padding-right: 0;
         max-width: calc(100% - #{ $visible-label-left });
         transition: all 0.5s;
-        background-color: #297EF2;
+        background-color: white;
     }
 
     &.eyed > .visible-label > label {

src/scss/pages.scss

@@ -191,18 +191,18 @@
         padding: 40px;
     }
     .box-content {
-        background-color: $brand-primary;
+        background-color: white;
         padding: 48px 24px 24px 24px;
         font-size: 16px;
-        color : white;
+        color: $text-color;
         svg {
             margin-right: auto;
             margin-left: auto;
             display: block;
         }
         h1 {
             font-size: 24px;
-            color : white;
+            color : $text-color;
             margin-bottom: 0.35em;
         }
         .material-input{
@@ -211,10 +211,10 @@
         }
         input {
             background-color: unset;
-            color : white;
+            color : $text-color;
         }
         a {
-            color:white;
+            color:$text-color;
             margin-bottom: 40px;
         }
         a:hover {
@@ -230,9 +230,8 @@
         }
     }
     .box-content-row {
-        background-color: unset !important;
         label {
-            color:#b5d4ff;
+            color:$text-muted;
         }
     }
 

src/scss/variables.scss

@@ -5,7 +5,7 @@ $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 16px;
 $font-size-large: 18px;
 $font-size-small: 12px;
-$text-color: #000000;
+$text-color: #424244;
 $border-color: #f0f0f0;
 $border-color-dark: #ddd;
 $list-item-hover: #fbfbfb;