WEB-563 feat(login): modernize login UI with Material Design 3 and production mode (#3061)

improve

improve

improve

src/app/shared/server-selector/server-selector.component.html

@@ -21,7 +21,7 @@
       <div class="sticky">
         <form [formGroup]="form" (ngSubmit)="addNewServer()">
           <div class="actions">
-            <mat-form-field class="ml align-start">
+            <mat-form-field class="add-server-field" appearance="outline">
               <span matPrefix><mat-icon>language</mat-icon></span>
               <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
               <input matInput type="text" autocomplete="off" formControlName="url" />
@@ -31,7 +31,7 @@
                 </mat-error>
               }
             </mat-form-field>
-            <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">
+            <button type="submit" [disabled]="form.invalid" mat-raised-button color="primary">
               {{ 'labels.buttons.Add' | translate }}
             </button>
           </div>

src/app/shared/server-selector/server-selector.component.scss

@@ -142,12 +142,22 @@
 // ===== Common Styles =====
 .actions {
   display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-}
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
 
-.ml {
-  margin-left: 10px;
+  .mat-mdc-form-field {
+    flex: 1;
+    margin-bottom: 0;
+  }
+
+  button {
+    flex-shrink: 0;
+    height: 40px;
+    min-width: 60px;
+    margin-top: 4px;
+  }
 }
 
 .sticky {
@@ -156,8 +166,10 @@
   top: 0; // fix at the top
   background-color: var(--md-sys-color-surface-container, white); // don't see mat-option when scrolling
   box-shadow: 1px -2px 10px 0 rgb(0 0 0 / 10%); // shadow at the bottom
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 mat-form-field {
-  width: 96%;
+  width: 100%;
 }

src/app/shared/tenant-selector/tenant-selector.component.html

@@ -10,7 +10,7 @@
   <mat-select [formControl]="tenantSelector" (selectionChange)="setTenantIdentifier()" class="tenantselector">
     @for (tenant of tenants; track tenant) {
       <mat-option [value]="tenant">
-        {{ tenant }}
+        {{ tenant | titlecase }}
       </mat-option>
     }
   </mat-select>