feat(admin-ui): revamp MAU and Settings screens as per Figma (#2626)

admin-ui/app/components/GluuButton/GluuButton.tsx

@@ -3,6 +3,7 @@ import { fontFamily } from '@/styles/fonts'
 import { useTheme } from '@/context/theme/themeContext'
 import getThemeColor from '@/context/theme/config'
 import { THEME_DARK } from '@/context/theme/constants'
+import { resolveBackgroundColor } from '@/utils/buttonUtils'
 import type { GluuButtonProps } from './types'
 
 const SIZES = {
@@ -32,6 +33,7 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
     className,
     useOpacityOnHover = false,
     hoverOpacity,
+    disableHoverStyles = false,
     onClick,
     type = 'button',
     title,
@@ -50,7 +52,7 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
     const text = textColor ?? themeColors.fontColor
     const border = borderColor ?? (isDark ? 'transparent' : themeColors.borderColor)
     const hoverBg = isDark ? themeColors.lightBackground : themeColors.borderColor
-    const keepBgOnHover = useOpacityOnHover && isHovered && !isDisabled
+    const keepBgOnHover = !disableHoverStyles && useOpacityOnHover && isHovered && !isDisabled
     const opacityOnHover = hoverOpacity ?? 0.5
 
     return {
@@ -66,15 +68,15 @@ const GluuButton: React.FC<GluuButtonProps> = (props) => {
       minHeight: minHeight ?? sizeConfig.minHeight,
       borderRadius: borderRadius ?? '6px',
       border: `1px solid ${border}`,
-      backgroundColor: keepBgOnHover
-        ? bg
-        : outlined
-          ? isHovered && !isDisabled
-            ? `${bg}15`
-            : 'transparent'
-          : isHovered && !isDisabled
-            ? hoverBg
-            : bg,
+      backgroundColor: resolveBackgroundColor(
+        disableHoverStyles,
+        keepBgOnHover,
+        outlined,
+        isHovered,
+        isDisabled,
+        bg,
+        hoverBg,
+      ),
       color: outlined ? themeColors.fontColor : text,
       cursor: isDisabled ? 'not-allowed' : 'pointer',
       opacity: isDisabled ? 0.65 : keepBgOnHover ? opacityOnHover : 1,

admin-ui/app/components/GluuButton/types.ts

@@ -23,6 +23,7 @@ export interface GluuButtonProps {
   className?: string
   useOpacityOnHover?: boolean
   hoverOpacity?: number
+  disableHoverStyles?: boolean
   onClick?: () => void
   type?: 'button' | 'submit' | 'reset'
   title?: string

admin-ui/app/context/theme/config.ts

@@ -39,6 +39,34 @@ const createLightTheme = () => {
     checkbox: {
       uncheckedBorder: customColors.sidebarHoverBg,
     },
+    errorColor: customColors.accentRed,
+    formFooter: {
+      back: {
+        backgroundColor: customColors.statusActive,
+        textColor: customColors.white,
+        borderColor: customColors.statusActive,
+      },
+      apply: {
+        backgroundColor: customColors.primaryDark,
+        textColor: customColors.white,
+        borderColor: customColors.primaryDark,
+      },
+      cancel: {
+        backgroundColor: 'transparent',
+        textColor: customColors.primaryDark,
+        borderColor: customColors.primaryDark,
+      },
+    },
+    settings: {
+      cardBackground: customColors.white,
+      customParamsBox: customColors.white,
+      customParamsInput: customColors.whiteSmoke,
+      formInputBackground: customColors.whiteSmoke,
+      inputBorder: customColors.borderInput,
+      addPropertyButton: { bg: customColors.addPropertyBgDark, text: customColors.white },
+      removeButton: { bg: customColors.statusInactive, text: customColors.white },
+      errorButtonText: customColors.white,
+    },
   }
 }
 
@@ -80,6 +108,34 @@ const createDarkTheme = () => {
     checkbox: {
       uncheckedBorder: customColors.cedarCardBorderDark,
     },
+    errorColor: customColors.accentRed,
+    formFooter: {
+      back: {
+        backgroundColor: customColors.statusActive,
+        textColor: customColors.white,
+        borderColor: customColors.statusActive,
+      },
+      apply: {
+        backgroundColor: customColors.white,
+        textColor: customColors.primaryDark,
+        borderColor: customColors.white,
+      },
+      cancel: {
+        backgroundColor: 'transparent',
+        textColor: customColors.white,
+        borderColor: customColors.white,
+      },
+    },
+    settings: {
+      cardBackground: customColors.darkCardBg,
+      customParamsBox: customColors.darkCardBg,
+      customParamsInput: customColors.darkInputBg,
+      formInputBackground: customColors.darkInputBg,
+      inputBorder: customColors.darkBorder,
+      addPropertyButton: { bg: customColors.white, text: customColors.addPropertyTextDark },
+      removeButton: { bg: customColors.statusInactive, text: customColors.white },
+      errorButtonText: customColors.white,
+    },
   }
 }
 

admin-ui/app/customColors.ts

@@ -14,12 +14,10 @@ export const customColors = {
   primaryDark: '#0a2540',
   lightBorder: '#efefef',
   darkBackground: '#0b2947',
-  darkSidebar: '#0a2540',
   darkBorder: '#193f66',
   darkCardBg: '#091e34',
   darkDropdownBg: '#194169',
   textSecondary: '#425466',
-  mauDark: '#4CAF50',
   mauPieClientCredentials: '#64b5f6',
   mauPieAuthCodeAccess: '#ffb74d',
   mauTrendClientCredentials: '#5daafa',
@@ -29,6 +27,11 @@ export const customColors = {
   statusActiveBg: '#d3f5e6',
   statusInactive: '#f13f44',
   statusInactiveBg: '#ffe6e7',
+  addPropertyBgDark: '#132E4D',
+  mauAccentDark: '#00a65d',
+  addPropertyTextDark: '#1A2F45',
+  customParamsBoxDark: '#1E3650',
+  customParamsInputDark: '#1B2F45',
   borderInput: '#ebebeb',
   darkInputBg: '#15395d',
   lightInputBg: '#f9fafb',
@@ -40,7 +43,6 @@ export const customColors = {
   buttonLightBg: '#f4f6f8',
   darkBorderGradientBase: '#00d5e6',
   ribbonShadowColor: '#1a237e',
-  // Cedarling configuration specific (synced with Figma light & dark themes)
   cedarCardBgDark: '#10375e',
   cedarCardBorderDark: '#224f7c',
   cedarTextSecondaryDark: '#c9dbec',
@@ -50,12 +52,6 @@ export const customColors = {
   cedarInfoTextLight: '#4f8196',
 } as const
 
-/**
- * Converts a hex color string to RGB format (e.g., "#ffffff" -> "255, 255, 255").
- * @param hex - Hex color string (with or without # prefix)
- * @param fallback - Optional fallback RGB string to return if hex is invalid (default: "0, 0, 0")
- * @returns RGB string in format "r, g, b" or the fallback if hex is invalid
- */
 export const hexToRgb = (hex: string, fallback: string = '0, 0, 0'): string => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   if (!result) {

admin-ui/app/locales/en/translation.json

@@ -889,7 +889,6 @@
     "no_role_mappings_found": "No role mappings found",
     "permissions_count_one": "{{count}} permission",
     "permissions_count_other": "{{count}} permissions",
-    "permissions_count": "{{count, plural, one {{count}} permission} other {{count}} permissions}}",
     "no_permissions_assigned": "No permissions assigned",
     "out_of": "out of",
     "permission_label": "Permission",
@@ -1094,6 +1093,7 @@
     "ldap_authentication": "LDAP Authentication",
     "services_health": "Services Health Status",
     "mau_dashboard": "Monthly Active Users Dashboard",
+    "usage_token_analytics": "Usage & Token Analytics",
     "mau_trend": "MAU Trend Over Time",
     "token_distribution": "Token Distribution by Type",
     "token_trends": "Token Trends Over Time",

admin-ui/app/locales/es/translation.json

@@ -366,7 +366,7 @@
     "minimum_length": "Longitud Mínima",
     "month": "Mes",
     "monthly_active_users": "Usuarios Activos Mensuales",
-    "total_mau": "MAU Total",
+    "total_mau": "MAU total",
     "total_tokens": "Tokens Totales",
     "cc_tokens": "Tokens de Credenciales de Cliente",
     "authz_code_tokens": "Tokens de Código de Autorización",
@@ -887,7 +887,6 @@
     "no_role_mappings_found": "No se encontraron mapeos de roles",
     "permissions_count_one": "{{count}} permiso",
     "permissions_count_other": "{{count}} permisos",
-    "permissions_count": "{{count, plural, one {{count}} permiso} other {{count}} permisos}}",
     "no_permissions_assigned": "No hay permisos asignados",
     "out_of": "de",
     "permission_label": "Permiso",
@@ -1084,6 +1083,7 @@
     "ldap_authentication": "Autenticación LDAP",
     "services_health": "Estado de salud de los servicios",
     "mau_dashboard": "Panel de Usuarios Activos Mensuales",
+    "usage_token_analytics": "Uso y Analítica de Tokens",
     "mau_trend": "Tendencia de MAU en el Tiempo",
     "token_distribution": "Distribución de Tokens por Tipo",
     "token_trends": "Tendencias de Tokens en el Tiempo",

admin-ui/app/locales/fr/translation.json

@@ -422,7 +422,7 @@
     "client_name": "Nom du client",
     "client_secret": "Secret du client",
     "computation_pool_size": "Taille du pool de calcul",
-    "config_api_url": "Config API URL",
+    "config_api_url": "URL de l'API de configuration",
     "configuration_id": "Identifiant de configuration",
     "connection_factory_type": "Type d'usine de connexion",
     "connection_timeout": "Délai de connection dépassé",
@@ -496,7 +496,7 @@
     "minimum_length": "Longueur minimale",
     "month": "Mois",
     "monthly_active_users": "Utilisateurs actifs mensuels",
-    "total_mau": "MAU Total",
+    "total_mau": "MAU total",
     "total_tokens": "Jetons Totaux",
     "cc_tokens": "Jetons d'Identification Client",
     "authz_code_tokens": "Jetons de Code d'Autorisation",
@@ -821,7 +821,6 @@
     "no_role_mappings_found": "Aucun mappage de rôles trouvé",
     "permissions_count_one": "{{count}} permission",
     "permissions_count_other": "{{count}} permissions",
-    "permissions_count": "{{count, plural, one {{count}} permission} other {{count}} permissions}}",
     "no_permissions_assigned": "Aucune permission attribuée",
     "out_of": "sur",
     "permission_label": "Permission",
@@ -1016,6 +1015,7 @@
     "ldap_authentication": "Authentification LDAP",
     "services_health": "État de Santé des Services",
     "mau_dashboard": "Tableau de Bord des Utilisateurs Actifs Mensuels",
+    "usage_token_analytics": "Utilisation et Analyse des Jetons",
     "mau_trend": "Tendance MAU dans le Temps",
     "token_distribution": "Distribution des Jetons par Type",
     "token_trends": "Tendances des Jetons dans le Temps",

admin-ui/app/locales/pt/translation.json

@@ -406,7 +406,7 @@
     "client_name": "Nome do cliente",
     "client_secret": "Segredo do cliente",
     "computation_pool_size": "Tamanho do pool de computação",
-    "config_api_url": "Config API URL",
+    "config_api_url": "URL da API de configuração",
     "configuration_id": "Id de configuração",
     "connection_factory_type": "Tipo de conexão de fábrica",
     "connection_timeout": "Tempo limite de conexão",
@@ -489,7 +489,7 @@
     "json_web_keys": "JSON Web Keys",
     "jwks": "Jwks",
     "jwks_uri": "Jwks Uri",
-    "list_paging_size": "List paging size",
+    "list_paging_size": "Tamanho da paginação da lista",
     "location_type": "Tipo de localização",
     "log_level": "Nível de registro",
     "log_layout": "Layout de log",
@@ -508,7 +508,7 @@
     "minimum_length": "Comprimento mínimo",
     "month": "Mês",
     "monthly_active_users": "Usuários ativos mensais",
-    "total_mau": "MAU Total",
+    "total_mau": "MAU total",
     "total_tokens": "Tokens Totais",
     "cc_tokens": "Tokens de Credenciais de Cliente",
     "authz_code_tokens": "Tokens de Código de Autorização",
@@ -1008,6 +1008,7 @@
     "ldap_authentication": "Autenticação Ldap",
     "services_health": "Estado de Saúde dos Serviços",
     "mau_dashboard": "Painel de Usuários Ativos Mensais",
+    "usage_token_analytics": "Uso e Análise de Tokens",
     "mau_trend": "Tendência de MAU ao Longo do Tempo",
     "token_distribution": "Distribuição de Tokens por Tipo",
     "token_trends": "Tendências de Tokens ao Longo do Tempo",

admin-ui/app/redux/types/index.ts

@@ -543,7 +543,8 @@ export interface SmtpPluginState {
 
 // RootState: core + optional plugin reducers (dynamically registered)
 export interface RootState
-  extends CoreAppState, Partial<AdminPluginState & AuthServerPluginState & SmtpPluginState> {}
+  extends CoreAppState,
+    Partial<AdminPluginState & AuthServerPluginState & SmtpPluginState> {}
 
 // AppDispatch, useAppDispatch, useAppSelector: import from @/redux/hooks (canonical source using typeof store.dispatch)