WEB-492: Material Design 3 implementation: Login

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 {