fix(react): fixes styles for toast, switch and dropdownmenu

Author: chakrihacker

packages/react/src/components/auth0/my-organization/domain-table.tsx

@@ -144,7 +144,7 @@ function DomainTableView({
         accessorKey: 'domain',
         title: t('domain_table.table.columns.domain'),
         width: '35%',
-        render: (domain) => <div className="font-medium">{domain.domain}</div>,
+        render: (domain) => <div className="font-medium text-primary">{domain.domain}</div>,
       },
       {
         type: 'text',

packages/react/src/components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal.tsx

@@ -88,11 +88,13 @@ export function DomainConfigureProvidersModal({
             )}
             <Tooltip>
               <TooltipTrigger asChild>
-                <Switch
-                  checked={provider.is_associated ?? false}
-                  onCheckedChange={(checked) => handleToggleSwitch(provider, checked)}
-                  disabled={isLoadingSwitch}
-                />
+                <span>
+                  <Switch
+                    checked={provider.is_associated ?? false}
+                    onCheckedChange={(checked) => handleToggleSwitch(provider, checked)}
+                    disabled={isLoadingSwitch}
+                  />
+                </span>
               </TooltipTrigger>
               <TooltipContent className="z-[1000]">
                 {provider.is_associated

packages/react/src/components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column.tsx

@@ -60,7 +60,7 @@ export function DomainTableActionsColumn({
   return (
     <div className="flex items-center justify-end gap-4 min-w-0">
       <DropdownMenu>
-        <DropdownMenuTrigger className="h-8 w-8 p-0 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+        <DropdownMenuTrigger className="relative h-8 w-8 overflow-hidden rounded-xl border border-primary/35 bg-background shadow-button-outlined-resting transition-all duration-150 ease-in-out hover:bg-muted hover:shadow-button-outlined-hover focus:outline-none focus-visible:ring-4 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:from-primary/5 theme-default:before:to-primary/0 theme-default:before:content-[''] flex items-center justify-center">
           <MoreHorizontal className="h-4 w-4 text-gray-600 dark:text-gray-400" />
         </DropdownMenuTrigger>
         <DropdownMenuPortal>

packages/react/src/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx

@@ -105,7 +105,7 @@ export function DomainVerifyModal({
               </span>
               <Badge variant="warning">{t('verification_status.pending')}</Badge>
             </div>
-            <p className={cn('text-sm text-muted-foreground text-(length:--font-size-paragraph')}>
+            <p className={'text-sm text-muted-foreground text-(length:--font-size-paragraph)'}>
               {t('verification_status.description')}
             </p>
           </div>

packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-domain-tab-action-column.tsx

@@ -54,11 +54,13 @@ export function SsoDomainTabActionsColumn({
       {domain.status === 'verified' ? (
         <Tooltip>
           <TooltipTrigger asChild>
-            <Switch
-              checked={providerHasDomain}
-              onCheckedChange={(checked) => onToggle(domain, checked)}
-              disabled={readOnly || isUpdating}
-            />
+            <span>
+              <Switch
+                checked={providerHasDomain}
+                onCheckedChange={(checked) => onToggle(domain, checked)}
+                disabled={readOnly || isUpdating}
+              />
+            </span>
           </TooltipTrigger>
           <TooltipContent>
             {providerHasDomain

packages/react/src/components/auth0/my-organization/shared/idp-management/sso-provider-edit/sso-provisioning/sso-provisioning-tab.tsx

@@ -134,11 +134,13 @@ export function SsoProvisioningTab({
                 ) : (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Switch
-                        checked={isProvisioningEnabled}
-                        onCheckedChange={handleProvisioningToggle}
-                        disabled={enableProvisioningToggle}
-                      />
+                      <span>
+                        <Switch
+                          checked={isProvisioningEnabled}
+                          onCheckedChange={handleProvisioningToggle}
+                          disabled={enableProvisioningToggle}
+                        />
+                      </span>
                     </TooltipTrigger>
                     <TooltipContent>
                       {!provider.is_enabled

packages/react/src/providers/proxy-provider.tsx

@@ -79,6 +79,7 @@ export const Auth0ComponentProvider = ({
         <Toaster
           position={mergedToastSettings.settings?.position || 'top-right'}
           closeButton={mergedToastSettings.settings?.closeButton ?? true}
+          className="auth0-universal"
         />
       )}
       {coreClient ? (

packages/react/src/providers/spa-provider.tsx

@@ -97,6 +97,7 @@ export const Auth0ComponentProvider = ({
         <Toaster
           position={mergedToastSettings.settings?.position || 'top-right'}
           closeButton={mergedToastSettings.settings?.closeButton ?? true}
+          className="auth0-universal"
         />
       )}
       {coreClient ? (