Skip to content

Commit

Permalink
feat: add sidebar design to welcome page (#2601)
Browse files Browse the repository at this point in the history
  • Loading branch information
@schmanu
schmanu authored Oct 6, 2023
1 parent cf8db3f commit 1a161da
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 69 deletions.
1 change: 0 additions & 1 deletion src/components/common/PageLayout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const isNoSidebarRoute = (pathname: string): boolean => {
AppRoutes.share.safeApp,
AppRoutes.newSafe.create,
AppRoutes.newSafe.load,
AppRoutes.welcome,
AppRoutes.index,
AppRoutes.imprint,
AppRoutes.privacy,
Expand Down
123 changes: 63 additions & 60 deletions src/components/welcome/NewSafe.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,87 @@
import React, { useState } from 'react'
import { Accordion, AccordionDetails, AccordionSummary, Box, Grid, SvgIcon, Typography } from '@mui/material'
import { Accordion, AccordionSummary, Box, Drawer, Grid, IconButton, SvgIcon, Typography } from '@mui/material'
import SafeList from '@/components/sidebar/SafeList'
import css from './styles.module.css'
import CheckFilled from '@/public/images/common/check-filled.svg'

import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ChevronRightIcon from '@mui/icons-material/ChevronRight'
import { DataWidget } from '@/components/welcome/DataWidget'
import WelcomeLogin from './WelcomeLogin'
import { useAppSelector } from '@/store'
import { selectTotalAdded } from '@/store/addedSafesSlice'

const NewSafe = () => {
const [expanded, setExpanded] = useState(false)
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 toggleSafeList = () => {
return setExpanded((prev) => !prev)
}
const [showSidebar, setShowSidebar] = useState(false)

const closeSidebar = () => setShowSidebar(false)

return (
<Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
<Grid item xs={12} lg={6}>
<WelcomeLogin />
</Grid>
<Grid item xs={12} lg={6} flex={1}>
<div className={css.content}>
{addedSafes > 0 && (
<Box minWidth={{ md: 480 }} className={css.sidebar}>
<Box display="flex" flexDirection="column" height="100%">
<Box flex={1}>
<Accordion className={css.accordion} onClick={toggleSafeList} expanded={expanded}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography variant="h4" display="inline" fontWeight={700}>
My Safe Accounts ({addedSafes})
</Typography>
</AccordionSummary>
<>
<Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
<div className={drawerCSS.drawer}>
<SafeList closeDrawer={closeSidebar} />

<AccordionDetails sx={{ padding: 0 }} onClick={(event) => event.stopPropagation()}>
<SafeList />
<Box mt={2} display={{ xs: 'none', md: 'block' }}>
<DataWidget />
</Box>
</AccordionDetails>
</Accordion>
<div className={drawerCSS.dataWidget}>
<DataWidget />
</div>
</div>
</Drawer>
<Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
<Grid item xs={12} lg={6}>
<WelcomeLogin />
</Grid>
<Grid item xs={12} lg={6} flex={1}>
<div className={css.content}>
{addedSafes > 0 && (
<Box minWidth={{ md: 480 }} className={css.sidebar}>
<Box display="flex" flexDirection="column">
<Box flex={1}>
<Accordion className={css.accordion} onClick={() => setShowSidebar(true)} expanded={false}>
<AccordionSummary>
<Box display="flex" flexDirection="row" alignItems="center" width="100%" gap={2}>
<IconButton sx={{ mr: 'auto', padding: '4px' }}>
<ChevronRightIcon />
</IconButton>
<Typography sx={{ mr: 'auto' }} variant="h4" display="inline" fontWeight={700}>
My Safe Accounts ({addedSafes})
</Typography>
</Box>
</AccordionSummary>
</Accordion>
</Box>
</Box>
</Box>
</Box>
)}
<Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
Unlock a new way of ownership
</Typography>
)}
<Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
Unlock a new way of ownership
</Typography>

<Typography mb={1} color="static.main">
The most trusted decentralized custody protocol and collective asset management platform.
</Typography>
<Typography mb={1} color="static.main">
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>
</div>
<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>
</Grid>
</>
)
}

Expand Down
1 change: 1 addition & 0 deletions src/components/welcome/WelcomeLogin/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
border-radius: 6px;
justify-content: center;
align-items: center;
padding: var(--space-2);
}

.loginContent {
Expand Down
23 changes: 15 additions & 8 deletions src/components/welcome/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@

.accordion :global .MuiAccordionSummary-root {
background: transparent !important;
padding: var(--space-3);
padding: var(--space-2);
border-bottom: 1px solid var(--color-border-light);
pointer-events: none;
}

.accordion :global .MuiAccordionSummary-content {
Expand All @@ -22,17 +21,29 @@
max-height: calc(100vh - var(--header-height) - var(--footer-height) - 8px);
overflow-y: auto;
align-self: flex-start;
margin-top: -24px;
margin-bottom: auto;
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-8);
padding: var(--space-3);
display: flex;
flex-direction: column;
justify-content: center;
Expand Down Expand Up @@ -84,10 +95,6 @@
height: auto;
}

.accordion :global .MuiAccordionSummary-root {
pointer-events: auto;
}

.accordion :global .MuiAccordionSummary-expandIconWrapper {
display: block;
}
Expand Down

0 comments on commit 1a161da

Please sign in to comment.