UI-Improvements

frontend/src/app/features/shell/change-password/change-password-modal.component.ts

@@ -33,6 +33,68 @@ const DEFAULT_POLICY: PasswordPolicy = {
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, ReactiveFormsModule],
+  styles: [`
+    .modal-overlay {
+      position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(4px);
+      display: flex; align-items: center; justify-content: center; z-index: 1200;
+      padding: 16px;
+    }
+    .modal-card {
+      background: #000000; color: #ffffff;
+      border: 3px solid var(--neon-red);
+      padding: 28px 24px;
+      width: min(440px, 94vw); position: relative;
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 0, 51, 0.35);
+    }
+    h2 {
+      font-family: var(--font-heading, 'Chakra Petch', sans-serif);
+      font-size: 2rem; font-weight: 900; font-style: italic;
+      text-transform: uppercase; color: #ffffff; margin-bottom: 20px;
+      letter-spacing: 0.5px;
+    }
+    .field {
+      display: flex; flex-direction: column; gap: 6px;
+      margin-bottom: 16px; text-align: left;
+    }
+    .field span {
+      font-family: var(--font-mono); font-size: 0.75rem; font-weight: 800;
+      color: #888899; text-transform: uppercase; letter-spacing: 1px;
+    }
+    .field input {
+      font-family: var(--font-mono); background-color: #000000; color: #ffffff;
+      border: 2px solid var(--neon-purple); padding: 12px 14px;
+      font-size: 0.95rem; outline: none; width: 100%;
+    }
+    .field input:focus {
+      border-color: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-cyan-glow);
+    }
+    .error {
+      color: var(--neon-red); font-family: var(--font-mono); font-size: 0.85rem; font-weight: bold;
+    }
+    .hint {
+      color: #777788; font-family: var(--font-mono); font-size: 0.75rem; margin-bottom: 20px;
+    }
+    .actions {
+      display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px;
+    }
+    .actions button {
+      font-family: var(--font-mono); font-weight: 800; text-transform: uppercase;
+      padding: 10px 20px; font-size: 0.9rem; cursor: pointer;
+    }
+    .btn-cancel {
+      background: #000000; color: var(--neon-purple); border: 2px solid var(--neon-purple);
+    }
+    .btn-cancel:hover:not([disabled]) {
+      background: var(--neon-purple); color: #000000;
+    }
+    .btn-ok {
+      background: var(--neon-red); color: #000000; border: 2px solid var(--neon-red);
+    }
+    .btn-ok:hover:not([disabled]) {
+      background: #000000; color: var(--neon-red); box-shadow: 0 0 15px rgba(255, 0, 51, 0.4);
+    }
+  `],
   template: `
     @if (open()) {
       <div class="modal-overlay" data-testid="change-password-overlay" (click)="onCancel()">
@@ -44,27 +106,29 @@ const DEFAULT_POLICY: PasswordPolicy = {
           data-testid="change-password-modal"
           (click)="$event.stopPropagation()"
         >
-          <h2 id="cp-title">Change Password</h2>
+          <h2 id="cp-title">CHANGE PASSWORD</h2>
 
           <form [formGroup]="form" (ngSubmit)="onSubmit()">
             @if (mode() === 'self') {
               <label class="field">
-                <span>Old password</span>
+                <span>OLD PASSWORD</span>
                 <input
                   type="password"
                   autocomplete="current-password"
                   formControlName="oldPassword"
+                  placeholder="CURRENT PASSWORD"
                   data-testid="cp-old"
                 />
               </label>
             }
 
             <label class="field">
-              <span>New password</span>
+              <span>NEW PASSWORD</span>
               <input
                 type="password"
                 autocomplete="new-password"
                 formControlName="newPassword"
+                placeholder="NEW PASSWORD"
                 data-testid="cp-new"
               />
               @if (fieldErrorFor('newPassword'); as msg) {
@@ -73,11 +137,12 @@ const DEFAULT_POLICY: PasswordPolicy = {
             </label>
 
             <label class="field">
-              <span>Confirm new password</span>
+              <span>CONFIRM NEW PASSWORD</span>
               <input
                 type="password"
                 autocomplete="new-password"
                 formControlName="confirmNewPassword"
+                placeholder="CONFIRM NEW PASSWORD"
                 data-testid="cp-confirm"
               />
               @if (fieldErrorFor('confirmPassword'); as msg) {
@@ -99,18 +164,20 @@ const DEFAULT_POLICY: PasswordPolicy = {
             <div class="actions">
               <button
                 type="button"
+                class="btn-cancel"
                 data-testid="cp-cancel"
                 (click)="onCancel()"
                 [disabled]="submitting()"
               >
-                Cancel
+                CANCEL
               </button>
               <button
                 type="submit"
+                class="btn-ok"
                 data-testid="cp-ok"
                 [disabled]="submitting()"
               >
-                OK
+                {{ submitting() ? 'SAVING...' : 'OK' }}
               </button>
             </div>
           </form>