break point changes and Megamenu design fixes

MetaFam · Jun 30, 2023 · 8d89ea9 · 8d89ea9
1 parent da0c54e
commit 8d89ea9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/packages/design-system/src/theme/index.ts b/packages/design-system/src/theme/index.ts
@@ -169,7 +169,7 @@ export const theme = extendTheme(
       base: '0em',
       sm: '30em',
       md: '48em',
-      lg: '62em',
+      lg: '71.5em',
       xl: '80em',
       '2xl': '96em',
       '3xl': '120em',

diff --git a/packages/web/components/MegaMenu/DesktopNavLinks.tsx b/packages/web/components/MegaMenu/DesktopNavLinks.tsx
@@ -35,10 +35,10 @@ export const DesktopNavLinks: React.FC<FlexProps> = (props) => (
                   variant="link"
                   minW="fit-content"
                   color="white"
-                  fontSize="lg"
+                  fontSize={{ lg: 'm', xl: 'lg' }}
                   fontWeight={700}
                   textTransform="uppercase"
-                  mx={6}
+                  mx={{ lg: 3, xl: 6 }}
                   _expanded={{ color: 'cyan.300' }}
                   _focus={{ outline: 'none', border: 'none' }}
                   rightIcon={
@@ -112,7 +112,6 @@ export const DesktopNavLinks: React.FC<FlexProps> = (props) => (
                   target={section.type === 'external-link' ? '_blank' : ''}
                   w="full"
                   h="full"
-                  p={4}
                   alignItems="center"
                   _focus={{ outline: 'none' }}
                 >
@@ -123,10 +122,10 @@ export const DesktopNavLinks: React.FC<FlexProps> = (props) => (
                     color={
                       section.type === 'external-link' ? '#79F8FB' : 'white'
                     }
-                    fontSize="lg"
+                    fontSize={{ lg: 'm', xl: 'lg' }}
                     fontWeight={700}
                     textTransform="uppercase"
-                    mx={6}
+                    mx={{ lg: 3, xl: 6 }}
                     _expanded={{ color: 'cyan.300' }}
                     _focus={{ outline: 'none', border: 'none' }}
                     rightIcon={

diff --git a/packages/web/components/MegaMenu/MegaMenuHeader.tsx b/packages/web/components/MegaMenu/MegaMenuHeader.tsx
@@ -107,6 +107,7 @@ export const MegaMenuHeader: React.FC = () => {
           justify="center"
           align="center"
           pos="relative"
+          display={{ base: 'none', sm: 'none', md: 'none', lg: 'flex' }}
         >
           <Logo
             link={user ? '/dashboard' : '/'}