Feat: import/export in the Safe List sidebar (#2299)

* Feat: import/export in the Safe List sidebar * Adjust style
safe-global · Aug 14, 2023 · ba62ea1 · ba62ea1
1 parent 669e293
commit ba62ea1
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 13 deletions.
diff --git a/src/components/settings/DataManagement/ImportFileUpload.tsx b/src/components/settings/DataManagement/ImportFileUpload.tsx
@@ -52,7 +52,7 @@ export const ImportFileUpload = ({
 
   return (
     <>
-      <Typography>Import {'Safe{Wallet}'} data by clicking or dragging a file below.</Typography>
+      <Typography>Import {'Safe{Wallet}'} data by uploading a file in the area below.</Typography>
 
       <FileUpload
         fileType={FileTypes.JSON}
@@ -74,7 +74,7 @@ export const ImportFileUpload = ({
             mr: 0.5,
           }}
         />
-        Only JSON files exported from a {'Safe{Wallet}'} can be imported.
+        Only JSON files exported from the {'Safe{Wallet}'} can be imported.
       </Typography>
     </>
   )

diff --git a/src/components/sidebar/SafeList/index.tsx b/src/components/sidebar/SafeList/index.tsx
@@ -100,7 +100,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
   )
 
   return (
-    <div className={css.container}>
+    <div>
       <div className={css.header}>
         <Typography variant="h4" display="inline" fontWeight={700}>
           My Safe Accounts

diff --git a/src/components/sidebar/SafeList/styles.module.css b/src/components/sidebar/SafeList/styles.module.css
@@ -1,7 +1,3 @@
-.container {
-  overflow-y: auto;
-}
-
 .header {
   display: flex;
   justify-content: space-between;

diff --git a/src/components/sidebar/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
@@ -10,6 +10,7 @@ import SidebarFooter from '@/components/sidebar/SidebarFooter'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
+import { DataWidget } from '@/components/welcome/DataWidget'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
@@ -53,6 +54,10 @@ const Sidebar = (): ReactElement => {
       <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>
         <div className={css.drawer}>
           <SafeList closeDrawer={closeDrawer} />
+
+          <div className={css.dataWidget}>
+            <DataWidget />
+          </div>
         </div>
       </Drawer>
     </div>

diff --git a/src/components/sidebar/Sidebar/styles.module.css b/src/components/sidebar/Sidebar/styles.module.css
@@ -1,5 +1,4 @@
-.container,
-.drawer {
+.container {
   height: 100vh;
   padding-top: var(--header-height);
   display: flex;
@@ -25,12 +24,15 @@
 .drawer {
   width: 480px;
   max-width: 90vw;
+  padding-top: var(--header-height);
+  border-right: 1px solid var(--color-border-light);
+  overflow-y: auto;
+  height: 100%;
 }
 
-.drawer {
-  text-align: center;
-  padding: var(--header-height) 0 0 0;
-  border-right: 1px solid var(--color-border-light);
+.dataWidget {
+  margin-top: var(--space-4);
+  border-top: 1px solid var(--color-border-light);
 }
 
 .noSafeHeader {

diff --git a/src/components/welcome/DataWidget.tsx b/src/components/welcome/DataWidget.tsx
@@ -44,6 +44,7 @@ export const DataWidget = (): ReactElement => {
             <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'}
       />

diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
@@ -63,6 +63,10 @@
   padding: 0;
 }
 
+.cardHeader {
+  text-align: left;
+}
+
 @media (max-width: 899.95px) {
   .sidebar :global .MuiPaper-root {
     height: 100%;