Improve UI components with tooltips, accessibility fixes, and reusable locale/theme selectors

application/account-management/WebApp/federated-modules/common/AcceptInvitationDialog.tsx

@@ -54,7 +54,7 @@ export function AcceptInvitationDialog({
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={true}>
-      <Dialog className="sm:max-w-lg">
+      <Dialog className="sm:w-dialog-md">
         <XIcon
           onClick={() => onOpenChange(false)}
           className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted"

application/account-management/WebApp/federated-modules/common/SupportDialog.tsx

@@ -16,7 +16,7 @@ export function SupportDialog({ children }: Readonly<SupportDialogProps>) {
     <DialogTrigger>
       {children}
       <Modal isDismissable={true} zIndex="high">
-        <Dialog className="sm:max-w-lg">
+        <Dialog className="sm:w-dialog-md">
           {({ close }) => (
             <>
               <XIcon onClick={close} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />

application/account-management/WebApp/federated-modules/common/UserProfileModal.tsx

@@ -135,7 +135,10 @@ export default function UserProfileModal({ isOpen, onOpenChange }: Readonly<Prof
           </Heading>
         </Dialog>
       ) : (
-        <Dialog aria-label={t`User profile`} className="max-sm:flex max-sm:flex-col max-sm:overflow-hidden">
+        <Dialog
+          aria-label={t`User profile`}
+          className="max-sm:flex max-sm:flex-col max-sm:overflow-hidden sm:w-dialog-lg"
+        >
           <XIcon onClick={closeDialog} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />
           <DialogHeader description={<Trans>Update your profile picture and personal details here.</Trans>}>
             <Heading slot="title" className="text-2xl">
@@ -237,6 +240,7 @@ export default function UserProfileModal({ isOpen, onOpenChange }: Readonly<Prof
               <TextField
                 name="title"
                 label={t`Title`}
+                tooltip={t`Your professional title or role`}
                 defaultValue={user?.title}
                 placeholder={t`E.g. Software engineer`}
               />

application/account-management/WebApp/routes/(index)/-components/FooterSection.tsx

@@ -12,7 +12,7 @@ export function FooterSection() {
           <div className="font-normal text-base text-muted-foreground">Technology that has your back.</div>
         </div>
         <div className="right flex flex-col items-center gap-4 md:flex-row">
-          <TextField type="email" placeholder="Enter your email" />
+          <TextField type="email" placeholder="Enter your email" aria-label="Email address" />
           {/* Button component is used to display a call to action */}
           <Button variant="primary">Subscribe</Button>
         </div>

application/account-management/WebApp/routes/admin/account/index.tsx

@@ -335,6 +335,7 @@ export function AccountSettings() {
             isDisabled={updateCurrentTenantMutation.isPending}
             isReadOnly={!isOwner}
             label={t`Account name`}
+            tooltip={isOwner ? t`The name of your account, shown to users and in email notifications` : undefined}
             description={!isOwner ? t`Only account owners can modify the account name` : undefined}
             validationBehavior="aria"
           />

application/account-management/WebApp/routes/admin/users/-components/InviteUserDialog.tsx

@@ -34,7 +34,7 @@ export default function InviteUserDialog({ isOpen, onOpenChange }: Readonly<Invi
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={true}>
-      <Dialog>
+      <Dialog className="sm:w-dialog-md">
         <XIcon
           onClick={() => onOpenChange(false)}
           className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted"

application/account-management/WebApp/routes/admin/users/-components/TenantNameRequiredDialog.tsx

@@ -16,7 +16,7 @@ interface TenantNameRequiredDialogProps {
 export function TenantNameRequiredDialog({ isOpen, onOpenChange }: Readonly<TenantNameRequiredDialogProps>) {
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={true}>
-      <Dialog className="sm:max-w-lg">
+      <Dialog className="sm:w-dialog-md">
         {({ close }) => (
           <>
             <XIcon onClick={close} className="absolute top-2 right-2 h-10 w-10 cursor-pointer p-2 hover:bg-muted" />

application/account-management/WebApp/routes/signup/index.tsx

@@ -93,6 +93,7 @@ export function StartSignupForm() {
         name="region"
         selectedKey="europe"
         label={t`Region`}
+        tooltip={t`Data storage location for privacy and compliance. This cannot be changed later.`}
         description={t`This is the region where your data is stored`}
         isRequired={true}
         className="flex w-full flex-col"

application/account-management/WebApp/rsbuild.config.ts

@@ -36,8 +36,7 @@ export default defineConfig({
         "./FederatedTopMenu": "./federated-modules/topMenu/FederatedTopMenu.tsx",
         "./AuthSyncModal": "./federated-modules/common/AuthSyncModal.tsx",
         "./translations/en-US": "./shared/translations/locale/en-US.ts",
-        "./translations/da-DK": "./shared/translations/locale/da-DK.ts",
-        "./translations/nl-NL": "./shared/translations/locale/nl-NL.ts"
+        "./translations/da-DK": "./shared/translations/locale/da-DK.ts"
       }
     })
   ]

application/account-management/WebApp/shared/translations/locale/da-DK.po

@@ -176,6 +176,9 @@ msgstr "Mørk"
 msgid "Dashboard"
 msgstr "Dashboard"
 
+msgid "Data storage location for privacy and compliance. This cannot be changed later."
+msgstr "Datalagringsplacering for privatliv og compliance. Dette kan ikke ændres senere."
+
 msgid "Decline"
 msgstr "Afslå"
 
@@ -457,6 +460,9 @@ msgstr "System"
 msgid "Terms of use"
 msgstr "Brugsvilkår"
 
+msgid "The name of your account, shown to users and in email notifications"
+msgstr "Navnet på din konto, vist til brugere og i e-mail-notifikationer"
+
 msgid "Theme"
 msgstr "Tema"
 
@@ -579,6 +585,9 @@ msgstr "Din konto blev skiftet i en anden browsertab."
 msgid "Your account was switched to <0>{newTenantName}</0> in another browser tab."
 msgstr "Din konto blev skiftet til <0>{newTenantName}</0> i en anden browsertab."
 
+msgid "Your professional title or role"
+msgstr "Din professionelle titel eller rolle"
+
 msgid "Your team needs to know who's inviting them. Add an account name to get started."
 msgstr "Dit team skal vide, hvem der inviterer dem. Tilføj et kontonavn for at komme i gang."
 

application/account-management/WebApp/shared/translations/locale/en-US.po

@@ -176,6 +176,9 @@ msgstr "Dark"
 msgid "Dashboard"
 msgstr "Dashboard"
 
+msgid "Data storage location for privacy and compliance. This cannot be changed later."
+msgstr "Data storage location for privacy and compliance. This cannot be changed later."
+
 msgid "Decline"
 msgstr "Decline"
 
@@ -457,6 +460,9 @@ msgstr "System"
 msgid "Terms of use"
 msgstr "Terms of use"
 
+msgid "The name of your account, shown to users and in email notifications"
+msgstr "The name of your account, shown to users and in email notifications"
+
 msgid "Theme"
 msgstr "Theme"
 
@@ -579,6 +585,9 @@ msgstr "Your account was switched in another browser tab."
 msgid "Your account was switched to <0>{newTenantName}</0> in another browser tab."
 msgstr "Your account was switched to <0>{newTenantName}</0> in another browser tab."
 
+msgid "Your professional title or role"
+msgstr "Your professional title or role"
+
 msgid "Your team needs to know who's inviting them. Add an account name to get started."
 msgstr "Your team needs to know who's inviting them. Add an account name to get started."