Fix styles on import/export widget in the safe list (#3263)

* redesign data widget * adjust margins * add separator and fix padding * move data widget to MyAccounts and remove SafeListDrawer * remove unecessary padding * remove unused styles * do not wait for safes list on welcome page in cypress tests
safe-global · Feb 15, 2024 · c30a6c9 · c30a6c9
1 parent 0c7cf21
commit c30a6c9
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 136 deletions.
diff --git a/cypress/e2e/pages/main.page.js b/cypress/e2e/pages/main.page.js
@@ -17,11 +17,6 @@ export function waitForHistoryCallToComplete() {
   cy.wait('@History')
 }
 
-export function waitForSafeListRequestToComplete() {
-  cy.intercept('GET', constants.safeListEndpoint).as('Safes')
-  cy.wait('@Safes')
-}
-
 export function acceptCookies(index = 0) {
   cy.wait(1000)
 

diff --git a/cypress/e2e/regression/create_safe_simple.cy.js b/cypress/e2e/regression/create_safe_simple.cy.js
@@ -6,7 +6,6 @@ import * as owner from '../pages/owners.pages'
 describe('Safe creation tests', () => {
   beforeEach(() => {
     cy.visit(constants.welcomeUrl + '?chain=sep')
-    main.waitForSafeListRequestToComplete()
     cy.clearLocalStorage()
     main.acceptCookies()
   })

diff --git a/cypress/e2e/smoke/create_safe_simple.cy.js b/cypress/e2e/smoke/create_safe_simple.cy.js
@@ -6,7 +6,6 @@ import * as owner from '../pages/owners.pages'
 describe('[SMOKE] Safe creation tests', () => {
   beforeEach(() => {
     cy.visit(constants.welcomeUrl + '?chain=sep')
-    main.waitForSafeListRequestToComplete()
     cy.clearLocalStorage()
     main.acceptCookies()
   })

diff --git a/...nts/welcome/SafeListDrawer/DataWidget.tsx → ...ponents/welcome/MyAccounts/DataWidget.tsx b/...nts/welcome/SafeListDrawer/DataWidget.tsx → ...ponents/welcome/MyAccounts/DataWidget.tsx
@@ -1,17 +1,17 @@
-import { Button, Grid, SvgIcon, Card, CardHeader, CardContent, Box } from '@mui/material'
+import { Button, Grid, SvgIcon, Card, CardHeader, CardContent, Tooltip } from '@mui/material'
 import { useState } from 'react'
 import type { ReactElement } from 'react'
 
 import { useAppSelector } from '@/store'
 import { selectAllAddedSafes } from '@/store/addedSafesSlice'
 import { selectAllAddressBooks } from '@/store/addressBookSlice'
-import FileIcon from '@/public/images/settings/data/file.svg'
 import ExportIcon from '@/public/images/common/export.svg'
 import ImportIcon from '@/public/images/common/import.svg'
 import { exportAppData } from '@/components/settings/DataManagement'
 import { ImportDialog } from '@/components/settings/DataManagement/ImportDialog'
 import { OVERVIEW_EVENTS } from '@/services/analytics'
 import Track from '@/components/common/Track'
+import InfoIcon from '@/public/images/notifications/info.svg'
 
 import css from './styles.module.css'
 
@@ -34,22 +34,24 @@ export const DataWidget = (): ReactElement => {
   return (
     <Card className={css.card}>
       <CardHeader
-        avatar={
-          <Box
-            className={css.fileIcon}
-            sx={{
-              borderRadius: ({ shape }) => `${shape.borderRadius}px`,
-            }}
-          >
-            <SvgIcon component={FileIcon} inheritViewBox fontSize="small" sx={{ fill: 'none' }} />
-          </Box>
-        }
         className={css.cardHeader}
-        title={<b>{hasData ? 'Work with your data' : 'Already have a Safe Account?'}</b>}
-        subheader={hasData ? 'Export or import your data' : 'Import your data'}
+        title={
+          <>
+            <b>{hasData ? 'Export or import your Safe data' : 'Import your Safe data'}</b>
+            <Tooltip
+              title="Download or upload your local data with your added Safe Accounts, address book and settings."
+              placement="top"
+              arrow
+            >
+              <span>
+                <InfoIcon className={css.infoIcon} />
+              </span>
+            </Tooltip>
+          </>
+        }
       />
       <CardContent>
-        <Grid container spacing={2}>
+        <Grid container spacing={2} sx={{ maxWidth: 240, margin: 'auto', paddingRight: 2 }}>
           {hasData && (
             <Grid item xs={6}>
               <Track {...OVERVIEW_EVENTS.EXPORT_DATA}>
@@ -58,7 +60,7 @@ export const DataWidget = (): ReactElement => {
                   size="small"
                   onClick={exportAppData}
                   startIcon={<SvgIcon component={ExportIcon} inheritViewBox fontSize="small" />}
-                  sx={{ width: '100%' }}
+                  sx={{ width: '100%', py: 0.5 }}
                 >
                   Export
                 </Button>
@@ -72,7 +74,7 @@ export const DataWidget = (): ReactElement => {
                 size="small"
                 onClick={onImport}
                 startIcon={<SvgIcon component={ImportIcon} inheritViewBox fontSize="small" />}
-                sx={{ width: '100%' }}
+                sx={{ width: '100%', py: 0.5 }}
               >
                 Import
               </Button>

diff --git a/src/components/welcome/MyAccounts/index.tsx b/src/components/welcome/MyAccounts/index.tsx
@@ -6,7 +6,7 @@ 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 { DataWidget } from '@/components/welcome/MyAccounts/DataWidget'
 import css from './styles.module.css'
 
 type AccountsListProps = {

diff --git a/src/components/welcome/MyAccounts/styles.module.css b/src/components/welcome/MyAccounts/styles.module.css
@@ -52,6 +52,31 @@
   padding-left: var(--space-2);
 }
 
+.card {
+  margin: auto;
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+}
+
+.card :global .MuiCardHeader-root,
+.card :global .MuiCardContent-root {
+  padding: 0;
+}
+
+.cardHeader {
+  text-align: center;
+}
+
+.infoIcon {
+  vertical-align: middle;
+  width: 1rem;
+  height: 1rem;
+  margin: 4px;
+  color: var(--color-text-secondary);
+}
+
 @media (max-width: 899.95px) {
   .container {
     width: auto;
@@ -69,7 +94,12 @@
 
   .header {
     padding: var(--space-3);
+  }
+
+  .safeList {
+    border-top: 1px solid var(--color-border-light);
     border-bottom: 1px solid var(--color-border-light);
+    border-radius: 0;
   }
 
   .title {

diff --git a/src/components/welcome/NewSafe.tsx b/src/components/welcome/NewSafe.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
-import { Box, Grid, SvgIcon, Typography } from '@mui/material'
+import { Grid, SvgIcon, Typography } from '@mui/material'
 import css from './styles.module.css'
 import CheckFilled from '@/public/images/common/check-filled.svg'
 
 import WelcomeLogin from './WelcomeLogin'
-import SafeListDrawer from '@/components/welcome/SafeListDrawer'
 
 const BulletListItem = ({ text }: { text: string }) => (
   <li>
@@ -24,10 +23,6 @@ const NewSafe = () => {
         </Grid>
         <Grid item xs={12} lg={6} flex={1}>
           <div className={css.content}>
-            <Box minWidth={{ md: 480 }} className={css.sidebar}>
-              <SafeListDrawer />
-            </Box>
-
             <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
               Unlock a new way of ownership
             </Typography>

diff --git a/src/components/welcome/NewSafeSocial.tsx b/src/components/welcome/NewSafeSocial.tsx
@@ -7,7 +7,6 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
 import WelcomeLogin from './WelcomeLogin'
 import GnosisChainLogo from '@/public/images/common/gnosis-chain-logo.png'
 import Image from 'next/image'
-import SafeListDrawer from '@/components/welcome/SafeListDrawer'
 
 const BulletListItem = ({ text }: { text: string }) => (
   <li>
@@ -36,10 +35,6 @@ const NewSafeSocial = () => {
         </Grid>
         <Grid item xs={12} lg={6} flex={1}>
           <div className={css.content}>
-            <Box minWidth={{ md: 480 }} className={css.sidebar}>
-              <SafeListDrawer />
-            </Box>
-
             <Box pt={5} alignSelf="center" margin="auto">
               <Typography
                 variant="h1"

diff --git a/src/components/welcome/SafeListDrawer/index.tsx b/src/components/welcome/SafeListDrawer/index.tsx
diff --git a/src/components/welcome/SafeListDrawer/styles.module.css b/src/components/welcome/SafeListDrawer/styles.module.css
diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
@@ -1,11 +1,3 @@
-.sidebar {
-  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 8px);
-  overflow-y: auto;
-  align-self: flex-start;
-  margin-bottom: auto;
-  width: 100%;
-}
-
 .bulletList {
   list-style: none;
   margin-bottom: auto;
@@ -104,10 +96,6 @@
 }
 
 @media (max-width: 899.95px) {
-  .sidebar :global .MuiPaper-root {
-    height: 100%;
-  }
-
   .content {
     padding: var(--space-6);
   }