Merge pull request #62 from alecrem/feature/issue-56/add-margin-to-bu…

…ttons Add margin to buttons when stacked vertically (mobile)
studio-kura · Jul 15, 2024 · 4651f62 · 4651f62
2 parents fec7f8f + 016e3e8
commit 4651f62
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 35 deletions.
diff --git a/src/components/ClassPlaceSlides/ClassPlaceSlide1.tsx b/src/components/ClassPlaceSlides/ClassPlaceSlide1.tsx
@@ -1,7 +1,7 @@
 import { Container } from '@/components/Container';
 import { Hero } from '@/components/Hero';
 import { Main } from '@/components/Main';
-import { Box, Center, Text } from '@chakra-ui/react';
+import { Box, Center, Stack, Text } from '@chakra-ui/react';
 import { PhoneButton, TrialButton } from '../Buttons';
 
 type ClassPlaceSlide1Props = {
@@ -51,10 +51,12 @@ const ClassPlaceSlide1 = (props: ClassPlaceSlide1Props) => {
             >
               <>{children}</>
             </Text>
-            <Box>
-              <TrialButton mr={1} />
-              <PhoneButton />
-            </Box>
+            <Center>
+              <Stack direction={['column', 'row']}>
+                <TrialButton mr={1} />
+                <PhoneButton />
+              </Stack>
+            </Center>
           </Main>
         </Box>
       </Center>

diff --git a/src/components/ClassPlaceSlides/ClassPlaceSlide3.tsx b/src/components/ClassPlaceSlides/ClassPlaceSlide3.tsx
@@ -1,7 +1,15 @@
 import { Container } from '@/components/Container';
 import { Main } from '@/components/Main';
 import { CheckIcon } from '@chakra-ui/icons';
-import { Box, Button, Center, Heading, Image, Text } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Center,
+  Heading,
+  Image,
+  Stack,
+  Text,
+} from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { MailButton, PhoneButton, TrialButton } from '../Buttons';
 
@@ -55,22 +63,24 @@ const ClassPlaceSlide3 = (props: ClassPlaceSlide3Props) => {
             )}
             <Text color="white" fontSize={'2em'}>
               <>{children}</>
-              <TrialButton mr={1} />
-              <PhoneButton mr={1} />
-              <Button
-                as={NextLink}
-                href={'/pricing'}
-                fontWeight={600}
-                color={'text'}
-                mr={1}
-                _hover={{
-                  bg: 'green.100',
-                }}
-              >
-                <CheckIcon />
-                &nbsp;受講料
-              </Button>
-              <MailButton />
+              <Stack direction={['column', 'row']}>
+                <TrialButton mr={1} />
+                <PhoneButton mr={1} />
+                <Button
+                  as={NextLink}
+                  href={'/pricing'}
+                  fontWeight={600}
+                  color={'text'}
+                  mr={1}
+                  _hover={{
+                    bg: 'green.100',
+                  }}
+                >
+                  <CheckIcon />
+                  &nbsp;受講料
+                </Button>
+                <MailButton />
+              </Stack>
             </Text>
           </Main>
         </Box>

diff --git a/src/components/KindergartenSlides/KindergartenBoxSlide.tsx b/src/components/KindergartenSlides/KindergartenBoxSlide.tsx
@@ -1,6 +1,6 @@
 import { ContactButton, PhoneButton } from '@/components/Buttons';
 import { Container } from '@/components/Container';
-import { Box, Center, Text } from '@chakra-ui/react';
+import { Box, Center, Stack, Text } from '@chakra-ui/react';
 
 type KindergartenBoxSlideProps = {
   title: string;
@@ -41,10 +41,10 @@ const KindergartenBoxSlide = (props: KindergartenBoxSlideProps) => {
             <>{children}</>
           </Box>
           {addButtons && (
-            <Box mt={'1em'}>
+            <Stack direction={['column', 'row']} mt={'1em'}>
               <ContactButton href={'/kindergartens/contact'} mr={1} />
               <PhoneButton />
-            </Box>
+            </Stack>
           )}
         </Box>
       </Center>

diff --git a/src/pages/adults.tsx b/src/pages/adults.tsx
@@ -163,8 +163,8 @@ const AdultsClass = () => {
                     教室の雰囲気や講師の指導方法などを実際に感じていただけます。
                     お気軽にご参加くださいませ。
                   </Text>
-                  <MailButton variant="outline" size={'sm'} mr={1} />
-                  <PhoneButton variant="outline" size={'sm'} mr={1} />
+                  <MailButton variant="outline" size={'sm'} mr={1} mt={1} />
+                  <PhoneButton variant="outline" size={'sm'} mr={1} mt={1} />
                   <Text mt={'0.5em'} mb={'0.5em'}>
                     前日・当日のお申し込みはお電話のみとさせていただきます。
                   </Text>

diff --git a/src/pages/kids.tsx b/src/pages/kids.tsx
@@ -228,8 +228,8 @@ const KidsClass = () => {
                     教室の雰囲気や講師の指導方法などを実際に感じていただけます。
                     お気軽にご参加くださいませ。
                   </Text>
-                  <MailButton variant="outline" size={'sm'} mr={1} />
-                  <PhoneButton variant="outline" size={'sm'} mr={1} />
+                  <MailButton variant="outline" size={'sm'} mr={1} mt={1} />
+                  <PhoneButton variant="outline" size={'sm'} mr={1} mt={1} />
                   <Text mt={'0.5em'} mb={'0.5em'}>
                     ◊ 前日・当日のお申し込みはお電話のみとさせていただきます。
                   </Text>

diff --git a/src/pages/kindergartens/index.tsx b/src/pages/kindergartens/index.tsx
@@ -19,6 +19,7 @@ import {
   Heading,
   List,
   ListItem,
+  Stack,
   Table,
   Tbody,
   Text,
@@ -334,10 +335,10 @@ const Kindergartens = () => {
             </Tbody>
           </Table>
           <Text mt={'1em'}>お問い合わせをお待ちしております。</Text>
-          <Box mt={'1em'}>
+          <Stack direction={['column', 'row']} mt={'1em'}>
             <ContactButton href={'/kindergartens/contact'} mr={1} />
             <PhoneButton />
-          </Box>
+          </Stack>
           <Box mt={'1em'}>
             <LinkButton
               text={'体験教室'}

diff --git a/src/pages/programming.tsx b/src/pages/programming.tsx
@@ -83,8 +83,14 @@ const ProgrammingClass = () => (
             <Text mt={'1em'} mb={'1em'}>
               キーボードがまだ打てない方からアプリやウェブサイトを既にリリースされている方まで
             </Text>
-            <TrialButton color={'white'} bg={'blue.500'} hoverbg={'blue.400'} />{' '}
-            <PhoneButton />{' '}
+            <Stack direction={['column', 'row']}>
+              <TrialButton
+                color={'white'}
+                bg={'blue.500'}
+                hoverbg={'blue.400'}
+              />{' '}
+              <PhoneButton />{' '}
+            </Stack>
           </Box>
           <Box minW={'40vw'}>
             <AspectRatio ratio={16 / 9}>
@@ -439,14 +445,14 @@ const ProgrammingClass = () => (
             <Text my={8}>
               どちらの言語にご興味あるでしょうか？ぜひご相談ください。体験教室を受けていただきましたら、プログラミングとは何か想像がつくと思います。
             </Text>
-            <Box my={16}>
+            <Stack direction={['column', 'row']}>
               <TrialButton
                 color={'white'}
                 bg={'blue.500'}
                 hoverbg={'blue.400'}
               />{' '}
               <PhoneButton />{' '}
-            </Box>
+            </Stack>
           </Stack>
         </Box>
       </Container>