From 035b726e15532d27d08b22c0eb29f4e8e5035980 Mon Sep 17 00:00:00 2001
From: Denis Kralj <168424106+denis-kralj-novu@users.noreply.github.com>
Date: Wed, 31 Jul 2024 09:21:22 +0200
Subject: [PATCH] fix(web): various UI fixes (#6188)

---
 .../ee/clerk/components/UserProfileButton.tsx |  7 ++
 .../src/ee/clerk/providers/ClerkProvider.tsx  | 87 +++++++++++++++----
 2 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/ee/clerk/components/UserProfileButton.tsx b/apps/web/src/ee/clerk/components/UserProfileButton.tsx
index 6dcba7a74e5..dbf630905e7 100644
--- a/apps/web/src/ee/clerk/components/UserProfileButton.tsx
+++ b/apps/web/src/ee/clerk/components/UserProfileButton.tsx
@@ -1,4 +1,6 @@
 import { UserButton } from '@clerk/clerk-react';
+import { useColorScheme } from '@novu/design-system';
+import { Title } from '@novu/novui';
 import { IconCreditCard, IconGroup, IconRoomPreferences, IconWorkspacePremium } from '@novu/novui/icons';
 import { FeatureFlagsKeysEnum } from '@novu/shared';
 import { ROUTES } from '../../../constants/routes';
@@ -9,6 +11,8 @@ import { CustomOrganizationProfile } from './CustomOrganizationProfile';
 
 export function UserProfileButton() {
   const isV2Enabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_V2_ENABLED);
+  const { colorScheme } = useColorScheme();
+  const headerColor = colorScheme === 'dark' ? 'rgb(255, 255, 255)' : 'rgb(33, 33, 38)';
 
   return (
     <UserButton afterSignOutUrl={ROUTES.AUTH_LOGIN}>
@@ -29,6 +33,9 @@ export function UserProfileButton() {
       )}
 
       <UserButton.UserProfilePage label="Billing plans" url={ROUTES.BILLING} labelIcon={<IconCreditCard />}>
+        <Title marginBottom="150" variant="section" color={headerColor}>
+          Billing plans
+        </Title>
         <BillingPage />
       </UserButton.UserProfilePage>
     </UserButton>
diff --git a/apps/web/src/ee/clerk/providers/ClerkProvider.tsx b/apps/web/src/ee/clerk/providers/ClerkProvider.tsx
index 1c21d5960bf..33a7831f74f 100644
--- a/apps/web/src/ee/clerk/providers/ClerkProvider.tsx
+++ b/apps/web/src/ee/clerk/providers/ClerkProvider.tsx
@@ -5,8 +5,24 @@ import { ClerkProp, ClerkProvider as _ClerkProvider } from '@clerk/clerk-react';
 import { useColorScheme } from '@novu/design-system';
 import { dark } from '@clerk/themes';
 import { buildClerk } from './clerk-singleton';
+import { Variables } from '@clerk/types';
 
-const ClerkModalElement = {
+const CLERK_LOCALIZATION = {
+  userProfile: {
+    navbar: {
+      title: 'Settings',
+      description: '',
+      account: 'User profile',
+      security: 'Access security',
+    },
+  },
+
+  userButton: {
+    action__signOut: 'Log Out',
+  },
+};
+
+const CLERK_MODAL_ELEMENT = {
   modalContent: {
     width: '80rem',
     display: 'block',
@@ -17,42 +33,82 @@ const ClerkModalElement = {
   cardBox: {
     width: '100%',
   },
+  scrollBox: {
+    backgroundColor: 'var(--nv-colors-surface-page)',
+  },
+  userButtonPopoverMain: {
+    backgroundColor: 'var(--nv-colors-surface-page)',
+  },
   rootBox: {
     width: 'auto',
   },
+  navbar: {
+    background: 'var(--nv-colors-surface-panel)',
+    '& h1': {
+      fontFamily: 'var(--nv-fonts-system)',
+      fontWeight: 'var(--nv-font-weights-strong)',
+      fontSize: 'var(--nv-font-sizes-150)',
+      letterSpacing: '0',
+      textDecoration: 'none',
+      lineHeight: 'var(--nv-line-heights-200)',
+    },
+  },
+  headerTitle: {
+    fontFamily: 'var(--nv-fonts-system)',
+    fontWeight: 'var(--nv-font-weights-strong)',
+    fontSize: 'var(--nv-font-sizes-125)',
+    letterSpacing: '0',
+    textDecoration: 'none',
+    lineHeight: 'var(--nv-line-heights-175)',
+  },
   navbarButton: {
     fontFamily: 'var(--nv-fonts-system)',
     fontWeight: 'var(--nv-font-weights-strong)',
     fontSize: 'var(--nv-font-sizes-88)',
-    paddingTop: 'var(--nv-spacing-50) !important',
-    paddingBottom: 'var(--nv-spacing-50) !important',
-    color: 'var(--nv-colors-typography-text-secondary) !important',
+    paddingTop: 'var(--nv-spacing-50)',
+    paddingBottom: 'var(--nv-spacing-50)',
+    opacity: '1',
+    color: 'var(--nv-colors-typography-text-secondary)',
+    '&.cl-active': {
+      color: 'var(--nv-colors-typography-text-main)',
+      background: 'var(--nv-colors-surface-page)',
+      '& svg': {
+        color: 'var(--nv-colors-typography-text-main)',
+        fill: 'var(--nv-colors-typography-text-main)',
+        opacity: '1',
+      },
+    },
     '&:hover, &:focus, &:active': {
-      color: 'var(--nv-colors-typography-text-main) !important',
+      color: 'var(--nv-colors-typography-text-main)',
+      background: 'var(--nv-colors-surface-page)',
+      opacity: '1',
+      '& svg': {
+        color: 'var(--nv-colors-typography-text-main)',
+        fill: 'var(--nv-colors-typography-text-main)',
+        opacity: '1',
+      },
     },
   },
   navbarButtonIcon: {
     height: 'var(--nv-sizes-125)',
     width: 'var(--nv-sizes-125)',
+    opacity: '1',
   },
 };
 
-const localization = {
-  userProfile: {
-    navbar: {
-      title: 'Settings',
-      description: '',
-    },
-  },
+const CLERK_OVERRIDE_VARIABLES: Variables = {
+  fontFamily: 'var(--nv-fonts-system)',
+  fontSize: 'var(--nv-font-sizes-88)',
 };
 
 const ALLOWED_REDIRECT_ORIGINS = ['http://localhost:*', location.origin];
 
 export const ClerkProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+  const { colorScheme } = useColorScheme();
+
   const [clerkInstance, setClerkInstance] = useState<ClerkProp>();
 
   const navigate = useNavigate();
-  const { colorScheme } = useColorScheme();
 
   useEffect(() => {
     (async () => {
@@ -78,7 +134,6 @@ export const ClerkProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =>
       publishableKey={CLERK_PUBLISHABLE_KEY}
       appearance={{
         baseTheme: colorScheme === 'dark' ? dark : undefined,
-        elements: ClerkModalElement,
         createOrganization: {
           elements: {
             modalContent: {
@@ -89,8 +144,10 @@ export const ClerkProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =>
             },
           },
         },
+        elements: CLERK_MODAL_ELEMENT,
+        variables: CLERK_OVERRIDE_VARIABLES,
       }}
-      localization={localization}
+      localization={CLERK_LOCALIZATION}
       allowedRedirectOrigins={ALLOWED_REDIRECT_ORIGINS}
     >
       {children}