From c30a6c9b74fac256fec11cdc980ce68c1f3ebbbb Mon Sep 17 00:00:00 2001
From: James Mealy <james@safe.global>
Date: Thu, 15 Feb 2024 13:56:19 +0100
Subject: [PATCH] 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
---
 cypress/e2e/pages/main.page.js                |  5 --
 .../e2e/regression/create_safe_simple.cy.js   |  1 -
 cypress/e2e/smoke/create_safe_simple.cy.js    |  1 -
 .../DataWidget.tsx                            | 36 ++++++------
 src/components/welcome/MyAccounts/index.tsx   |  2 +-
 .../welcome/MyAccounts/styles.module.css      | 30 ++++++++++
 src/components/welcome/NewSafe.tsx            |  7 +--
 src/components/welcome/NewSafeSocial.tsx      |  5 --
 .../welcome/SafeListDrawer/index.tsx          | 55 -------------------
 .../welcome/SafeListDrawer/styles.module.css  | 33 -----------
 src/components/welcome/styles.module.css      | 12 ----
 11 files changed, 51 insertions(+), 136 deletions(-)
 rename src/components/welcome/{SafeListDrawer => MyAccounts}/DataWidget.tsx (75%)
 delete mode 100644 src/components/welcome/SafeListDrawer/index.tsx
 delete mode 100644 src/components/welcome/SafeListDrawer/styles.module.css

diff --git a/cypress/e2e/pages/main.page.js b/cypress/e2e/pages/main.page.js
index 36096346de..0727296b33 100644
--- 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
index 327179d93e..aeda845741 100644
--- 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
index 54e1491739..3b1e323833 100644
--- 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/src/components/welcome/SafeListDrawer/DataWidget.tsx b/src/components/welcome/MyAccounts/DataWidget.tsx
similarity index 75%
rename from src/components/welcome/SafeListDrawer/DataWidget.tsx
rename to src/components/welcome/MyAccounts/DataWidget.tsx
index ff8f899a72..305b82f97d 100644
--- a/src/components/welcome/SafeListDrawer/DataWidget.tsx
+++ b/src/components/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
index 7a8dd4567d..5b38d9463c 100644
--- 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
index 3d74304926..7bbb4e8d3e 100644
--- 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
index 46d51deb55..6d1f069a2b 100644
--- 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
index 590e9625f7..b74e4501a7 100644
--- 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
deleted file mode 100644
index afa8f5418d..0000000000
--- a/src/components/welcome/SafeListDrawer/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useState } from 'react'
-import SafeList from '@/components/sidebar/SafeList'
-import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
-import { Button, Drawer, Typography } from '@mui/material'
-import ChevronRightIcon from '@mui/icons-material/ChevronRight'
-import { useAppSelector } from '@/store'
-import { selectTotalAdded } from '@/store/addedSafesSlice'
-import useOwnedSafes from '@/hooks/useOwnedSafes'
-import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
-import css from './styles.module.css'
-
-const SafeListDrawer = () => {
-  const numberOfAddedSafes = useAppSelector(selectTotalAdded)
-  const ownedSafes = useOwnedSafes()
-  const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0)
-  const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes
-  const [showSidebar, setShowSidebar] = useState(false)
-
-  const closeSidebar = () => setShowSidebar(false)
-
-  if (totalNumberOfSafes <= 0) {
-    return null
-  }
-
-  return (
-    <>
-      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
-        <div className={drawerCSS.drawer}>
-          <SafeList closeDrawer={closeSidebar} />
-
-          <div className={drawerCSS.dataWidget}>
-            <DataWidget />
-          </div>
-        </div>
-      </Drawer>
-      <Button
-        className={css.button}
-        fullWidth
-        variant="contained"
-        color="background"
-        startIcon={<ChevronRightIcon />}
-        onClick={() => setShowSidebar(true)}
-      >
-        <Typography className={css.buttonText} fontWeight="bold">
-          My Safe Accounts{' '}
-          <Typography color="text.secondary" fontWeight="bold">
-            ({totalNumberOfSafes})
-          </Typography>
-        </Typography>
-      </Button>
-    </>
-  )
-}
-
-export default SafeListDrawer
diff --git a/src/components/welcome/SafeListDrawer/styles.module.css b/src/components/welcome/SafeListDrawer/styles.module.css
deleted file mode 100644
index 5aed51e96f..0000000000
--- a/src/components/welcome/SafeListDrawer/styles.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.button {
-  padding: var(--space-2);
-}
-
-.buttonText {
-  align-self: center;
-  margin: auto;
-  display: flex;
-  gap: var(--space-1);
-}
-
-.fileIcon {
-  display: flex;
-  align-items: center;
-  padding: var(--space-1);
-  background-color: var(--color-background-main);
-}
-
-.card {
-  padding: var(--space-3);
-  gap: var(--space-2);
-  display: flex;
-  flex-direction: column;
-}
-
-.card :global .MuiCardHeader-root,
-.card :global .MuiCardContent-root {
-  padding: 0;
-}
-
-.cardHeader {
-  text-align: left;
-}
diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
index fe9fa566d5..b4fc099dd9 100644
--- 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);
   }