From e6b068979bc56be0916ee7b55375979a1e222ed4 Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Thu, 28 Nov 2024 18:00:18 +0100 Subject: [PATCH] feat: Architecture mobile viewports --- public/images/Safenet/Architecture/arc-sm.png | Bin 0 -> 15515 bytes .../Architecture/arrow-back-gradient.svg | 26 ++++++ .../Architecture/arrow-next-gradient.svg | 26 ++++++ .../Safenet/Architecture/check-gradient.svg | 14 +++ src/components/Safenet/Architecture/index.tsx | 88 +++++++----------- .../Safenet/Architecture/styles.module.css | 60 +++++++++--- 6 files changed, 148 insertions(+), 66 deletions(-) create mode 100644 public/images/Safenet/Architecture/arc-sm.png create mode 100644 public/images/Safenet/Architecture/arrow-back-gradient.svg create mode 100644 public/images/Safenet/Architecture/arrow-next-gradient.svg create mode 100644 public/images/Safenet/Architecture/check-gradient.svg diff --git a/public/images/Safenet/Architecture/arc-sm.png b/public/images/Safenet/Architecture/arc-sm.png new file mode 100644 index 0000000000000000000000000000000000000000..f6fa5c7cfb2348c43a4705f487afa20f16657109 GIT binary patch literal 15515 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 CMU!0s literal 0 HcmV?d00001 diff --git a/public/images/Safenet/Architecture/arrow-back-gradient.svg b/public/images/Safenet/Architecture/arrow-back-gradient.svg new file mode 100644 index 00000000..cb6a153e --- /dev/null +++ b/public/images/Safenet/Architecture/arrow-back-gradient.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/Safenet/Architecture/arrow-next-gradient.svg b/public/images/Safenet/Architecture/arrow-next-gradient.svg new file mode 100644 index 00000000..dcbe31c0 --- /dev/null +++ b/public/images/Safenet/Architecture/arrow-next-gradient.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/Safenet/Architecture/check-gradient.svg b/public/images/Safenet/Architecture/check-gradient.svg new file mode 100644 index 00000000..1d959240 --- /dev/null +++ b/public/images/Safenet/Architecture/check-gradient.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/Safenet/Architecture/index.tsx b/src/components/Safenet/Architecture/index.tsx index 090f534f..8f7ba959 100644 --- a/src/components/Safenet/Architecture/index.tsx +++ b/src/components/Safenet/Architecture/index.tsx @@ -1,12 +1,12 @@ +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', @@ -14,10 +14,18 @@ const userSteps: Array<{ step: number; text: string; endAdorment?: any }> = [ { 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 */}
- + Safe processor Processors
    @@ -78,57 +90,27 @@ const Architecture = () => {
- - USER + +
+ USER + Initiates transaction intent +
- -
- - User signs transaction intent -
- - - -
- - Checks policies and issues resource-lock -
- - - -
- - Provides liquidity -
- - - -
- - Executes transaction intent -
- - - -
- - - Debits user by providing a validity proof of executed intent - -
- - - -
- - Returns liquidity -
- + {userSteps.map(({ step, text, icon }) => ( + +
+ + {text} +
+ + {icon ? {icon.alt} : null} + + ))} - + Safe net Liquid Network
    @@ -188,12 +170,14 @@ const Architecture = () => {
- {userSteps.map(({ step, text }) => ( - + {userSteps.map(({ step, text, icon }) => ( +
{text}
+ + {icon ? {icon.alt} : null} ))} diff --git a/src/components/Safenet/Architecture/styles.module.css b/src/components/Safenet/Architecture/styles.module.css index c4cded81..b6e39649 100644 --- 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,6 +112,7 @@ display: flex; flex-direction: row; align-items: center; + justify-content: space-between; width: 100%; height: 78px; border-radius: 20px; @@ -112,6 +120,10 @@ 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; }