WEB-492: Material Design 3 implementation: Login

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

@@ -1,11 +1,14 @@
 @if (existMoreThanOneServer) {
-  <mat-form-field id="server-selector">
-    <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
+  <mat-form-field id="server-selector" [appearance]="appearance" [class.outlined-variant]="appearance === 'outline'">
+    @if (showLabel) {
+      <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
+    }
     <mat-select
       [formControl]="serverSelector"
       (selectionChange)="setServer()"
       panelClass="server-panel"
       panelWidth="null"
+      [placeholder]="!showLabel ? ('labels.inputs.Server' | translate) : ''"
     >
       <div class="sticky">
         <form [formGroup]="form" (ngSubmit)="addNewServer()">

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

@@ -1,3 +1,138 @@
+// ===== Base Server Selector Styles =====
+#server-selector {
+  &.mat-mdc-form-field {
+    // Default styles (fill variant)
+    &:not(.outlined-variant) {
+      mat-form-field {
+        width: 96%;
+      }
+    }
+
+    // Outlined variant styles (used in login)
+    &.outlined-variant {
+      .mat-mdc-text-field-wrapper {
+        padding: 0;
+      }
+
+      .mat-mdc-form-field-flex {
+        align-items: center;
+      }
+
+      .mat-mdc-form-field-infix {
+        padding: 12px 0;
+        min-height: 48px;
+      }
+
+      // Outlined border styles with Material Design 3
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: var(--md-sys-color-outline, #79747e);
+          border-width: 1px;
+        }
+      }
+
+      // Hover state
+      &:hover:not(.mat-form-field-disabled) {
+        .mdc-notched-outline {
+          .mdc-notched-outline__leading,
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
+            border-color: var(--md-sys-color-on-surface, #1a1c1e);
+          }
+        }
+      }
+
+      // Focused state
+      &.mat-focused {
+        .mdc-notched-outline {
+          .mdc-notched-outline__leading,
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
+            border-color: var(--md-sys-color-primary, #1074b9);
+            border-width: 2px;
+          }
+        }
+
+        .mat-mdc-floating-label {
+          color: var(--md-sys-color-primary, #1074b9);
+        }
+      }
+
+      // Select styling
+      .mat-mdc-select {
+        font-size: 0.875rem;
+        color: var(--md-sys-color-on-surface, #1a1c1e);
+      }
+
+      .mat-mdc-select-arrow {
+        color: var(--md-sys-color-on-surface-variant, #44474e);
+      }
+
+      // Label styling
+      .mat-mdc-floating-label {
+        font-size: 0.875rem;
+        color: var(--md-sys-color-on-surface-variant, #44474e);
+      }
+    }
+  }
+}
+
+// Dark theme support for outlined variant
+.dark-theme {
+  #server-selector.outlined-variant {
+    .mdc-notched-outline {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__notch,
+      .mdc-notched-outline__trailing {
+        border-color: var(--md-sys-color-outline, #938f99);
+      }
+    }
+
+    &:hover:not(.mat-form-field-disabled) {
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: var(--md-sys-color-on-surface, #e2e2e5);
+        }
+      }
+    }
+
+    &.mat-focused {
+      .mdc-notched-outline {
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__notch,
+        .mdc-notched-outline__trailing {
+          border-color: var(--md-sys-color-primary, #5ba2ec);
+        }
+      }
+
+      .mat-mdc-floating-label {
+        color: var(--md-sys-color-primary, #5ba2ec);
+      }
+    }
+
+    .mat-mdc-select {
+      color: var(--md-sys-color-on-surface, #e2e2e5);
+    }
+
+    .mat-mdc-select-arrow {
+      color: var(--md-sys-color-on-surface-variant, #c4c6d0);
+    }
+
+    .mat-mdc-floating-label {
+      color: var(--md-sys-color-on-surface-variant, #c4c6d0);
+    }
+
+    .sticky {
+      background-color: var(--md-sys-color-surface-container, #2c2f36);
+    }
+  }
+}
+
+// ===== Common Styles =====
 .actions {
   display: flex;
   align-items: center;
@@ -12,8 +147,8 @@
   position: sticky;
   z-index: 1; // appear above mat-option
   top: 0; // fix at the top
-  background-color: white; // don't see mat-option when scrolling
-  box-shadow: 1px -2px 10px 0 grey; // shadow at the bottom
+  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
 }
 
 mat-form-field {

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, Input } from '@angular/core';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { UntypedFormBuilder, Validators } from '@angular/forms';
@@ -27,6 +27,12 @@ export class ServerSelectorComponent implements OnInit {
   dialog = inject(MatDialog);
   private formBuilder = inject(UntypedFormBuilder);
 
+  /** Appearance of the form field (fill, outline). Defaults to 'fill'. */
+  @Input() appearance: 'fill' | 'outline' = 'fill';
+
+  /** Show label in the form field. Defaults to true. */
+  @Input() showLabel: boolean = true;
+
   /** Input server. */
   form: any;