feat: add mediaquery to Points page (#180)

* feat: add mediaquery to Points page
DLC-link · Sep 30, 2024 · b744f1a · b744f1a
1 parent 64631d0
commit b744f1a
Show file tree

Hide file tree

Showing 16 changed files with 194 additions and 46 deletions.
diff --git a/src/app/components/attestor-details/components/attestor-details-layout.tsx b/src/app/components/attestor-details/components/attestor-details-layout.tsx
@@ -1,9 +1,11 @@
 import { VStack } from '@chakra-ui/react';
 import { HasChildren } from '@models/has-children';
 
+import { breakpoints } from '@shared/utils';
+
 export function AttestorDetailsLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <VStack w={'1280px'} spacing={'20px'} align={'left'}>
+    <VStack w={breakpoints} spacing={'20px'} align={'left'}>
       {children}
     </VStack>
   );

diff --git a/src/app/components/generic-table/components/generic-table-layout.tsx b/src/app/components/generic-table/components/generic-table-layout.tsx
@@ -8,6 +8,7 @@ interface GenericTableLayoutProps {
   borderRadius?: string;
   bg?: string;
   children: React.ReactNode;
+  isMobile?: boolean;
 }
 
 export function GenericTableLayout({
@@ -18,13 +19,15 @@ export function GenericTableLayout({
   borderRadius = 'md',
   children,
   bg = 'background.container.01',
+  isMobile = false,
 }: GenericTableLayoutProps): React.JSX.Element {
+  // const isMobile = useBreakpointValue({ base: true, md: false });
   return (
     <VStack
-      w={width}
+      w={isMobile ? '100%' : width}
       h={height}
       minH={'100px'}
-      padding={padding}
+      padding={isMobile ? '0px' : padding}
       alignItems={alignItems}
       borderRadius={borderRadius}
       bg={bg}

diff --git a/src/app/components/header/components/header.layout.tsx b/src/app/components/header/components/header.layout.tsx
@@ -1,9 +1,11 @@
 import { HStack } from '@chakra-ui/react';
 import { HasChildren } from '@models/has-children';
 
+import { breakpoints } from '@shared/utils';
+
 export function HeaderLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <HStack justifyContent={'space-between'} w={'1280px'}>
+    <HStack justifyContent={'space-between'} w={breakpoints}>
       {children}
     </HStack>
   );

diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { HStack, VStack } from '@chakra-ui/react';
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { HStack, IconButton, VStack, useBreakpointValue } from '@chakra-ui/react';
 import { Account } from '@components/account/account';
 import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
 import { HeaderLayout } from '@components/header/components/header.layout';
@@ -23,6 +24,8 @@ export function Header(): React.JSX.Element {
     navigate(route);
   };
 
+  const isMobile = useBreakpointValue({ base: true, md: false });
+
   useEffect(() => {
     if (isConnected && !chain) {
       setShowBanner(true);
@@ -43,13 +46,31 @@ export function Header(): React.JSX.Element {
         />
       )}
       <HeaderLayout>
-        <HStack gap={'50px'}>
+        <HStack
+          justifyContent={isMobile ? 'space-between' : 'flex-start'}
+          w={'100%'}
+          gap={isMobile ? '0px' : '50px'}
+        >
           <CompanyWebsiteButton />
-          <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
+          {isMobile ? (
+            <IconButton
+              aria-label="menu"
+              icon={<HamburgerIcon />}
+              onClick={() => {
+                console.log('clicked');
+              }}
+            />
+          ) : (
+            <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
+          )}
         </HStack>
         <HStack>
-          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
-          <Account />
+          {!isMobile && (
+            <>
+              <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+              <Account />
+            </>
+          )}
         </HStack>
       </HeaderLayout>
     </VStack>

diff --git a/src/app/components/how-it-works/top/top-section.tsx b/src/app/components/how-it-works/top/top-section.tsx
@@ -1,10 +1,18 @@
 import { Box, HStack, Text, VStack } from '@chakra-ui/react';
 
+import { breakpoints } from '@shared/utils';
+
 import { IntroVideo } from './components/intro-video';
 
 export function TopSection(): React.JSX.Element {
   return (
-    <Box w={'1280px'} h={'274px'} display={'flex'} justifyContent={'center'} alignItems={'center'}>
+    <Box
+      w={breakpoints}
+      h={'274px'}
+      display={'flex'}
+      justifyContent={'center'}
+      alignItems={'center'}
+    >
       <HStack w={'1000px'} justifyContent={'space-between'}>
         <VStack align={'left'}>
           <Text color={'white.01'} fontSize={'56px'} fontWeight={'bold'}>

diff --git a/src/app/components/my-vaults/components/my-vaults-large.layout.tsx b/src/app/components/my-vaults/components/my-vaults-large.layout.tsx
@@ -1,11 +1,13 @@
 import { VStack } from '@chakra-ui/react';
 import { HasChildren } from '@models/has-children';
 
+import { breakpoints } from '@shared/utils';
+
 export function MyVaultsLargeLayout({ children }: HasChildren): React.JSX.Element {
   return (
     <VStack
       px={'25px'}
-      w={'1280px'}
+      w={breakpoints}
       h={'625px'}
       bg={'background.container.01'}
       border={'1px solid'}

diff --git a/src/app/components/points/components/point-stats-board-total-points.tsx b/src/app/components/points/components/point-stats-board-total-points.tsx
@@ -1,17 +1,26 @@
-import { Divider, Skeleton, Text, VStack } from '@chakra-ui/react';
+import { Divider, Skeleton, Text, useBreakpointValue } from '@chakra-ui/react';
 
 import { formatNumber } from '@shared/utils';
 
+import { TokenStatsBoardTotalPointsLayout } from './points-stats-board-total-points-layout';
+
 interface TokenStatsBoardTotalPointsProps {
   totalPoints: number | undefined;
 }
 
 export function TokenStatsBoardTotalPoints({
   totalPoints,
 }: TokenStatsBoardTotalPointsProps): React.JSX.Element {
+  const isMobile = useBreakpointValue({ base: true, md: false });
+
   return (
-    <VStack w={'100%'} px={'25px'} alignItems={'flex-start'} spacing={'20px'}>
-      <Text color={'white.01'} fontSize={'3xl'} fontWeight={'200'} textAlign={'left'}>
+    <TokenStatsBoardTotalPointsLayout isMobile={isMobile}>
+      <Text
+        color={'white.01'}
+        fontSize={['xl', '2xl', '2xl', '3xl', '3xl']}
+        fontWeight={'200'}
+        textAlign={'left'}
+      >
         You've Earned
       </Text>
       <Skeleton w={'100%'} isLoaded={totalPoints !== undefined}>
@@ -25,12 +34,12 @@ export function TokenStatsBoardTotalPoints({
             {formatNumber(totalPoints)} Points
           </Text>
         ) : (
-          <Text fontSize={'5xl'} fontWeight={600} color={'gray.500'}>
+          <Text fontSize={isMobile ? '3xl' : '5xl'} fontWeight={600} color={'gray.500'}>
             Loading...
           </Text>
         )}
       </Skeleton>
       <Divider orientation={'horizontal'} variant={'thick'} />
-    </VStack>
+    </TokenStatsBoardTotalPointsLayout>
   );
 }
diff --git a/src/app/components/points/components/points-layout.tsx b/src/app/components/points/components/points-layout.tsx
@@ -1,9 +1,11 @@
 import { VStack } from '@chakra-ui/react';
 import { HasChildren } from '@models/has-children';
 
+import { breakpoints } from '@shared/utils';
+
 export function PointsLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <VStack w={'1280px'} spacing={'20px'}>
+    <VStack w={breakpoints} spacing={'20px'}>
       {children}
     </VStack>
   );

diff --git a/src/app/components/points/components/points-stats-board-action.tsx b/src/app/components/points/components/points-stats-board-action.tsx
@@ -1,4 +1,4 @@
-import { HStack, Image, Skeleton, Text, VStack } from '@chakra-ui/react';
+import { HStack, Image, Skeleton, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
 import { Token } from '@models/token';
 
 import { formatNumber } from '@shared/utils';
@@ -14,8 +14,9 @@ export function PointsStatsBoardAction({
   totalSupply,
   tokenSuffix,
 }: PointsStatsBoardActionProps): React.JSX.Element {
+  const isMobile = useBreakpointValue({ base: true, md: false });
   return (
-    <VStack w={'100%'} h={'100%'} pr={'25px'} py={'15px'} alignItems={'start'}>
+    <VStack w={'100%'} h={'100%'} pr={'25px'} py={isMobile ? '5px' : '15px'} alignItems={'start'}>
       <Skeleton isLoaded={totalSupply !== undefined} h={'100%'} w={'100%'}>
         <VStack w={'100%'} h={'85px'} alignItems={'start'} spacing={'15px'}>
           <HStack h={'25px'}>

diff --git a/src/app/components/points/components/points-stats-board-total-points-layout.tsx b/src/app/components/points/components/points-stats-board-total-points-layout.tsx
@@ -0,0 +1,20 @@
+import { VStack } from '@chakra-ui/react';
+
+interface TokenStatsBoardTotalPointsLayoutProps {
+  isMobile: boolean | undefined;
+  children: React.ReactNode;
+}
+
+export function TokenStatsBoardTotalPointsLayout({
+  isMobile,
+  children,
+}: TokenStatsBoardTotalPointsLayoutProps): React.JSX.Element {
+  const px = isMobile ? '0px' : '25px';
+  const spacing = isMobile ? '10px' : '20px';
+
+  return (
+    <VStack w={'100%'} px={px} alignItems={'flex-start'} spacing={spacing}>
+      {children}
+    </VStack>
+  );
+}
diff --git a/src/app/components/points/components/points-table/points-table.tsx b/src/app/components/points/components/points-table/points-table.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@chakra-ui/react';
+import { Skeleton, useBreakpointValue } from '@chakra-ui/react';
 import { GenericTableBody } from '@components/generic-table/components/generic-table-body';
 import { GenericTableHeader } from '@components/generic-table/components/generic-table-header';
 import { GenericTableHeaderText } from '@components/generic-table/components/generic-table-header-text';
@@ -12,9 +12,10 @@ interface PointsTableProps {
 
 export function PointsTable({ items }: PointsTableProps): React.JSX.Element {
   const dynamicHeight = items ? items.length * 59 + 20 : 20;
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
-    <GenericTableLayout height={`${dynamicHeight}px`} width={'50%'}>
+    <GenericTableLayout height={`${dynamicHeight}px`} width={'50%'} isMobile={isMobile}>
       <GenericTableHeader>
         <GenericTableHeaderText w={'25%'}>dlcBTC Used</GenericTableHeaderText>
         <GenericTableHeaderText w={'50%'}>Points Earned</GenericTableHeaderText>