fix(website): change buttons sizes on mobile (#337)

Author: Adrian Podkalicki

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);

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' }}>

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">

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>

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>