manual improvement 1

client/src/app/[locale]/(private-routes)/(customer)/profile/page.tsx

@@ -14,6 +14,7 @@ import {
   ProfileSummary,
 } from '@/components';
 import LocaleSwitcher from '@/components/common/LocaleSwitcher';
+import { ThemeModeSetting } from '@/components/settings';
 import { isIranianMobile } from '@/components/PhoneNumberField';
 import { ROUTES } from '@/constants';
 import { digitsOnly } from '@/utils';
@@ -143,6 +144,9 @@ const AccountHub: FunctionComponent<{
         />
         <AccountRow icon="location" label={t('row_addresses')} onClick={() => goTo(ROUTES.ADDRESSES)} />
         <AccountRow icon="language" label={t('row_language')} onClick={() => setLanguageSheetOpen(true)} />
+        {/* The app's appearance control lives here (and in each other actor's settings hub) — it
+            used to occupy a permanent slot in every top bar for a preference set once. */}
+        <ThemeModeSetting />
         <AccountRow icon="notifications" label={t('row_notifications')} onClick={() => goTo(ROUTES.NOTIFICATIONS)} />
         <AccountRow icon="support" label={t('row_support')} onClick={() => goTo(ROUTES.SUPPORT_TICKETS)} />
       </Stack>
@@ -287,7 +291,7 @@ const AccountRow: FunctionComponent<{
         alignItems: 'center',
         gap: 1.5,
         p: 1.5,
-        borderRadius: 2,
+        borderRadius: 'var(--bal-radius-md)',
         color: tone === 'error' ? 'var(--bal-error)' : 'text.primary',
         '&:hover': { bgcolor: 'action.hover' },
       }}
@@ -309,7 +313,7 @@ const EmergencyContactCard: FunctionComponent<{
 }> = ({ complete, name, phone, onEdit }) => {
   const t = useTranslations('profile');
   return (
-    <Box sx={{ p: 1.5, borderRadius: 2, border: '1px solid', borderColor: 'divider' }}>
+    <Box sx={{ p: 1.5, borderRadius: 'var(--bal-radius-md)', border: '1px solid', borderColor: 'divider' }}>
       <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5 }}>
         <AppIcon icon={complete ? 'verified' : 'emergency'} size={22} color={complete ? 'var(--bal-success)' : 'var(--bal-warning)'} />
         <Stack sx={{ flexGrow: 1, gap: 0.25, minWidth: 0 }}>