UI fixes

apps/backoffice/src/app/features/profile/pages/ProfilePage.module.css

@@ -35,6 +35,18 @@
   box-shadow: var(--mantine-shadow-xs);
 }
 
+[data-mantine-color-scheme='dark'] .list {
+  background: var(--mantine-color-dark-6);
+}
+
+[data-mantine-color-scheme='dark'] .tab {
+  color: var(--mantine-color-dark-1);
+}
+
+[data-mantine-color-scheme='dark'] .tab:hover {
+  color: var(--mantine-color-white);
+}
+
 /* Selectable option card (language + appearance). */
 .choice {
   border: 1px solid var(--mantine-color-gray-3);
@@ -49,8 +61,21 @@
   border-color: var(--mantine-color-gray-4);
 }
 
+[data-mantine-color-scheme='dark'] .choice {
+  border-color: var(--mantine-color-dark-4);
+}
+
+[data-mantine-color-scheme='dark'] .choice:hover {
+  border-color: var(--mantine-color-dark-3);
+}
+
 .choiceActive,
 .choiceActive:hover {
   border-color: var(--mantine-color-emaPrimary-6);
   background: var(--mantine-color-emaPrimary-0);
 }
+
+[data-mantine-color-scheme='dark'] .choiceActive,
+[data-mantine-color-scheme='dark'] .choiceActive:hover {
+  background: var(--mantine-color-dark-6);
+}

apps/backoffice/src/app/features/profile/pages/ProfilePage.tsx

@@ -87,7 +87,16 @@ export function ProfilePage() {
   const [isSavingPassword, setIsSavingPassword] = useState(false);
 
   // UI-only preferences (no backend wiring yet).
+  // Two-step verification is wired but parked for the testing phase: turning it
+  // on makes every sign-in require an OTP. Swap this back for `useTwoFactor()`
+  // to re-enable it (the login/OTP side already handles `mfaRequired`).
   const [twoStepEnabled, setTwoStepEnabled] = useState(false);
+  // const {
+  //   enabled: twoStepEnabled,
+  //   isLoading: twoStepLoading,
+  //   isSaving: twoStepSaving,
+  //   setEnabled: setTwoStepEnabled,
+  // } = useTwoFactor();
   const [emailNotifications, setEmailNotifications] = useState(true);
 
   // Load the latest profile from the server on mount so the form always
@@ -449,7 +458,7 @@ export function ProfilePage() {
                                 backgroundColor:
                                   i <= score
                                     ? `var(--mantine-color-${strengthColors[score]}-6)`
-                                    : 'var(--mantine-color-gray-2)',
+                                    : 'var(--mantine-color-default-border)',
                               }}
                             />
                           ))}
@@ -471,6 +480,15 @@ export function ProfilePage() {
                   <Switch
                     checked={twoStepEnabled}
                     onChange={(e) => setTwoStepEnabled(e.currentTarget.checked)}
+                    // disabled={twoStepLoading || twoStepSaving}
+                    // onChange={async (e) => {
+                    //   try {
+                    //     await setTwoStepEnabled(e.currentTarget.checked);
+                    //     notify.success(t('profile.twoStep.saved'));
+                    //   } catch (err) {
+                    //     handleError(err);
+                    //   }
+                    // }}
                   />
                 </Group>
 
@@ -525,7 +543,7 @@ export function ProfilePage() {
                           ) : (
                             <IconCircle
                               size={20}
-                              color="var(--mantine-color-gray-4)"
+                              color="var(--mantine-color-dimmed)"
                             />
                           )}
                         </Group>
@@ -558,7 +576,7 @@ export function ProfilePage() {
                             color={
                               active
                                 ? 'var(--mantine-color-emaPrimary-6)'
-                                : 'var(--mantine-color-gray-6)'
+                                : 'var(--mantine-color-dimmed)'
                             }
                           />
                           <Text fw={600} size="sm" style={{ flex: 1 }}>
@@ -600,7 +618,7 @@ export function ProfilePage() {
                             color={
                               active
                                 ? 'var(--mantine-color-emaPrimary-6)'
-                                : 'var(--mantine-color-gray-6)'
+                                : 'var(--mantine-color-dimmed)'
                             }
                           />
                           <Text fw={600} size="sm" style={{ flex: 1 }}>
@@ -623,7 +641,7 @@ export function ProfilePage() {
 
               <Group align="flex-start" justify="space-between" wrap="nowrap">
                 <Group gap="sm" wrap="nowrap">
-                  <IconBell size={20} color="var(--mantine-color-gray-6)" />
+                  <IconBell size={20} color="var(--mantine-color-dimmed)" />
                   <div>
                     <Text fw={600}>{t('profile.notifications.title')}</Text>
                     <Text size="sm" c="dimmed">