From 423fbacace7b9ab7fe780e82e03e1fab53e20476 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Fri, 21 Jul 2023 18:39:43 +0200
Subject: [PATCH] Feat: import/export in the Safe List sidebar

---
 src/components/settings/DataManagement/ImportFileUpload.tsx | 4 ++--
 src/components/sidebar/Sidebar/index.tsx                    | 3 +++
 src/components/welcome/DataWidget.tsx                       | 1 +
 src/components/welcome/styles.module.css                    | 4 ++++
 4 files changed, 10 insertions(+), 2 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/Sidebar/index.tsx b/src/components/sidebar/Sidebar/index.tsx
index e6d5bfb2ef..8640530775 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,8 @@ const Sidebar = (): ReactElement => {
       <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>
         <div className={css.drawer}>
           <SafeList closeDrawer={closeDrawer} />
+
+          <DataWidget />
         </div>
       </Drawer>
     </div>
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%;