From d55bc1b9115100d6a36984565daeceb8f137181a Mon Sep 17 00:00:00 2001
From: schmanu <manu@safe.global>
Date: Fri, 6 Oct 2023 16:10:35 +0200
Subject: [PATCH] fix: review issues

---
 src/components/welcome/NewSafe.tsx            | 40 +++++++++----------
 .../welcome/WelcomeLogin/styles.module.css    |  1 +
 src/components/welcome/styles.module.css      | 15 ++++++-
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/components/welcome/NewSafe.tsx b/src/components/welcome/NewSafe.tsx
index 0268d23a9f..2ef93fc43c 100644
--- a/src/components/welcome/NewSafe.tsx
+++ b/src/components/welcome/NewSafe.tsx
@@ -12,16 +12,27 @@ import { selectTotalAdded } from '@/store/addedSafesSlice'
 
 import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
 
+const BulletListItem = ({ text }: { text: string }) => (
+  <li>
+    <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
+    <Typography color="static.main" fontWeight={700}>
+      {text}
+    </Typography>
+  </li>
+)
+
 const NewSafe = () => {
   const addedSafes = useAppSelector(selectTotalAdded)
 
   const [showSidebar, setShowSidebar] = useState(false)
 
+  const closeSidebar = () => setShowSidebar(false)
+
   return (
     <>
-      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={() => setShowSidebar(false)}>
+      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
         <div className={drawerCSS.drawer}>
-          <SafeList closeDrawer={() => setShowSidebar(false)} />
+          <SafeList closeDrawer={closeSidebar} />
 
           <div className={drawerCSS.dataWidget}>
             <DataWidget />
@@ -62,26 +73,11 @@ const NewSafe = () => {
               The most trusted decentralized custody protocol and collective asset management platform.
             </Typography>
 
-            <Grid container spacing={2} mb="auto">
-              <Grid item xs={12} display="flex" flexDirection="row" gap={1} alignItems="center">
-                <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
-                <Typography color="static.main" fontWeight={700}>
-                  Stealth security with multiple owners
-                </Typography>
-              </Grid>
-              <Grid item xs={12} display="flex" flexDirection="row" gap={1} alignItems="center">
-                <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
-                <Typography color="static.main" fontWeight={700}>
-                  Make it yours with modules and guards
-                </Typography>
-              </Grid>
-              <Grid item xs={12} display="flex" flexDirection="row" gap={1} alignItems="center">
-                <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
-                <Typography color="static.main" fontWeight={700}>
-                  Access 130+ ecosystem apps
-                </Typography>
-              </Grid>
-            </Grid>
+            <ul className={css.bulletList}>
+              <BulletListItem text="Stealth security with multiple owners" />
+              <BulletListItem text="Make it yours with modules and guards" />
+              <BulletListItem text="Access 130+ ecosystem apps" />
+            </ul>
           </div>
         </Grid>
       </Grid>
diff --git a/src/components/welcome/WelcomeLogin/styles.module.css b/src/components/welcome/WelcomeLogin/styles.module.css
index e9c586e392..ba47057527 100644
--- a/src/components/welcome/WelcomeLogin/styles.module.css
+++ b/src/components/welcome/WelcomeLogin/styles.module.css
@@ -5,6 +5,7 @@
   border-radius: 6px;
   justify-content: center;
   align-items: center;
+  padding: var(--space-2);
 }
 
 .loginContent {
diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
index 74c9928868..cb91034710 100644
--- a/src/components/welcome/styles.module.css
+++ b/src/components/welcome/styles.module.css
@@ -25,12 +25,25 @@
   width: 100%;
 }
 
+.bulletList {
+  list-style: none;
+  margin-bottom: auto;
+}
+
+.bulletList li {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-1);
+  align-items: center;
+  margin-bottom: var(--space-2);
+}
+
 .content {
   background: linear-gradient(-90deg, #10ff84, #5fddff);
   background-size: 200% 200%;
   animation: gradient 15s ease infinite;
   border-radius: 6px;
-  padding: var(--space-3) var(--space-3);
+  padding: var(--space-3);
   display: flex;
   flex-direction: column;
   justify-content: center;