From ba62ea13f9ece33e038c43d6cf2b503115242938 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Mon, 14 Aug 2023 15:05:57 +0200
Subject: [PATCH] Feat: import/export in the Safe List sidebar (#2299)

* Feat: import/export in the Safe List sidebar

* Adjust style
---
 .../settings/DataManagement/ImportFileUpload.tsx   |  4 ++--
 src/components/sidebar/SafeList/index.tsx          |  2 +-
 src/components/sidebar/SafeList/styles.module.css  |  4 ----
 src/components/sidebar/Sidebar/index.tsx           |  5 +++++
 src/components/sidebar/Sidebar/styles.module.css   | 14 ++++++++------
 src/components/welcome/DataWidget.tsx              |  1 +
 src/components/welcome/styles.module.css           |  4 ++++
 7 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/settings/DataManagement/ImportFileUpload.tsx b/src/components/settings/DataManagement/ImportFileUpload.tsx
index c8840b4279..4167e9fef6 100644
--- 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
index 9e7a7acda0..0ed959ceca 100644
--- 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
index 275ee9c000..7c5a03a937 100644
--- 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
index e6d5bfb2ef..f25d8798d3 100644
--- 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
index 08b9dff4c3..0a12061ffc 100644
--- 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
index 4bb3159a01..ff8f899a72 100644
--- 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
index 109c8246e2..6b2c573afb 100644
--- 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%;