layout/nav: Fix styling inconsistencies on mobile (#1726)

podkrepi-bg · Mar 1, 2024 · 6d6e7f2 · 6d6e7f2
1 parent bb8fab3
commit 6d6e7f2
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/src/components/client/layout/nav/AuthLinks/AuthLinks.styled.tsx b/src/components/client/layout/nav/AuthLinks/AuthLinks.styled.tsx
@@ -17,12 +17,14 @@ export const AuthLink = styled(LinkButton)(() => ({
   display: 'contents',
   textAlign: 'start',
   padding: 0,
+  fontSize: theme.typography.pxToRem(16),
 }))
 
 export const SlashSymbol = styled('span')(() => ({
   display: 'flex',
   alignItems: 'center',
   padding: theme.spacing(0, 1.5),
+  fontSize: theme.typography.pxToRem(16),
 }))
 
 export const StyledAuthButton = styled(LinkButton)(() => ({
@@ -33,4 +35,5 @@ export const StyledAuthButton = styled(LinkButton)(() => ({
   borderTop: '2px solid lightgrey',
   borderRadius: 0,
   color: theme.palette.common.black,
+  fontSize: theme.typography.pxToRem(16),
 }))
diff --git a/src/components/client/layout/nav/DonationMenuMobile.tsx b/src/components/client/layout/nav/DonationMenuMobile.tsx
@@ -27,11 +27,12 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     fontWeight: 500,
     minHeight: theme.spacing(8),
     padding: theme.spacing(0, 1),
+    fontSize: theme.typography.pxToRem(16),
   },
 
   [`& .${classes.menuItem}`]: {
     justifyContent: 'start',
-    fontWeight: 300,
+    fontWeight: 400,
     color: theme.palette.common.black,
   },
 

diff --git a/src/components/client/layout/nav/MobileNav/MobileNav.styled.tsx b/src/components/client/layout/nav/MobileNav/MobileNav.styled.tsx
@@ -36,6 +36,7 @@ export const DonateButtonWrapper = styled(Grid)(() => ({
 export const DonateButton = styled(LinkButton)(() => ({
   padding: theme.spacing(1, 6),
   marginTop: theme.spacing(3),
+  fontSize: theme.typography.pxToRem(16),
 }))
 
 export const LocaleButtonWrapper = styled(Box)(() => ({
@@ -48,6 +49,6 @@ export const LocaleButtonWrapper = styled(Box)(() => ({
     justifyContent: 'start',
     marginLeft: theme.spacing(1),
     padding: 0,
-    fontSize: theme.typography.pxToRem(14),
+    fontSize: theme.typography.pxToRem(16),
   },
 }))
diff --git a/src/components/client/layout/nav/ProjectMenuMobile.tsx b/src/components/client/layout/nav/ProjectMenuMobile.tsx
@@ -27,11 +27,12 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     fontWeight: 500,
     minHeight: theme.spacing(8),
     padding: theme.spacing(0, 1),
+    fontSize: theme.typography.pxToRem(16),
   },
 
   [`& .${classes.menuItem}`]: {
     justifyContent: 'start',
-    fontWeight: 300,
+    fontWeight: 400,
     color: theme.palette.common.black,
   },