refactor: use ButtonsWrapper

safe-global · Oct 10, 2023 · 14e1d98 · 14e1d98
1 parent 363e6ab
commit 14e1d98
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 102 deletions.
diff --git a/src/components/Core/BannerCta/index.tsx b/src/components/Core/BannerCta/index.tsx
@@ -1,13 +1,12 @@
-import { Box, Button, Chip, Typography } from '@mui/material'
+import { Chip, Typography } from '@mui/material'
 import { Container } from '@mui/system'
 import type { ReactElement } from 'react'
 
 import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
 import clsx from 'clsx'
-import LinkButton from '@/components/common/LinkButton'
-import Link from 'next/link'
+import ButtonsWrapper from '@/components/common/ButtonsWrapper'
 
 export const BannerCta = ({ title, buttons, caption }: BaseBlock): ReactElement => {
   return (
@@ -26,28 +25,7 @@ export const BannerCta = ({ title, buttons, caption }: BaseBlock): ReactElement
           <Typography variant="h2" color="text.primary" mt={3} mb={5}>
             {title}
           </Typography>
-          {buttons ? (
-            <Box display="flex" gap={3} color="white" flexDirection={{ xs: 'column', md: 'row' }} alignItems="center">
-              {buttons.map((button, index) => {
-                const { text, variant, href } = button
-                const isButton = variant === 'button'
-
-                return (
-                  <Link key={index} href={href} target="_blank" rel="noreferrer" passHref>
-                    {isButton ? (
-                      <Button variant="contained" size="large" color="secondary">
-                        {text}
-                      </Button>
-                    ) : (
-                      <LinkButton color="secondary" sx={{ width: 'fit-content' }}>
-                        {text}
-                      </LinkButton>
-                    )}
-                  </Link>
-                )
-              })}
-            </Box>
-          ) : null}
+          <ButtonsWrapper buttons={buttons} />
         </Container>
       </div>
     </Container>

diff --git a/src/components/Core/BannerCta/styles.module.css b/src/components/Core/BannerCta/styles.module.css
@@ -6,7 +6,6 @@
   text-align: center;
   background-color: var(--mui-palette-border-light);
   border-radius: 24px;
-  color: var(--mui-palette-text-dark);
   padding: 24px 24px 300px;
   justify-content: space-between;
   margin-bottom: 40px;

diff --git a/src/components/Core/Masthead/index.tsx b/src/components/Core/Masthead/index.tsx
@@ -1,12 +1,11 @@
-import { Box, Button, Chip, Grid, Typography } from '@mui/material'
+import { Chip, Grid, Typography } from '@mui/material'
 import { Container } from '@mui/system'
 import type { ReactElement } from 'react'
 
 import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
 import type { BaseBlock } from '@/components/Home/types'
-import LinkButton from '@/components/common/LinkButton'
-import Link from 'next/link'
+import ButtonsWrapper from '@/components/common/ButtonsWrapper'
 
 export const Masthead = ({ title, buttons, caption, image }: BaseBlock): ReactElement => {
   return (
@@ -26,28 +25,7 @@ export const Masthead = ({ title, buttons, caption, image }: BaseBlock): ReactEl
             <Typography variant="h2" color="text.primary" mt={3} mb={5}>
               {title}
             </Typography>
-            {buttons ? (
-              <Box display="flex" gap={3} color="white" flexDirection={{ xs: 'column', md: 'row' }} alignItems="center">
-                {buttons.map((button, index) => {
-                  const { text, variant, href } = button
-                  const isButton = variant === 'button'
-
-                  return (
-                    <Link key={index} href={href} target="_blank" rel="noreferrer" passHref>
-                      {isButton ? (
-                        <Button variant="contained" size="large" color="secondary">
-                          {text}
-                        </Button>
-                      ) : (
-                        <LinkButton color="secondary" sx={{ width: 'fit-content' }}>
-                          {text}
-                        </LinkButton>
-                      )}
-                    </Link>
-                  )
-                })}
-              </Box>
-            ) : null}
+            <ButtonsWrapper buttons={buttons} />
           </Grid>
           {image ? (
             <Grid item xs={12} md={4} lg={3} xl={2.5} className={css.image}>

diff --git a/src/components/Core/Masthead/styles.module.css b/src/components/Core/Masthead/styles.module.css
@@ -2,7 +2,6 @@
   text-align: center;
   background-color: var(--mui-palette-secondary-background);
   border-radius: 24px;
-  color: var(--mui-palette-text-dark);
   padding: 24px;
   justify-content: space-between;
   margin-bottom: 40px;

diff --git a/src/components/Ecosystem/TextBlockItems/index.tsx b/src/components/Ecosystem/TextBlockItems/index.tsx
@@ -1,9 +1,8 @@
 import { type BaseBlock } from '@/components/Home/types'
-import { Button, Container, Grid, Typography, Box } from '@mui/material'
+import { Container, Grid, Typography } from '@mui/material'
 import layoutCss from '@/components/common/styles.module.css'
-import Link from 'next/link'
-import LinkButton from '@/components/common/LinkButton'
 import Cards from '@/components/Ecosystem/Cards'
+import ButtonsWrapper from '@/components/common/ButtonsWrapper'
 
 const TextBlockItems = ({ title, text, buttons, items }: BaseBlock) => {
   return (
@@ -14,28 +13,7 @@ const TextBlockItems = ({ title, text, buttons, items }: BaseBlock) => {
             {title}
           </Typography>
           <Typography mb={5}>{text}</Typography>
-          {buttons ? (
-            <Box display="flex" gap={3} color="text.primary" alignItems="center">
-              {buttons.map((button, index) => {
-                const { text, variant, href } = button
-                const isButton = variant === 'button'
-
-                return (
-                  <Link key={index} href={href} target="_blank" rel="noreferrer" passHref>
-                    {isButton ? (
-                      <Button variant="contained" size="large">
-                        {text}
-                      </Button>
-                    ) : (
-                      <LinkButton color="secondary" sx={{ width: 'fit-content' }}>
-                        {text}
-                      </LinkButton>
-                    )}
-                  </Link>
-                )
-              })}
-            </Box>
-          ) : null}
+          <ButtonsWrapper buttons={buttons} />
         </Grid>
         <Grid item md={2} display={{ xs: 'none', md: 'block' }} />
         <Grid item md={5}>

diff --git a/src/components/Wallet/ParallaxText/index.tsx b/src/components/Wallet/ParallaxText/index.tsx
@@ -1,12 +1,11 @@
 import type { ReactNode } from 'react'
-import { Box, Button, Container, Grid, Typography } from '@mui/material'
+import { Container, Grid, Typography } from '@mui/material'
 import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
-import LinkButton from '@/components/common/LinkButton'
 import type { BaseBlock } from '@/components/Home/types'
 import Stepper, { type StepsType } from '@/components/Wallet/Stepper'
-import Link from 'next/link'
 import clsx from 'clsx'
+import ButtonsWrapper from '@/components/common/ButtonsWrapper'
 
 export type ParallaxTextProps = BaseBlock & {
   variant: 'image-text' | 'text-image'
@@ -38,26 +37,7 @@ const ParallaxText = ({
           <Typography variant="h2">{title}</Typography>
           <Typography>{text}</Typography>
           {steps && <Stepper steps={steps} />}
-          {buttons ? (
-            <Box display="flex" gap={3}>
-              {buttons.map((button, index) => {
-                const { text, variant, href } = button
-                const isButton = variant === 'button'
-                if (isButton) {
-                  return (
-                    <Button key={index} href={href} variant="contained" size="large" target="_blank" rel="noreferrer">
-                      {text}
-                    </Button>
-                  )
-                }
-                return (
-                  <Link key={index} href={href} passHref target="_blank" rel="noreferrer">
-                    <LinkButton>{text}</LinkButton>
-                  </Link>
-                )
-              })}
-            </Box>
-          ) : null}
+          <ButtonsWrapper buttons={buttons} />
         </Grid>
         <Grid item xs={12} md={6} display="flex" alignItems="center">
           {children}

diff --git a/src/content/core.json b/src/content/core.json
@@ -22,7 +22,8 @@
       {
         "text": "Read Whitepaper",
         "href": "https://github.com/safe-global/safe-core-protocol-specs/blob/main/whitepaper.pdf",
-        "variant": "button"
+        "variant": "button",
+        "color": "secondary"
       },
       {
         "text": "GitHub",
@@ -198,7 +199,8 @@
       {
         "text": "Use our Hackathon Guide",
         "href": "https://safe-global.notion.site/Safe-d6c6ed61389041e28f5c7c925f653701",
-        "variant": "button"
+        "variant": "button",
+        "color": "secondary"
       },
       {
         "text": "March for AA Hackathon",