fix: topnav styles

OriginProtocol · Sep 6, 2023 · 47bb19a · 47bb19a
1 parent 4bf8ae7
commit 47bb19a
Showing 1 changed file with 14 additions and 14 deletions.
diff --git a/apps/oeth/src/components/Topnav.tsx b/apps/oeth/src/components/Topnav.tsx
@@ -25,8 +25,10 @@ export function Topnav(props: BoxProps) {
       component="nav"
       sx={{
         display: 'grid',
-        borderBlockEnd: { xs: 'none', md: '1px solid' },
-        borderColor: 'background.paper',
+        borderBlockEnd: {
+          xs: 'none',
+          md: '1px solid var(--mui-palette-background-paper)',
+        },
         gap: { xs: 1, md: 10 },
         alignItems: 'center',
         backgroundColor: 'divider',
@@ -42,10 +44,6 @@ export function Topnav(props: BoxProps) {
           xs: '1fr 1fr',
           md: 'auto 1fr auto',
         },
-        rowGap: {
-          xs: 1.5,
-          md: 0,
-        },
         ...props?.sx,
       }}
     >
@@ -83,6 +81,10 @@ export function Topnav(props: BoxProps) {
             xs: 'span 2',
             md: 'span 1',
           },
+          marginBlockStart: {
+            xs: 4,
+            md: 0,
+          },
           backgroundColor: 'transparent',
           minHeight: 0,
           overflow: 'visible',
@@ -146,8 +148,9 @@ export function Topnav(props: BoxProps) {
         sx={{
           display: 'flex',
           justifyContent: 'flex-end',
+          alignItems: 'stretch',
           gap: { xs: 1, md: 2 },
-          '& > a': {
+          '& > a, & > *': {
             fontSize: {
               xs: '0.75rem',
               md: '1rem',
@@ -161,11 +164,6 @@ export function Topnav(props: BoxProps) {
           href="https://oeth.on.fleek.co/"
           target="_blank"
           sx={{
-            backgroundColor: 'background.paper',
-            borderRadius: 25,
-            paddingBlock: 1,
-            color: 'primary.contrastText',
-            boxShadow: (theme) => theme.shadows['24'],
             display: 'grid',
             placeContent: 'center',
             paddingInline: {
@@ -198,9 +196,11 @@ export function Topnav(props: BoxProps) {
           display: { xs: 'block', md: 'none' },
           gridColumn: 'span 2',
           gridRowStart: 1,
-          borderColor: 'background.paper',
+          borderColor: (theme) => theme.palette.background.paper,
           position: 'relative',
-          bottom: '-4rem',
+          width: 'calc(100% + 1.5rem)',
+          bottom: '-3.75rem',
+          left: '-0.75rem',
         }}
       />
     </Box>