ui phase 3

client/src/components/auth/SelectRole.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { FunctionComponent, useState } from 'react';
-import { CircularProgress, Paper, Stack, Typography } from '@mui/material';
+import { Box, CircularProgress, Paper, Stack, Typography } from '@mui/material';
 import { useRouter } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 
@@ -18,9 +18,11 @@ interface SelectRoleProps {
   initialRole?: AppRole;
 }
 
+// 'family' (a household under one roof) reads as "receiving care"; 'visits' (a clinical-visit
+// glyph) reads as "nurse professional" — a house icon for the nurse option was the prior defect.
 const ROLE_OPTIONS: ReadonlyArray<{ role: PublicRole; icon: string }> = [
-  { role: 'customer', icon: 'account' },
-  { role: 'nurse', icon: 'home' },
+  { role: 'customer', icon: 'family' },
+  { role: 'nurse', icon: 'visits' },
 ];
 
 /**
@@ -68,11 +70,14 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
                 tabIndex={0}
                 onClick={() => setSelected(role)}
                 onKeyDown={(event) => {
-                  if (event.key === 'Enter' || event.key === ' ') setSelected(role);
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    setSelected(role);
+                  }
                 }}
                 elevation={0}
                 sx={{
-                  p: 2,
+                  p: 2.5,
                   cursor: 'pointer',
                   display: 'flex',
                   alignItems: 'center',
@@ -80,10 +85,29 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
                   border: '2px solid',
                   borderColor: isSelected ? 'primary.main' : 'divider',
                   borderRadius: 2,
+                  // Selection is never color-only: the soft fill pairs with a check glyph below.
+                  bgcolor: isSelected ? 'var(--bal-primary-soft)' : 'transparent',
+                  transition:
+                    'background-color var(--bal-motion-base) var(--bal-easing-standard), border-color var(--bal-motion-base) var(--bal-easing-standard)',
                 }}
               >
-                <AppIcon icon={icon} size={28} color="var(--bal-primary)" />
-                <Stack sx={{ gap: 0.25 }}>
+                <Box
+                  aria-hidden="true"
+                  sx={{
+                    width: 56,
+                    height: 56,
+                    flexShrink: 0,
+                    borderRadius: '50%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    bgcolor: 'var(--bal-bg-paper)',
+                    boxShadow: 'var(--bal-shadow-1)',
+                  }}
+                >
+                  <AppIcon icon={icon} size={30} color="var(--bal-primary)" />
+                </Box>
+                <Stack sx={{ gap: 0.25, flexGrow: 1 }}>
                   <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
                     {t(`role_${role}`)}
                   </Typography>
@@ -91,11 +115,18 @@ const SelectRole: FunctionComponent<SelectRoleProps> = ({ initialRole }) => {
                     {t(`role_${role}_desc`)}
                   </Typography>
                 </Stack>
+                <Box sx={{ width: 24, height: 24, flexShrink: 0 }} aria-hidden="true">
+                  {isSelected && <AppIcon icon="verified" size={24} color="var(--bal-primary)" />}
+                </Box>
               </Paper>
             );
           })}
         </Stack>
 
+        <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'center' }}>
+          {t('role_add_later_note')}
+        </Typography>
+
         <AppButton
           color="primary"
           variant="contained"