fix: optimize widget for mobile, adjust badges and chips style

safe-global · May 31, 2024 · 939f47b · 939f47b
1 parent 9e3b7cb
commit 939f47b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 13 deletions.
diff --git a/src/components/common/Chip/index.tsx b/src/components/common/Chip/index.tsx
@@ -4,5 +4,5 @@ import type { ReactElement } from 'react'
 import React from 'react'
 
 export function Chip(props: ChipProps): ReactElement {
-  return <MuiChip label="New" color="success" {...props} />
+  return <MuiChip label="New" color="success" size="small" sx={{ fontSize: '11px', fontWeight: 'bold' }} {...props} />
 }
diff --git a/src/components/sidebar/SidebarList/index.tsx b/src/components/sidebar/SidebarList/index.tsx
@@ -64,10 +64,32 @@ export const SidebarListItemText = ({
   bold = false,
   ...rest
 }: ListItemTextProps & { bold?: boolean }): ReactElement => (
-  <ListItemText primaryTypographyProps={{ variant: 'body2', fontWeight: bold ? 700 : undefined }} {...rest}>
+  <ListItemText
+    primaryTypographyProps={{
+      variant: 'body2',
+      fontWeight: bold ? 700 : undefined,
+      display: 'flex',
+      justifyContent: 'space-between',
+    }}
+    {...rest}
+  >
     {children}
   </ListItemText>
 )
 
 export const SidebarListItemCounter = ({ count }: { count?: string }): ReactElement | null =>
-  count ? <Badge color="warning" variant="standard" badgeContent={count} sx={{ ml: 3 }} /> : null
+  count ? (
+    <Badge
+      sx={{
+        '& .MuiBadge-badge': {
+          color: 'static.main',
+          backgroundColor: 'warning.light',
+          transform: 'none',
+          fontWeight: 'bold',
+        },
+        ml: 3,
+      }}
+      variant="standard"
+      badgeContent={count}
+    />
+  ) : null
diff --git a/src/components/sidebar/SidebarNavigation/config.tsx b/src/components/sidebar/SidebarNavigation/config.tsx
@@ -33,7 +33,7 @@ export const navItems: NavItem[] = [
     label: 'Swap',
     icon: <SvgIcon component={SwapIcon} inheritViewBox />,
     href: AppRoutes.swap,
-    tag: <Chip sx={{ ml: 1 }} />,
+    tag: <Chip />,
   },
   {
     label: 'Transactions',

diff --git a/src/features/swap/components/SwapWidget/index.tsx b/src/features/swap/components/SwapWidget/index.tsx
@@ -44,7 +44,7 @@ function SwapWidget(): ReactElement | null {
                   <Typography variant="h4" className={css.title}>
                     Introducing native swaps
                   </Typography>
-                  <Chip sx={{ ml: 1 }} />
+                  <Chip />
                 </Box>
 
                 <Box>
@@ -59,13 +59,13 @@ function SwapWidget(): ReactElement | null {
                         passHref
                         legacyBehavior
                       >
-                        <Button variant="contained" sx={buttonSx}>
+                        <Button variant="contained" size="small">
                           Try it now
                         </Button>
                       </Link>
                     </Track>
-                    <Button variant="text" sx={buttonSx} onClick={onClick}>
-                      Don{`'`}t show again
+                    <Button variant="text" size="small" onClick={onClick}>
+                      Don&apos;t show again
                     </Button>
                   </Box>
                 </Box>

diff --git a/src/features/swap/components/SwapWidget/styles.module.css b/src/features/swap/components/SwapWidget/styles.module.css
@@ -4,13 +4,12 @@
 }
 
 .card {
-
   height: inherit;
+  border: none;
 }
 
 .grid {
   display: flex;
-  align-items: center;
   height: inherit;
   gap: var(--space-3);
 }
@@ -25,17 +24,34 @@
 .title {
   font-weight: 700;
   display: inline;
+  margin-right: var(--space-1);
 }
 
 .imageContainer {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: flex-end;
 }
 
 .buttonContainer {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  gap: var(--space-3);
+  gap: var(--space-2);
+}
+
+@media (max-width: 599.95px) {
+  .imageContainer {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .buttonContainer {
+    gap: 0;
+    justify-content: space-between;
+  }
+
+  .wrapper {
+    padding: var(--space-3);
+  }
 }