chore(i18n): add user profile translations and error messages

Author: brionmario

packages/javascript/src/i18n/en-US.ts

@@ -78,6 +78,13 @@ const translations: I18nTranslations = {
   'username.password.title': 'Sign In',
   'username.password.subtitle': 'Enter your username and password to continue.',
 
+  /* |---------------------------------------------------------------| */
+  /* |                          User Profile                         | */
+  /* |---------------------------------------------------------------| */
+
+  'user.profile.title': 'Profile',
+  'user.profile.update.generic.error': 'An error occurred while updating your profile. Please try again.',
+
   /* |---------------------------------------------------------------| */
   /* |                     Organization Switcher                     | */
   /* |---------------------------------------------------------------| */

packages/javascript/src/models/i18n.ts

@@ -76,6 +76,13 @@ export interface I18nTranslations {
   'username.password.title': string;
   'username.password.subtitle': string;
 
+  /* |---------------------------------------------------------------| */
+  /* |                          User Profile                         | */
+  /* |---------------------------------------------------------------| */
+
+  'user.profile.title': string;
+  'user.profile.update.generic.error': string;
+
   /* |---------------------------------------------------------------| */
   /* |                     Organization Switcher                     | */
   /* |---------------------------------------------------------------| */

packages/javascript/src/utils/transformBrandingPreferenceToTheme.ts

@@ -23,8 +23,8 @@ import createTheme from '../theme/createTheme';
 /**
  * Safely extracts a color value from the branding preference structure
  */
-type ColorVariant = { main?: string; dark?: string; contrastText?: string };
-type TextColors = { primary?: string; secondary?: string; dark?: string };
+type ColorVariant = {main?: string; dark?: string; contrastText?: string};
+type TextColors = {primary?: string; secondary?: string; dark?: string};
 
 const extractColorValue = (colorVariant?: ColorVariant, preferDark = false): string | undefined => {
   if (preferDark && colorVariant?.dark && colorVariant.dark.trim()) {
@@ -77,7 +77,8 @@ const transformThemeVariant = (themeVariant: ThemeVariant, isDark = false): Part
       background: {
         surface: extractColorValue(colors?.background?.surface as ColorVariant, isDark),
         disabled: extractColorValue(colors?.background?.surface as ColorVariant, isDark),
-        dark: (colors?.background?.surface as ColorVariant)?.dark || (colors?.background?.surface as ColorVariant)?.main,
+        dark:
+          (colors?.background?.surface as ColorVariant)?.dark || (colors?.background?.surface as ColorVariant)?.main,
         body: {
           main: extractColorValue(colors?.background?.body as ColorVariant, isDark),
           dark: (colors?.background?.body as ColorVariant)?.dark || (colors?.background?.body as ColorVariant)?.main,

packages/react/src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts

@@ -37,7 +37,9 @@ const useStyles = (theme: Theme, colorScheme: string) => {
       border: none;
       cursor: pointer;
       border-radius: ${theme.vars.borderRadius.medium};
-      transition: background-color 0.15s ease-in-out;
+      transition: none;
+      box-shadow: none;
+      background-color: transparent;
 
       &:hover {
         background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};
@@ -47,6 +49,11 @@ const useStyles = (theme: Theme, colorScheme: string) => {
         outline: 2px solid ${theme.vars.colors.primary};
         outline-offset: 2px;
       }
+
+      &:hover, &:focus, &:active, &:focus-visible {
+        transition: none;
+        box-shadow: none;
+      }
     `;
 
     const userName = css`
@@ -86,16 +93,23 @@ const useStyles = (theme: Theme, colorScheme: string) => {
       color: ${theme.vars.colors.text.primary};
       text-decoration: none;
       border: none;
-      background: none;
       cursor: pointer;
       font-size: 0.875rem;
       text-align: left;
       border-radius: ${theme.vars.borderRadius.medium};
-      transition: background-color 0.15s ease-in-out;
+      transition: none;
+      box-shadow: none;
+      background: transparent;
+
 
       &:hover {
         background-color: ${theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.05)'};
       }
+
+      &:hover, &:focus, &:active, &:focus-visible {
+        transition: none;
+        box-shadow: none;
+      }
     `;
 
     const menuItemAnchor = css`

packages/react/src/components/presentation/UserProfile/BaseUserProfile.styles.ts

@@ -113,7 +113,7 @@ const useStyles = (theme: Theme, colorScheme: string) => {
     `;
 
     const info = css`
-      padding: calc(${theme.vars.spacing.unit} * 2) 0;
+      padding: calc(${theme.vars.spacing.unit} * 1.5) 0;
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
 

packages/react/src/components/primitives/Dialog/Dialog.styles.ts

@@ -41,8 +41,16 @@ const useStyles = (theme: Theme, colorScheme: string) => {
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'};
       outline: none;
-      max-width: 50vw;
-      min-width: 50vw;
+      max-width: 35vw;
+      min-width: 35vw;
+      @media (max-width: 900px) {
+        max-width: 80vw;
+        min-width: 80vw;
+      }
+      @media (max-width: 600px) {
+        max-width: 95vw;
+        min-width: 95vw;
+      }
       max-height: 90vh;
       overflow-y: auto;
       z-index: 10000;