feat: Architecture mobile viewports

safe-global · Nov 28, 2024 · e6b0689 · e6b0689
1 parent 5951a28
commit e6b0689
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 66 deletions.
diff --git a/public/images/Safenet/Architecture/arc-sm.png b/public/images/Safenet/Architecture/arc-sm.png
diff --git a/public/images/Safenet/Architecture/arrow-back-gradient.svg b/public/images/Safenet/Architecture/arrow-back-gradient.svg
diff --git a/public/images/Safenet/Architecture/arrow-next-gradient.svg b/public/images/Safenet/Architecture/arrow-next-gradient.svg
diff --git a/public/images/Safenet/Architecture/check-gradient.svg b/public/images/Safenet/Architecture/check-gradient.svg
diff --git a/src/components/Safenet/Architecture/index.tsx b/src/components/Safenet/Architecture/index.tsx
@@ -1,23 +1,31 @@
+import { type ComponentType, useState } from 'react'
 import { Button, Container, Grid, MobileStepper, Step, Stepper, Typography } from '@mui/material'
-import css from './styles.module.css'
 import GradientChip from '@/components/Safenet/GradientChip'
 import LinkButton from '@/components/common/LinkButton'
 import BackButton from '@/public/images/Safenet/Architecture/back-button.svg'
 import NextButton from '@/public/images/Safenet/Architecture/next-button.svg'
-import { useState } from 'react'
+import css from './styles.module.css'
 
-const userSteps: Array<{ step: number; text: string; endAdorment?: any }> = [
+const userSteps: Array<{ step: number; text: string; icon?: { src: string; alt: string } }> = [
   {
     step: 1,
     text: 'Checks policies and issues resource-lock',
   },
   {
     step: 2,
     text: 'Gets liquidity',
+    icon: {
+      src: '/images/Safenet/Architecture/arrow-next-gradient.svg',
+      alt: 'Arrow next gradient',
+    },
   },
   {
     step: 3,
     text: 'Executes transaction intent',
+    icon: {
+      src: '/images/Safenet/Architecture/check-gradient.svg',
+      alt: 'Checkmark gradient',
+    },
   },
   {
     step: 4,
@@ -26,6 +34,10 @@ const userSteps: Array<{ step: number; text: string; endAdorment?: any }> = [
   {
     step: 5,
     text: 'Returns liquidity',
+    icon: {
+      src: '/images/Safenet/Architecture/arrow-back-gradient.svg',
+      alt: 'Arrow back gradient',
+    },
   },
 ]
 
@@ -65,7 +77,7 @@ const Architecture = () => {
         {/* Mobile Stepper */}
         <div className={css.stepperWrapper}>
           <Stepper activeStep={activeStep} style={{ transform: `translateX(${TRANSLATION_VALUES[activeStep]}px)` }}>
-            <Step>
+            <Step className={css.borderedDescription}>
               <img src="/images/Safenet/Architecture/processor.png" alt="Safe processor" className={css.blockImage} />
               <Typography className={css.blockTitle}>Processors</Typography>
               <ul>
@@ -78,57 +90,27 @@ const Architecture = () => {
               </ul>
             </Step>
 
-            <Step>
-              <Typography className={css.midItemTitle}>USER</Typography>
+            <Step sx={{ marginTop: '-208px' }}>
+              <div className={css.midItemHeader}>
+                <Typography className={css.midItemTitle}>USER</Typography>
+                <Typography className={css.midItemText}>Initiates transaction intent</Typography>
+              </div>
 
               <Grid container className={css.midItemContainer}>
-                <Grid item md={12} className={css.step}>
-                  <div className={css.stepContent}>
-                    <GradientStep stepNumber={1} />
-                    <Typography className={css.stepText}>User signs transaction intent</Typography>
-                  </div>
-                </Grid>
-
-                <Grid item md={12} className={css.step}>
-                  <div className={css.stepContent}>
-                    <GradientStep stepNumber={2} />
-                    <Typography className={css.stepText}>Checks policies and issues resource-lock</Typography>
-                  </div>
-                </Grid>
-
-                <Grid item md={12} className={css.step}>
-                  <div className={css.stepContent}>
-                    <GradientStep stepNumber={3} />
-                    <Typography className={css.stepText}>Provides liquidity</Typography>
-                  </div>
-                </Grid>
-
-                <Grid item md={12} className={css.step}>
-                  <div className={css.stepContent}>
-                    <GradientStep stepNumber={4} />
-                    <Typography className={css.stepText}>Executes transaction intent</Typography>
-                  </div>
-                </Grid>
-
-                <Grid item md={12} className={css.step}>
-                  <div className={css.stepContent}>
-                    <GradientStep stepNumber={5} />
-                    <Typography className={css.stepText}>
-                      Debits user by providing a validity proof of executed intent
-                    </Typography>
-                  </div>
-                </Grid>
-
-                <Grid item md={12} className={css.step}>
-                  <div className={css.stepContent}>
-                    <GradientStep stepNumber={6} />
-                    <Typography className={css.stepText}>Returns liquidity</Typography>
-                  </div>
-                </Grid>
+                {userSteps.map(({ step, text, icon }) => (
+                  <Grid item md={12} className={css.step} key={text}>
+                    <div className={css.stepContent}>
+                      <GradientStep stepNumber={step} />
+                      <Typography className={css.stepText}>{text}</Typography>
+                    </div>
+
+                    {icon ? <img src={icon.src} alt={icon.alt} /> : null}
+                  </Grid>
+                ))}
               </Grid>
             </Step>
 
-            <Step>
+            <Step className={css.borderedDescription}>
               <img src="/images/Safenet/Architecture/mesh.png" alt="Safe net" className={css.blockImage} />
               <Typography className={css.blockTitle}>Liquid Network</Typography>
               <ul>
@@ -188,12 +170,14 @@ const Architecture = () => {
             </div>
 
             <Grid container className={css.midItemContainer}>
-              {userSteps.map(({ step, text }) => (
-                <Grid item md={12} className={css.step}>
+              {userSteps.map(({ step, text, icon }) => (
+                <Grid item md={12} className={css.step} key={text}>
                   <div className={css.stepContent}>
                     <GradientStep stepNumber={step} />
                     <Typography className={css.stepText}>{text}</Typography>
                   </div>
+
+                  {icon ? <img src={icon.src} alt={icon.alt} /> : null}
                 </Grid>
               ))}
             </Grid>

diff --git a/src/components/Safenet/Architecture/styles.module.css b/src/components/Safenet/Architecture/styles.module.css
@@ -15,16 +15,16 @@
 }
 
 .arc {
-  background-image: url('/images/Safenet/Architecture/arc.png');
+  background-image: url('/images/Safenet/Architecture/arc-sm.png');
   background-position: center;
   background-repeat: no-repeat;
   overflow: auto;
 
   position: absolute;
   width: 100%;
-  height: 980px;
+  height: 430px;
 
-  top: -276px;
+  top: -106px;
 }
 
 .contentWrapper {
@@ -77,11 +77,18 @@
   font-weight: 400;
 }
 
+/* to remove after ahving the asset*/
+.stepperWrapper .midItemHeader {
+  border: 1px solid var(--mui-palette-primary-main);
+  padding: 24px 16px;
+  border-radius: 20px;
+}
+
 .midItemContainer {
   margin-top: 44px;
   align-items: center;
   justify-content: center;
-  gap: 18px;
+  gap: 27px;
 }
 
 .blockImage {
@@ -105,13 +112,18 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 78px;
   border-radius: 20px;
   padding: 0 24px;
   margin: 0 8px;
 }
 
+.stepperWrapper .step {
+  border: 1px solid var(--mui-palette-border-main);
+}
+
 .stepContent {
   display: flex;
   align-items: center;
@@ -169,7 +181,7 @@
 
 .stepperWrapper {
   --stepWidth: 400px;
-  margin-top: 500px;
+  margin-top: 386px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -195,11 +207,31 @@
   background-color: transparent;
 }
 
+.midItemHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 54px;
+}
+
+.borderedDescription {
+  border: 1px solid var(--mui-palette-border-main);
+  padding: 88px 16px 24px;
+  border-radius: 20px;
+  height: 500px;
+}
+
 @media (min-width: 1200px) {
   .stepperWrapper {
     display: none;
   }
 
+  .arc {
+    background-image: url('/images/Safenet/Architecture/arc.png');
+    height: 980px;
+    top: -276px;
+  }
+
   .gridContainer {
     display: flex;
     margin-top: 370px;
@@ -212,12 +244,16 @@
     width: 100%;
   }
 
+  .midItemContainer {
+    gap: 19px;
+  }
+
+  .blockItem {
+    padding-top: 96px;
+  }
+
   .midItemHeader {
-    margin-top: -156px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 54px;
+    margin-top: -157px;
   }
 
   .step:nth-of-type(2) {
@@ -235,10 +271,6 @@
     height: 490px;
   }
 
-  .midItemContainer {
-    gap: 19px;
-  }
-
   .step {
     height: 81px;
   }