From ccf58216dc54f23b85b25c2f0f9b481d52e97003 Mon Sep 17 00:00:00 2001
From: Adrian Podkalicki <mr.podkalicki.adrian94@gmail.com>
Date: Mon, 13 Sep 2021 00:15:25 +0200
Subject: [PATCH 1/2] fix(website): change buttons sizes on mobile (#337)

---
 .../src/components/Benefits/Benefits.tsx      |  2 +-
 packages/website/src/components/Hero.tsx      |  7 ++--
 .../src/components/MentorPerspective.tsx      |  2 +-
 .../src/components/Projects/ProjectCard.tsx   | 32 ++++++++++++-------
 .../components/Projects/ProjectsCarousel.tsx  |  2 +-
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/website/src/components/Benefits/Benefits.tsx b/packages/website/src/components/Benefits/Benefits.tsx
index e81fa7b5..63a57ca1 100644
--- a/packages/website/src/components/Benefits/Benefits.tsx
+++ b/packages/website/src/components/Benefits/Benefits.tsx
@@ -29,7 +29,7 @@ const rolledUpProfitButton = {
 
 export const Benefits = ({ title, benefitItems, shrinkSize }: BenefitsProps) => {
   const columnsCount = useBreakpointValue({ base: 1, md: 2, xl: 3 } as const);
-  const profitButtonSize = useBreakpointValue({ base: 'sm', md: 'lg' } as const);
+  const profitButtonSize = useBreakpointValue({ base: 'md', sm: 'md', md: 'lg' } as const);
 
   const [isExpanded, setIsExpanded] = useState(false);
   const benefitTitleRef = useRef<HTMLDivElement>(null);
diff --git a/packages/website/src/components/Hero.tsx b/packages/website/src/components/Hero.tsx
index d25642e9..0e3913e2 100644
--- a/packages/website/src/components/Hero.tsx
+++ b/packages/website/src/components/Hero.tsx
@@ -12,12 +12,13 @@ import { externalLinkBaseProps } from './ExternalLink';
 export const Hero = () => {
   const { openModal } = useRecruitmentModal();
 
-  const buttonSize = useBreakpointValue({ base: 'sm', sm: 'md', md: 'lg' } as const);
-  const buttonsStackDirection = useBreakpointValue({ base: 'column', md: 'row' } as const);
+  const buttonSize = useBreakpointValue({ base: 'md', sm: 'md', md: 'lg' } as const);
+  const buttonsStackDirection = useBreakpointValue({ base: 'column', sm: 'row' } as const);
+  const buttonWidth = useBreakpointValue({ md: 'min(280px, 75vw)' } as const);
 
   const mainHeaderSize = { base: '4xl', sm: '6xl', md: '7xl', xl: '8xl' } as const;
   const subheaderSize = { base: 'md', sm: 'xl', md: '2xl' } as const;
-  const buttonProps = { size: buttonSize, width: 'min(280px, 75vw)' } as const;
+  const buttonProps = { size: buttonSize, width: buttonWidth } as const;
 
   return (
     <Flex justify="center" width="100%" p={{ base: '32px 16px 64px', lg: '120px 64px 160px' }}>
diff --git a/packages/website/src/components/MentorPerspective.tsx b/packages/website/src/components/MentorPerspective.tsx
index 00d38dbc..d72d38d0 100644
--- a/packages/website/src/components/MentorPerspective.tsx
+++ b/packages/website/src/components/MentorPerspective.tsx
@@ -9,7 +9,7 @@ import { MENTORS_GUIDE_URL } from '@/constants';
 import { Section } from './Section';
 
 export const MentorPerspective = () => {
-  const downloadSize = useBreakpointValue({ base: 'sm', sm: 'lg' } as const, 'base');
+  const downloadSize = useBreakpointValue({ base: 'md', sm: 'md', md: 'lg' } as const, 'base');
 
   return (
     <Section spacing="32px" backgroundColor="gray.50">
diff --git a/packages/website/src/components/Projects/ProjectCard.tsx b/packages/website/src/components/Projects/ProjectCard.tsx
index a3814381..cde929c9 100644
--- a/packages/website/src/components/Projects/ProjectCard.tsx
+++ b/packages/website/src/components/Projects/ProjectCard.tsx
@@ -12,20 +12,21 @@ import { Project } from './Projects.data';
 
 interface ProjectCardProps {
   project: Project;
-  isSmallMobile: boolean;
 }
 
-const buttonProps = {
-  ...externalLinkBaseProps,
-  as: 'a',
-  variant: 'solid',
-  color: 'default',
-  flex: 1,
-  size: 'sm',
-} as const;
+export const ProjectCard = ({ project }: ProjectCardProps) => {
+  const buttonHasIcon = useBreakpointValue({ base: true, md: true, lg: true });
+  const buttonsDirection = useBreakpointValue({ base: 'column', sm: 'row', md: 'column', lg: 'row' } as const);
+  const buttonSize = useBreakpointValue({ base: 'md', sm: 'md', md: 'sm' } as const);
 
-export const ProjectCard = ({ project, isSmallMobile }: ProjectCardProps) => {
-  const buttonHasIcon = useBreakpointValue({ base: true, md: false, lg: true });
+  const buttonProps = {
+    ...externalLinkBaseProps,
+    as: 'a',
+    variant: 'solid',
+    color: 'default',
+    size: buttonSize,
+    width: 'max(164px)',
+  } as const;
 
   return (
     <Flex direction="column" p="24px" h="100%" border="1px solid" borderColor="gray.300" borderRadius="8px">
@@ -37,7 +38,14 @@ export const ProjectCard = ({ project, isSmallMobile }: ProjectCardProps) => {
           {project.description}
         </Typography>
       </VStack>
-      <Stack spacing="12px" width="100%" pt="32px" mt="auto" direction={isSmallMobile ? 'column' : 'row'}>
+      <Stack
+        spacing="12px"
+        pt="32px"
+        mt="auto"
+        justifyContent="center"
+        alignItems="center"
+        direction={buttonsDirection}
+      >
         <Button {...buttonProps} href={project.gitHubUrl} icon={buttonHasIcon ? <SolidGitHubIcon /> : undefined}>
           Zobacz kod
         </Button>
diff --git a/packages/website/src/components/Projects/ProjectsCarousel.tsx b/packages/website/src/components/Projects/ProjectsCarousel.tsx
index e905e165..ab5e31dc 100644
--- a/packages/website/src/components/Projects/ProjectsCarousel.tsx
+++ b/packages/website/src/components/Projects/ProjectsCarousel.tsx
@@ -44,7 +44,7 @@ export const ProjectsCarousel = () => {
         >
           {projects.map((project) => (
             <SwiperSlide key={project.name}>
-              <ProjectCard project={project} isSmallMobile={isSmallMobile} />
+              <ProjectCard project={project} />
             </SwiperSlide>
           ))}
         </Swiper>

From e64e9c36339e85dc8d823f364ca0fb442c5199b5 Mon Sep 17 00:00:00 2001
From: Adrian Podkalicki <mr.podkalicki.adrian94@gmail.com>
Date: Thu, 30 Sep 2021 23:49:39 +0200
Subject: [PATCH 2/2] fix(website): Changing buttons sizes in ProjectCard
 according to review.

---
 packages/website/src/components/Projects/ProjectCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/website/src/components/Projects/ProjectCard.tsx b/packages/website/src/components/Projects/ProjectCard.tsx
index cde929c9..37cc190e 100644
--- a/packages/website/src/components/Projects/ProjectCard.tsx
+++ b/packages/website/src/components/Projects/ProjectCard.tsx
@@ -17,7 +17,7 @@ interface ProjectCardProps {
 export const ProjectCard = ({ project }: ProjectCardProps) => {
   const buttonHasIcon = useBreakpointValue({ base: true, md: true, lg: true });
   const buttonsDirection = useBreakpointValue({ base: 'column', sm: 'row', md: 'column', lg: 'row' } as const);
-  const buttonSize = useBreakpointValue({ base: 'md', sm: 'md', md: 'sm' } as const);
+  const buttonSize = useBreakpointValue({ base: 'md', md: 'sm' } as const);
 
   const buttonProps = {
     ...externalLinkBaseProps,
@@ -25,7 +25,7 @@ export const ProjectCard = ({ project }: ProjectCardProps) => {
     variant: 'solid',
     color: 'default',
     size: buttonSize,
-    width: 'max(164px)',
+    width: { base: '100%', sm: 'max(164px)' },
   } as const;
 
   return (