@micha.bigler/ui-core-micha 2.33.2 → 2.34.0

package/src/components/AllowedEmailDomainsManager.jsx

@@ -9,6 +9,9 @@ import {
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
 
+export const ALLOWED_EMAIL_DOMAINS_ALERT_SX = { mb: 2 };
+export const ALLOWED_EMAIL_DOMAINS_BUTTON_SX = { mt: 2 };
+
 export function AllowedEmailDomainsManager({
   domains = [],
   enabled = false,
@@ -63,8 +66,8 @@ export function AllowedEmailDomainsManager({
         )}
       </Typography>
 
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+      {error && <Alert severity="error" sx={ALLOWED_EMAIL_DOMAINS_ALERT_SX}>{error}</Alert>}
+      {success && <Alert severity="success" sx={ALLOWED_EMAIL_DOMAINS_ALERT_SX}>{success}</Alert>}
 
       <TextField
         label={t('Auth.ALLOWED_EMAIL_DOMAINS_LABEL', 'Allowed email domains')}
@@ -80,7 +83,7 @@ export function AllowedEmailDomainsManager({
         disabled={busy || !canEdit}
       />
 
-      <Button variant="contained" sx={{ mt: 2 }} onClick={handleSave} disabled={busy || !canEdit}>
+      <Button variant="contained" sx={ALLOWED_EMAIL_DOMAINS_BUTTON_SX} onClick={handleSave} disabled={busy || !canEdit}>
         {t('Common.SAVE', 'Save')}
       </Button>
     </Box>

package/src/components/AuthFactorRequirementCard.jsx

@@ -11,6 +11,8 @@ import {
 import { useTranslation } from 'react-i18next';
 import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
 
+export const AUTH_FACTOR_REQUIREMENT_ALERT_SX = { mb: 2 };
+
 export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
   const { t } = useTranslation();
   const [value, setValue] = useState('1');
@@ -71,8 +73,8 @@ export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
           'Define the minimum number of authentication factors required for sign-in.',
         )}
       </Typography>
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+      {error && <Alert severity="error" sx={AUTH_FACTOR_REQUIREMENT_ALERT_SX}>{error}</Alert>}
+      {success && <Alert severity="success" sx={AUTH_FACTOR_REQUIREMENT_ALERT_SX}>{success}</Alert>}
       <FormControl>
         <RadioGroup value={value} onChange={handleChange}>
           <FormControlLabel

package/src/components/BulkInviteCsvTab.jsx

@@ -16,6 +16,13 @@ import {
 import { useTranslation } from 'react-i18next';
 import { sendAdminInvite } from '../auth/authApi';
 
+export const BULK_INVITE_ACTION_SX = {
+  minWidth: 120,
+  height: 40,
+  whiteSpace: 'nowrap',
+};
+export const BULK_INVITE_ALERT_SX = { mb: 2 };
+
 function parseEmailsFromCsv(text) {
   if (!text) return [];
 
@@ -45,12 +52,6 @@ export function BulkInviteCsvTab({
   onCompleted,
 }) {
   const { t } = useTranslation();
-  const actionButtonSx = {
-    minWidth: 120,
-    height: 40,
-    textTransform: 'none',
-    whiteSpace: 'nowrap',
-  };
   const [emails, setEmails] = useState([]);
   const [results, setResults] = useState({});
   const [busy, setBusy] = useState(false);
@@ -134,15 +135,15 @@ export function BulkInviteCsvTab({
         )}
       </Typography>
 
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+      {error && <Alert severity="error" sx={BULK_INVITE_ALERT_SX}>{error}</Alert>}
+      {success && <Alert severity="success" sx={BULK_INVITE_ALERT_SX}>{success}</Alert>}
 
       <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 2, flexWrap: 'wrap' }}>
-        <Button variant="outlined" size="small" component="label" disabled={busy} sx={actionButtonSx}>
+        <Button variant="outlined" size="small" component="label" disabled={busy} sx={BULK_INVITE_ACTION_SX}>
           {t('Account.BULK_INVITE_UPLOAD', 'Upload CSV')}
           <input type="file" accept=".csv,text/csv" hidden onChange={handleFile} />
         </Button>
-        <Button variant="contained" size="small" sx={actionButtonSx} onClick={handleInviteAll} disabled={busy || emails.length === 0}>
+        <Button variant="contained" size="small" sx={BULK_INVITE_ACTION_SX} onClick={handleInviteAll} disabled={busy || emails.length === 0}>
           {t('Account.BULK_INVITE_SEND', 'Send Invites')}
         </Button>
         <Typography variant="body2">

package/src/components/LoginForm.jsx

@@ -9,6 +9,8 @@ import {
 import { useTranslation } from 'react-i18next';
 import { SocialLoginButtons } from './SocialLoginButtons';
 
+export const LOGIN_FORM_DIVIDER_SX = { my: 2 };
+
 export function LoginForm({
   onSubmit,
   onForgotPassword,
@@ -62,7 +64,7 @@ export function LoginForm({
             {t('Auth.LOGIN_USE_PASSKEY_BUTTON')}
           </Button>
 
-          <Divider sx={{ my: 2 }}>
+          <Divider sx={LOGIN_FORM_DIVIDER_SX}>
             {t('Auth.LOGIN_OR')}
           </Divider>
         </>
@@ -109,7 +111,7 @@ export function LoginForm({
       {/* Other ways to sign in */}
       {onSocialLogin && (
         <Box>
-          <Divider sx={{ my: 2 }}>
+          <Divider sx={LOGIN_FORM_DIVIDER_SX}>
             {t('Auth.LOGIN_OR')}
           </Divider>
           <SocialLoginButtons
@@ -121,7 +123,7 @@ export function LoginForm({
       {/* Account actions */}
       {(onSignUp || onForgotPassword) && (
       <Box>
-        <Divider sx={{ my: 2 }}>
+        <Divider sx={LOGIN_FORM_DIVIDER_SX}>
           {t('Auth.LOGIN_OR')}
         </Divider>
 

package/src/components/MFAComponent.jsx

@@ -20,6 +20,13 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetchRecoveryCodes, generateRecoveryCodes  } from '../auth/authApi';
 
+export const MFA_ALERT_SX = { mb: 2 };
+export const MFA_CARD_SX = { mb: 3 };
+export const MFA_ACTIVE_CARD_SX = { bgcolor: '#f0fdf4' };
+export const MFA_TEXT_FIELD_SX = { mb: 2 };
+export const MFA_DIVIDER_SX = { my: 3 };
+export const MFA_RECOVERY_BUTTON_SX = { mt: 2 };
+
 export function MFAComponent() {
   const { t } = useTranslation();
 
@@ -165,14 +172,14 @@ export function MFAComponent() {
       </Typography>
 
       {errorKey && (
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Alert severity="error" sx={MFA_ALERT_SX}>
           {t(errorKey)}
         </Alert>
       )}
 
       {/* --- CASE 1: TOTP IS ACTIVE --- */}
       {totpAuthenticator ? (
-        <Card variant="outlined" sx={{ mb: 3, bgcolor: '#f0fdf4' }}>
+        <Card variant="outlined" sx={[MFA_CARD_SX, MFA_ACTIVE_CARD_SX]}>
           <CardContent
             sx={{
               display: 'flex',
@@ -209,7 +216,7 @@ export function MFAComponent() {
 
       {/* --- WIZARD: SETUP --- */}
       {isSettingUp && totpData && (
-        <Card variant="outlined" sx={{ mb: 3 }}>
+        <Card variant="outlined" sx={MFA_CARD_SX}>
           <CardContent>
             <Typography variant="subtitle1" gutterBottom>
               {t('Auth.MFA_TOTP_QR_TITLE')}
@@ -251,7 +258,7 @@ export function MFAComponent() {
                     onChange={(e) => setVerifyCode(e.target.value)}
                     fullWidth
                     required
-                    sx={{ mb: 2 }}
+                    sx={MFA_TEXT_FIELD_SX}
                     autoComplete="off"
                   />
                   <Stack direction="row" spacing={1}>
@@ -278,7 +285,7 @@ export function MFAComponent() {
         </Card>
       )}
 
-      <Divider sx={{ my: 3 }} />
+      <Divider sx={MFA_DIVIDER_SX} />
 
       {/* --- RECOVERY CODES --- */}
       <Typography variant="h6" gutterBottom>
@@ -294,7 +301,7 @@ export function MFAComponent() {
         </Button>
       ) : (
         <Box sx={{ bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }}>
-          <Alert severity="warning" sx={{ mb: 2 }}>
+          <Alert severity="warning" sx={MFA_ALERT_SX}>
             {t('Auth.MFA_RECOVERY_WARNING')}
           </Alert>
           <Stack direction="row" flexWrap="wrap" gap={2}>
@@ -326,7 +333,7 @@ export function MFAComponent() {
               ))}
           </Stack>
           <Button
-            sx={{ mt: 2 }}
+            sx={MFA_RECOVERY_BUTTON_SX}
             size="small"
             onClick={handleGenerateNewRecoveryCodes}
           >

package/src/components/MfaLoginComponent.jsx

@@ -16,6 +16,10 @@ import { useTranslation } from 'react-i18next';
 import { authenticateWithMFA, fetchCurrentUser, requestMfaSupportHelp } from '../auth/authApi';
 import { loginWithPasskey } from '../utils/authService';
 
+export const MFA_LOGIN_ALERT_SX = { mb: 2 };
+export const MFA_LOGIN_DIVIDER_SX = { my: 2 };
+export const MFA_LOGIN_TEXT_FIELD_SX = { mb: 2 };
+
 export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCancel }) {
   const { t } = useTranslation();
   const [code, setCode] = useState('');
@@ -113,13 +117,13 @@ export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCan
       </Typography>
 
       {errorKey && (
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Alert severity="error" sx={MFA_LOGIN_ALERT_SX}>
           {t(errorKey)}
         </Alert>
       )}
 
       {infoKey && (
-        <Alert severity="info" sx={{ mb: 2 }}>
+        <Alert severity="info" sx={MFA_LOGIN_ALERT_SX}>
           {t(infoKey)}
         </Alert>
       )}
@@ -136,7 +140,7 @@ export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCan
           </Button>
         )}
 
-        <Divider sx={{ my: 2 }}>
+        <Divider sx={MFA_LOGIN_DIVIDER_SX}>
           {t('Auth.LOGIN_OR')}
         </Divider>
 
@@ -152,7 +156,7 @@ export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCan
               fullWidth
               disabled={submitting || helpRequested}
               autoComplete="one-time-code"
-              sx={{ mb: 2 }}
+              sx={MFA_LOGIN_TEXT_FIELD_SX}
             />
             <Button
               type="submit"
@@ -165,7 +169,7 @@ export function MfaLoginComponent({ availableTypes, identifier, onSuccess, onCan
           </Box>
         )}
 
-        <Divider sx={{ my: 2 }}>
+        <Divider sx={MFA_LOGIN_DIVIDER_SX}>
           {t('Auth.LOGIN_OR')}
         </Divider>
 

package/src/components/PasskeysComponent.jsx

@@ -22,6 +22,9 @@ import { fetchPasskeys, deletePasskey } from '../auth/authApi';
 import { registerPasskey } from '../utils/authService';
 import { FEATURES } from '../auth/authConfig';
 
+export const PASSKEYS_ALERT_SX = { mb: 2 };
+export const PASSKEYS_DIVIDER_SX = { mb: 2 };
+
 export function PasskeysComponent() {
   const { t } = useTranslation();
 
@@ -131,18 +134,18 @@ export function PasskeysComponent() {
       </Typography>
 
       {!passkeysSupported && (
-        <Alert severity="info" sx={{ mb: 2 }}>
+        <Alert severity="info" sx={PASSKEYS_ALERT_SX}>
           {t('Auth.PASSKEY_BROWSER_NOT_SUPPORTED')}
         </Alert>
       )}
 
       {messageKey && (
-        <Alert severity="success" sx={{ mb: 2 }}>
+        <Alert severity="success" sx={PASSKEYS_ALERT_SX}>
           {t(messageKey)}
         </Alert>
       )}
       {errorKey && (
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Alert severity="error" sx={PASSKEYS_ALERT_SX}>
           {t(errorKey)}
         </Alert>
       )}
@@ -176,7 +179,7 @@ export function PasskeysComponent() {
         </Box>
       )}
 
-      <Divider sx={{ mb: 2 }} />
+      <Divider sx={PASSKEYS_DIVIDER_SX} />
 
       {/* List of existing passkeys */}
       {loading ? (

package/src/components/QrSignupManager.jsx

@@ -11,6 +11,8 @@ import { useTranslation } from 'react-i18next';
 import { QRCodeSVG } from 'qrcode.react';
 import { createSignupQr } from '../auth/authApi';
 
+export const QR_SIGNUP_MANAGER_ALERT_SX = { mb: 2 };
+
 const DEFAULT_EXPIRY_DAYS = 90;
 const DEFAULT_MAX_REDEMPTIONS = 1;
 
@@ -297,15 +299,15 @@ export function QrSignupManager({
         />
       </Box>
 
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+      {error && <Alert severity="error" sx={QR_SIGNUP_MANAGER_ALERT_SX}>{error}</Alert>}
+      {success && <Alert severity="success" sx={QR_SIGNUP_MANAGER_ALERT_SX}>{success}</Alert>}
       {copyState === 'copied' && (
-        <Alert severity="success" sx={{ mb: 2 }}>
+        <Alert severity="success" sx={QR_SIGNUP_MANAGER_ALERT_SX}>
           {t('Auth.SIGNUP_QR_LINK_COPIED', 'Signup link copied.')}
         </Alert>
       )}
       {copyState === 'error' && (
-        <Alert severity="warning" sx={{ mb: 2 }}>
+        <Alert severity="warning" sx={QR_SIGNUP_MANAGER_ALERT_SX}>
           {t('Auth.SIGNUP_QR_COPY_UNAVAILABLE', 'Copying the link is not available in this browser.')}
         </Alert>
       )}

package/src/components/QrSignupValidityManager.jsx

@@ -10,6 +10,10 @@ import {
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
 
+export const QR_SIGNUP_VALIDITY_ALERT_SX = { mb: 2 };
+export const QR_SIGNUP_VALIDITY_FIELD_SX = { flex: 1 };
+export const QR_SIGNUP_VALIDITY_BUTTON_SX = { minWidth: 120, mt: { sm: '8px' } };
+
 const DEFAULT_EXPIRY_DAYS = 90;
 
 function clampExpiryDays(value) {
@@ -71,8 +75,8 @@ export function QrSignupValidityManager({
         )}
       </Typography>
 
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+      {error && <Alert severity="error" sx={QR_SIGNUP_VALIDITY_ALERT_SX}>{error}</Alert>}
+      {success && <Alert severity="success" sx={QR_SIGNUP_VALIDITY_ALERT_SX}>{success}</Alert>}
 
       <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5} alignItems={{ sm: 'flex-start' }}>
         <TextField
@@ -85,13 +89,13 @@ export function QrSignupValidityManager({
           value={currentExpiryDays}
           onChange={(event) => setCurrentExpiryDays(event.target.value)}
           disabled={busy || !canEdit}
-          sx={{ flex: 1 }}
+          sx={QR_SIGNUP_VALIDITY_FIELD_SX}
         />
         <Button
           variant="contained"
           onClick={handleSave}
           disabled={busy || !canEdit}
-          sx={{ minWidth: 120, mt: { sm: '8px' } }}
+          sx={QR_SIGNUP_VALIDITY_BUTTON_SX}
         >
           {t('Common.SAVE', 'Save')}
         </Button>

package/src/components/RegistrationMethodsManager.jsx

@@ -11,6 +11,9 @@ import {
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
 
+export const REGISTRATION_METHODS_ALERT_SX = { mb: 2 };
+export const REGISTRATION_METHODS_INFO_SX = { mt: 2 };
+
 const EMPTY_POLICY = {
   allow_admin_invite: true,
   allow_self_signup_access_code: false,
@@ -76,9 +79,9 @@ export function RegistrationMethodsManager({
       <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
         {t('Auth.REGISTRATION_METHODS_HINT', 'Choose which signup and invite flows are active for this app.')}
       </Typography>
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
-      {saveError && <Alert severity="error" sx={{ mb: 2 }}>{saveError}</Alert>}
-      {success && <Alert severity="success" sx={{ mb: 2 }}>{success}</Alert>}
+      {error && <Alert severity="error" sx={REGISTRATION_METHODS_ALERT_SX}>{error}</Alert>}
+      {saveError && <Alert severity="error" sx={REGISTRATION_METHODS_ALERT_SX}>{saveError}</Alert>}
+      {success && <Alert severity="success" sx={REGISTRATION_METHODS_ALERT_SX}>{success}</Alert>}
 
       <Stack spacing={1}>
         <FormControlLabel
@@ -134,7 +137,7 @@ export function RegistrationMethodsManager({
       </Stack>
 
       {policyState.allow_self_signup_email_domain && !(policyState.allowed_email_domains || []).length && (
-        <Alert severity="info" sx={{ mt: 2 }}>
+        <Alert severity="info" sx={REGISTRATION_METHODS_INFO_SX}>
           {t(
             'Auth.EMAIL_DOMAIN_CURRENTLY_BLOCKED_HINT',
             'Email-domain signup is enabled, but it stays blocked until at least one allowed domain is saved.',

package/src/components/SecurityComponent.jsx

@@ -15,6 +15,9 @@ import { changePassword } from '../auth/authApi';
 import { startSocialLogin } from '../utils/authService';
 import { AuthContext } from '../auth/AuthContext';
 
+export const SECURITY_ALERT_SX = { mb: 2 };
+export const SECURITY_DIVIDER_SX = { my: 3 };
+
 export function SecurityComponent({
   fromRecovery = false,
   fromWeakLogin = false,
@@ -75,24 +78,24 @@ export function SecurityComponent({
   return (
     <Box>
       {fromRecovery && (
-        <Alert severity="warning" sx={{ mb: 2 }}>
+        <Alert severity="warning" sx={SECURITY_ALERT_SX}>
           {t('Security.RECOVERY_LOGIN_WARNING')}
         </Alert>
       )}
 
       {fromWeakLogin && (
-        <Alert severity="warning" sx={{ mb: 2 }}>
+        <Alert severity="warning" sx={SECURITY_ALERT_SX}>
           {t('Security.WEAK_LOGIN_WARNING')}
         </Alert>
       )}
 
       {messageKey && (
-        <Alert severity="success" sx={{ mb: 2 }}>
+        <Alert severity="success" sx={SECURITY_ALERT_SX}>
           {t(messageKey)}
         </Alert>
       )}
       {errorKey && (
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Alert severity="error" sx={SECURITY_ALERT_SX}>
           {t(errorKey)}
         </Alert>
       )}
@@ -103,7 +106,7 @@ export function SecurityComponent({
             {t('Auth.LOGIN_PASSWORD_LABEL')}
           </Typography>
           <PasswordChangeForm onSubmit={handlePasswordChange} />
-          {needsDividerAfter('password') && <Divider sx={{ my: 3 }} />}
+          {needsDividerAfter('password') && <Divider sx={SECURITY_DIVIDER_SX} />}
         </>
       )}
 
@@ -119,14 +122,14 @@ export function SecurityComponent({
             onProviderClick={handleSocialClick}
             providers={socialProviders}
           />
-          {needsDividerAfter('social') && <Divider sx={{ my: 3 }} />}
+          {needsDividerAfter('social') && <Divider sx={SECURITY_DIVIDER_SX} />}
         </>
       )}
 
       {passkeysEnabled && (
         <>
           <PasskeysComponent />
-          {needsDividerAfter('passkeys') && <Divider sx={{ my: 3 }} />}
+          {needsDividerAfter('passkeys') && <Divider sx={SECURITY_DIVIDER_SX} />}
         </>
       )}
 

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -33,6 +33,10 @@ import {
   updateUserSupportStatus,
 } from '../auth/authApi';
 
+export const SUPPORT_RECOVERY_AGENT_PAPER_SX = { p: 2, mb: 3 };
+export const SUPPORT_RECOVERY_ALERT_SX = { mb: 2 };
+export const SUPPORT_RECOVERY_AGENT_BUTTON_SX = { minWidth: 160 };
+
 export function SupportRecoveryRequestsTab() {
   const { t, i18n } = useTranslation();
   const { user } = useContext(AuthContext);
@@ -198,7 +202,7 @@ export function SupportRecoveryRequestsTab() {
   return (
     <Box>
       {canManageAgents && (
-        <Paper variant="outlined" sx={{ p: 2, mb: 3, borderRadius: 2 }}>
+        <Paper variant="outlined" sx={SUPPORT_RECOVERY_AGENT_PAPER_SX}>
           <Typography variant="h6" gutterBottom>
             {t('Support.AGENTS_TITLE', 'Support agents')}
           </Typography>
@@ -211,7 +215,7 @@ export function SupportRecoveryRequestsTab() {
           </Typography>
 
           {agentErrorKey && (
-            <Alert severity="error" sx={{ mb: 2 }}>
+            <Alert severity="error" sx={SUPPORT_RECOVERY_ALERT_SX}>
               {t(agentErrorKey)}
             </Alert>
           )}
@@ -242,7 +246,7 @@ export function SupportRecoveryRequestsTab() {
               variant="contained"
               onClick={handleAddAgent}
               disabled={!selectedAgentCandidate || agentLoading || Boolean(agentActionUserId)}
-              sx={{ minWidth: 160 }}
+              sx={SUPPORT_RECOVERY_AGENT_BUTTON_SX}
             >
               {t('Support.AGENTS_ADD', 'Add as agent')}
             </Button>
@@ -305,7 +309,7 @@ export function SupportRecoveryRequestsTab() {
       </Typography>
 
       {errorKey && (
-        <Alert severity="error" sx={{ mb: 2 }}>
+        <Alert severity="error" sx={SUPPORT_RECOVERY_ALERT_SX}>
           {t(errorKey)}
         </Alert>
       )}

package/src/components/UserInviteComponent.jsx

@@ -3,19 +3,19 @@ import { Box, TextField, Button, Typography, Alert, CircularProgress } from '@mu
 import { sendAdminInvite } from '../auth/authApi';
 import { useTranslation } from 'react-i18next';
 
+export const USER_INVITE_ACTION_SX = {
+  minWidth: 120,
+  height: 40,
+  whiteSpace: 'nowrap',
+};
+export const USER_INVITE_ALERT_SX = { mb: 2 };
+
 export function UserInviteComponent() { // FIX: Removed apiUrl prop
   const { t } = useTranslation();
   const [inviteEmail, setInviteEmail] = useState('');
   const [message, setMessage] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const actionButtonSx = {
-    minWidth: 120,
-    height: 40,
-    textTransform: 'none',
-    whiteSpace: 'nowrap',
-  };
-
   const inviteUser = async () => {
     setMessage('');
     setError('');
@@ -43,8 +43,8 @@ export function UserInviteComponent() { // FIX: Removed apiUrl prop
         {t('Auth.INVITE_TITLE', 'Invite a new user')}
       </Typography>
 
-      {message && <Alert severity="success" sx={{ mb: 2 }}>{message}</Alert>}
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      {message && <Alert severity="success" sx={USER_INVITE_ALERT_SX}>{message}</Alert>}
+      {error && <Alert severity="error" sx={USER_INVITE_ALERT_SX}>{error}</Alert>}
 
       <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
         <TextField
@@ -65,7 +65,7 @@ export function UserInviteComponent() { // FIX: Removed apiUrl prop
             size="small"
             onClick={inviteUser} 
             disabled={loading || !inviteEmail}
-            sx={actionButtonSx}
+            sx={USER_INVITE_ACTION_SX}
         >
           {loading ? <CircularProgress size={24} color="inherit" /> : t('Auth.INVITE_BUTTON', 'Invite')}
         </Button>

package/src/components/UserListComponent.jsx

@@ -27,6 +27,12 @@ import { fetchUsersList, deleteUser, updateUserRole } from '../auth/authApi';
 
 const DEFAULT_ROLES = ['none', 'student', 'teacher', 'admin'];
 
+export const USER_LIST_ACTION_SX = { minWidth: 90 };
+export const USER_LIST_ALERT_SX = { mb: 2 };
+export const USER_LIST_HEADER_CELL_SX = { fontWeight: 600, whiteSpace: 'nowrap' };
+export const USER_LIST_EMPTY_CELL_SX = { py: 4, color: 'text.secondary' };
+export const USER_LIST_BODY_CELL_SX = { verticalAlign: 'top', py: 1 };
+
 export function UserListComponent({
     roles = DEFAULT_ROLES,
     currentUser,
@@ -54,7 +60,6 @@ export function UserListComponent({
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(25);
   const controlSx = { minWidth: 140 };
-  const actionButtonSx = { textTransform: 'none', minWidth: 90 };
 
   const loadUsers = useCallback(async () => {
     setLoading(true);
@@ -419,7 +424,7 @@ export function UserListComponent({
                 variant="outlined"
                 onClick={() => runRowAction(action, row)}
                 disabled={isBusy || isDisabled}
-                sx={actionButtonSx}
+                sx={USER_LIST_ACTION_SX}
               >
                 {typeof action.label === 'function'
                   ? action.label({ user: row, t, currentUser, canEdit: canEdit(row) })
@@ -438,7 +443,7 @@ export function UserListComponent({
                   startIcon={<DeleteIcon />}
                   onClick={() => handleDelete(row.id)}
                   disabled={!canDelete(row)}
-                  sx={actionButtonSx}
+                  sx={USER_LIST_ACTION_SX}
                 >
                   {t('Common.DELETE', 'Delete')}
                 </Button>
@@ -508,7 +513,7 @@ export function UserListComponent({
         />
       </Box>
 
-      {error && <Alert severity="error" sx={{ mb: 2 }}>{t(error)}</Alert>}
+      {error && <Alert severity="error" sx={USER_LIST_ALERT_SX}>{t(error)}</Alert>}
 
       {loading && (
         <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
@@ -527,7 +532,7 @@ export function UserListComponent({
                       key={col.field}
                       align={col.headerAlign || col.align || 'left'}
                       sortDirection={sortField === col.field ? sortDir : false}
-                      sx={{ minWidth: col.minWidth, fontWeight: 600, whiteSpace: 'nowrap' }}
+                      sx={[USER_LIST_HEADER_CELL_SX, { minWidth: col.minWidth }]}
                     >
                       {col.sortable !== false ? (
                         <TableSortLabel
@@ -550,7 +555,7 @@ export function UserListComponent({
                     <TableCell
                       colSpan={columns.length}
                       align="center"
-                      sx={{ py: 4, color: 'text.secondary' }}
+                      sx={USER_LIST_EMPTY_CELL_SX}
                     >
                       {t('UserList.NO_USERS', 'No users found.')}
                     </TableCell>
@@ -562,7 +567,7 @@ export function UserListComponent({
                         <TableCell
                           key={col.field}
                           align={col.align || 'left'}
-                          sx={{ verticalAlign: 'top', py: 1 }}
+                          sx={USER_LIST_BODY_CELL_SX}
                         >
                           {col.renderCell(row)}
                         </TableCell>