Mobile CSS + add import/export

safe-global · Feb 9, 2024 · e4ca81b · e4ca81b
1 parent 33acfcb
commit e4ca81b
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 14 deletions.
diff --git a/src/components/common/ChainIndicator/index.tsx b/src/components/common/ChainIndicator/index.tsx
@@ -15,6 +15,7 @@ type ChainIndicatorProps = {
   className?: string
   showUnknown?: boolean
   showLogo?: boolean
+  responsive?: boolean
 }
 
 const fallbackChainConfig = {
@@ -32,6 +33,7 @@ const ChainIndicator = ({
   inline = false,
   showUnknown = true,
   showLogo = true,
+  responsive = false,
 }: ChainIndicatorProps): ReactElement | null => {
   const currentChainId = useChainId()
   const id = chainId || currentChainId
@@ -56,7 +58,12 @@ const ChainIndicator = ({
     <span
       data-testid="chain-logo"
       style={showLogo ? undefined : style}
-      className={classnames(inline ? css.inlineIndicator : css.indicator, showLogo ? css.withLogo : '', className)}
+      className={classnames(className || '', {
+        [css.inlineIndicator]: inline,
+        [css.indicator]: !inline,
+        [css.withLogo]: showLogo,
+        [css.responsive]: responsive,
+      })}
     >
       {showLogo && (
         <img
@@ -68,7 +75,7 @@ const ChainIndicator = ({
         />
       )}
 
-      {chainConfig.chainName}
+      <span className={css.name}>{chainConfig.chainName}</span>
     </span>
   ) : null
 }

diff --git a/src/components/common/ChainIndicator/styles.module.css b/src/components/common/ChainIndicator/styles.module.css
@@ -23,3 +23,9 @@
   padding: 0;
   font-size: 14px;
 }
+
+@media (max-width: 899.95px) {
+  .responsive .name {
+    display: none;
+  }
+}
diff --git a/src/components/welcome/MyAccounts/AccountItem.tsx b/src/components/welcome/MyAccounts/AccountItem.tsx
@@ -40,7 +40,7 @@ const AccountItem = ({ chainId, address, ...rest }: AccountItemProps) => {
         <Link href={href} className={css.safeLink}>
           <SafeIcon address={address} {...rest} />
 
-          <Typography variant="body2" component="div">
+          <Typography variant="body2" component="div" className={css.safeAddress}>
             {name && (
               <Typography fontWeight="bold" fontSize="inherit">
                 {name}
@@ -54,9 +54,10 @@ const AccountItem = ({ chainId, address, ...rest }: AccountItemProps) => {
 
           <Box flex={1} />
 
-          <ChainIndicator chainId={chainId} />
+          <ChainIndicator chainId={chainId} responsive />
         </Link>
       </Track>
+
       <SafeListContextMenu name={name} address={address} chainId={chainId} />
     </ListItemButton>
   )

diff --git a/src/components/welcome/MyAccounts/CreateButton.tsx b/src/components/welcome/MyAccounts/CreateButton.tsx
@@ -7,8 +7,12 @@ const CreateButton = () => {
   const currentChain = useCurrentChain()
 
   return (
-    <Link href={{ pathname: AppRoutes.newSafe.create, query: { chain: currentChain?.shortName } }}>
-      <Button disableElevation size="small" variant="contained">
+    <Link
+      href={{ pathname: AppRoutes.newSafe.create, query: { chain: currentChain?.shortName } }}
+      passHref
+      legacyBehavior
+    >
+      <Button disableElevation size="small" variant="contained" sx={{ width: ['100%', 'auto'] }} component="a">
         Create account
       </Button>
     </Link>

diff --git a/src/components/welcome/MyAccounts/index.tsx b/src/components/welcome/MyAccounts/index.tsx
@@ -6,6 +6,8 @@ import CreateButton from './CreateButton'
 import useAllSafes, { type SafeItems } from './useAllSafes'
 import Track from '@/components/common/Track'
 import { OVERVIEW_EVENTS } from '@/services/analytics'
+import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
+import css from './styles.module.css'
 
 type AccountsListProps = {
   safes: SafeItems
@@ -31,8 +33,8 @@ const AccountsList = ({ safes }: AccountsListProps) => {
 
   return (
     <Box display="flex" justifyContent="center">
-      <Box width={600} m={2}>
-        <Box display="flex" justifyContent="space-between" py={3}>
+      <Box className={css.container} m={2}>
+        <Box display="flex" flexWrap="wrap" justifyContent="space-between" py={3} gap={2}>
           <Typography variant="h1" fontWeight={700}>
             My Safe accounts
             <Typography component="span" color="text.secondary" fontSize="inherit" fontWeight="normal">
@@ -44,7 +46,7 @@ const AccountsList = ({ safes }: AccountsListProps) => {
           <CreateButton />
         </Box>
 
-        <Paper sx={{ p: 3 }}>
+        <Paper sx={{ p: 3, mb: 3 }}>
           {shownSafes.length ? (
             shownSafes.map((item) => <AccountItem {...item} key={item.chainId + item.address} />)
           ) : (
@@ -61,6 +63,8 @@ const AccountsList = ({ safes }: AccountsListProps) => {
             </Box>
           )}
         </Paper>
+
+        <DataWidget />
       </Box>
     </Box>
   )

diff --git a/src/components/welcome/MyAccounts/styles.module.css b/src/components/welcome/MyAccounts/styles.module.css
@@ -1,19 +1,37 @@
+.container {
+  width: 600px;
+}
+
 .listItem {
-  gap: var(--space-2);
   border: 1px solid var(--color-border-light);
   border-radius: var(--space-1);
   margin-bottom: 12px;
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
 }
 
-.listItem> :first-child {
-  display: block;
+.listItem > :first-child {
   flex: 1;
 }
 
 .safeLink {
   display: flex;
-  gap: var(--space-2);
   align-items: center;
-}
+  padding-right: var(--space-2);
+}
+
+.safeAddress {
+  flex: 1;
+  white-space: nowrap;
+  padding-left: var(--space-2);
+}
+
+@media (max-width: 899.95px) {
+  .container {
+    width: auto;
+  }
+
+  .safeLink {
+    padding-right: 0;
+  }
+}