fix: Home Intro buttons orientation

safe-global · Oct 10, 2023 · ee310ad · ee310ad
1 parent eecc579
commit ee310ad
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Ecosystem/TextBlockItems/index.tsx b/src/components/Ecosystem/TextBlockItems/index.tsx
@@ -13,7 +13,7 @@ const TextBlockItems = ({ title, text, buttons, items }: BaseBlock) => {
             {title}
           </Typography>
           <Typography mb={5}>{text}</Typography>
-          <ButtonsWrapper buttons={buttons} />
+          <ButtonsWrapper buttons={buttons} mobileDirection="row" />
         </Grid>
         <Grid item md={2} display={{ xs: 'none', md: 'block' }} />
         <Grid item md={5}>

diff --git a/src/components/Home/Intro/index.tsx b/src/components/Home/Intro/index.tsx
@@ -14,7 +14,7 @@ const Intro = ({ title, text, buttons }: BaseBlock) => {
             </Grid>
             <Grid item md={6}>
               <Typography className={css.subtitle}>{text}</Typography>
-              <ButtonsWrapper buttons={buttons} />
+              <ButtonsWrapper buttons={buttons} mobileDirection="row" />
             </Grid>
           </Grid>
         </Container>

diff --git a/src/components/common/ButtonsWrapper/index.tsx b/src/components/common/ButtonsWrapper/index.tsx
@@ -4,11 +4,16 @@ import { Button } from '@mui/material'
 import Link from 'next/link'
 import css from './styles.module.css'
 
-const ButtonsWrapper = ({ buttons }: { buttons?: ButtonType[] }) => {
+type ButtonsWrapperProps = {
+  buttons?: ButtonType[]
+  mobileDirection?: 'column' | 'row'
+}
+
+const ButtonsWrapper = ({ buttons, mobileDirection }: ButtonsWrapperProps) => {
   if (!buttons || buttons.length === 0) return null
 
   return (
-    <div className={css.wrapper}>
+    <div className={`${css.wrapper} ${mobileDirection === 'row' && css.mobileRow}`}>
       {buttons.map((button, index) => {
         const { text, variant, href, color = 'primary' } = button
         const isButton = variant === 'button'

diff --git a/src/components/common/ButtonsWrapper/styles.module.css b/src/components/common/ButtonsWrapper/styles.module.css
@@ -4,6 +4,10 @@
   gap: 24px;
 }
 
+.wrapper.mobileRow {
+  flex-direction: row;
+}
+
 @media (min-width: 900px) {
   .wrapper {
     flex-direction: row;