chore: mobile/responsive styles fixes

GoodDollar · Oct 20, 2024 · a1ee2f2 · a1ee2f2
1 parent d7c8c41
commit a1ee2f2
Show file tree

Hide file tree

Showing 6 changed files with 1,496 additions and 532 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -19,9 +19,9 @@
     "@apollo/client": "^3.10.8",
     "@celo-tools/celo-ethers-wrapper": "^0.4.0",
     "@ethersproject/shims": "^5.7.0",
-    "@gooddollar/good-design": "^0.1.31",
+    "@gooddollar/good-design": "^0.1.57",
     "@gooddollar/goodcollective-sdk": "^1.1.1",
-    "@gooddollar/web3sdk-v2": "^0.2.2",
+    "@gooddollar/web3sdk-v2": "^0.2.34",
     "@nerdwallet/apollo-cache-policies": "^3.2.0",
     "@react-native-aria/interactions": "0.2.3",
     "@react-native-async-storage/async-storage": "^1.18.2",

diff --git a/packages/app/src/components/ActionButton.tsx b/packages/app/src/components/ActionButton.tsx
@@ -1,4 +1,7 @@
-import { Box, Link, Pressable, Text } from 'native-base';
+import { Box, Link, Pressable, Text, useBreakpointValue } from 'native-base';
+import { withTheme } from '@gooddollar/good-design';
+
+import { InterSemiBold } from '../utils/webFonts';
 
 type ActionButtonProps = {
   href?: string;
@@ -9,26 +12,78 @@ type ActionButtonProps = {
   buttonStyles?: any;
 };
 
-const ActionButton = ({ href, text, bg, textColor, onPress, buttonStyles }: ActionButtonProps) => {
-  const { buttonContainer, button, buttonText } = buttonStyles ?? {};
-
-  const content = (
-    <Pressable {...button} onPress={onPress} backgroundColor={bg}>
-      <Text {...buttonText} color={textColor}>
-        {text}
-      </Text>
-    </Pressable>
-  );
-
-  if (href) {
-    return (
-      <Link {...buttonContainer} href={href} isExternal={true}>
-        {content}
-      </Link>
+export const theme = {
+  baseStyle: {
+    buttonStyles: {
+      buttonContainer: {
+        justifyContent: 'space-evenly',
+        marginTop: 2,
+      },
+      button: {
+        width: '100%',
+        height: 47,
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingRight: 10,
+        paddingLeft: 10,
+        paddingBottom: 1,
+        fontSize: 'md',
+        fontWeight: 700,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        borderRadius: 50,
+      },
+      buttonText: {
+        ...InterSemiBold,
+        fontSize: 'md',
+      },
+    },
+  },
+};
+
+const ActionButton = withTheme({ name: 'ActionButton' })(
+  ({ href, text, bg, textColor, onPress, buttonStyles }: ActionButtonProps) => {
+    const responsiveStyles = useBreakpointValue({
+      base: {
+        button: {
+          ...buttonStyles.button,
+          justifyContent: 'center',
+        },
+        buttonText: {
+          ...buttonStyles.buttonText,
+          height: 47,
+          display: 'flex',
+          alignItems: 'center',
+        },
+        buttonContainer: {
+          ...buttonStyles.buttonContainer,
+          width: '100%',
+        },
+      },
+      md: buttonStyles,
+    });
+
+    const { buttonContainer, button, buttonText } = responsiveStyles ?? {};
+
+    const content = (
+      <Pressable {...button} onPress={onPress} backgroundColor={bg}>
+        <Text {...buttonText} color={textColor}>
+          {text}
+        </Text>
+      </Pressable>
     );
-  }
 
-  return <Box {...buttonContainer}>{content}</Box>;
-};
+    if (href) {
+      return (
+        <Link {...buttonContainer} href={href} isExternal={true}>
+          {content}
+        </Link>
+      );
+    }
+
+    return <Box {...buttonContainer}>{content}</Box>;
+  }
+);
 
 export default ActionButton;
diff --git a/packages/app/src/components/theme.ts b/packages/app/src/components/theme.ts
@@ -1 +1,2 @@
 export { theme as AboutCard } from './AboutCard';
+export { theme as ActionButton } from './ActionButton';
diff --git a/packages/app/src/pages/HomePage.tsx b/packages/app/src/pages/HomePage.tsx
@@ -1,13 +1,12 @@
 import { useRef } from 'react';
-import { withTheme } from '@gooddollar/good-design';
-import { Box, HStack, Text, useMediaQuery, VStack, ScrollView, Spinner } from 'native-base';
+import { useScreenSize, withTheme } from '@gooddollar/good-design';
+import { Box, HStack, ScrollView, Spinner, Text, useBreakpointValue, VStack } from 'native-base';
 
 import { useTotalStats } from '../hooks';
 
 import ActionButton from '../components/ActionButton';
 import CollectiveHomeCard from '../components/CollectiveHomeCard';
 import Layout from '../components/Layout/Layout';
-import { InterSemiBold } from '../utils/webFonts';
 
 import { IpfsCollective } from '../models/models';
 import { useCollectivesMetadata } from '../hooks';
@@ -40,56 +39,29 @@ export const theme = {
         paddingLeft: 15,
         paddingRight: 15,
       },
-      sectionContainerDesktop: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        alignItems: 'flex-start',
-        gap: 24,
-      },
-    },
-    buttonStyles: {
-      buttonContainer: {
-        // flex: 1,
-        justifyContent: 'space-evenly',
-        marginTop: 8,
-      },
-      button: {
-        width: '100%',
-        height: 47,
-        flex: 1,
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingRight: 10,
-        paddingLeft: 10,
-        paddingTop: 1,
-        paddingBottom: 1,
-        fontSize: 'md',
-        fontWeight: 700,
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        borderRadius: 50,
-      },
-      buttonText: {
-        ...InterSemiBold,
-        fontSize: 'md',
-      },
-      forwardIcon: {
-        width: 18,
-        height: 18,
-      },
     },
   },
 };
 
-const HomePage = withTheme({ name: 'HomePage' })(({ containerStyles, buttonStyles }: HomePageProps) => {
+const HomePage = withTheme({ name: 'HomePage' })(({ containerStyles }: HomePageProps) => {
   const collectives = useCollectivesMetadata();
   const totalStats = useTotalStats();
 
-  const { body, sectionContainer, sectionContainerDesktop } = containerStyles ?? {};
+  const { body, sectionContainer } = containerStyles ?? {};
+  const { isTabletView } = useScreenSize();
 
-  const [isDesktopResolution] = useMediaQuery({
-    minWidth: 920,
+  const collectivesContainer = useBreakpointValue({
+    base: {
+      ...sectionContainer,
+    },
+    md: {
+      ...sectionContainer,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      gap: 24,
+    },
   });
 
   const collectivesSectionRef = useRef<any>(null);
@@ -114,47 +86,49 @@ const HomePage = withTheme({ name: 'HomePage' })(({ containerStyles, buttonStyle
               <Text variant="md-grey" textAlign="center">{`GoodCollective is committed to empowering
 individuals and communities by providing direct digital payments to those who need it most.`}</Text>
             </VStack>
-            <VStack space={4}>
-              <Text variant="2xl-grey" textAlign="center" fontWeight="700">
-                Impact to Date
-              </Text>
-              <HStack space={0} justifyContent="space-evenly">
-                {Object.values(totalStats).map(({ amount, copy }) => (
-                  <VStack key={copy} space={0} textAlign="center" minWidth="220">
-                    <Text variant="3xl-grey" color="goodPurple.400" fontWeight="700" fontFamily="heading">
-                      {amount}
-                    </Text>
-                    <Text variant="md-grey">{copy}</Text>
-                  </VStack>
-                ))}
-              </HStack>
-            </VStack>
-            <VStack space={0}>
-              <HStack space={2} justifyContent="center">
-                <ActionButton
-                  href="https://gooddollar.org/goodcollective-how-it-works"
-                  text="How it works"
-                  bg="goodPurple.400"
-                  textColor="white"
-                  buttonStyles={buttonStyles}
-                />
-              </HStack>
-              <HStack space={2} justifyContent="center">
-                <ActionButton
-                  text="Donate to a GoodCollective"
-                  bg="goodGreen.200"
-                  textColor="goodGreen.400"
-                  onPress={scrollToCollectives}
-                  buttonStyles={buttonStyles}
-                />
-                <ActionButton
-                  href="https://gooddollar.typeform.com/creategood"
-                  text="Create a GoodCollective"
-                  bg="goodPurple.100"
-                  textColor="goodPurple.400"
-                  buttonStyles={buttonStyles}
-                />
-              </HStack>
+            <VStack space={isTabletView ? 8 : 0} flexDirection={isTabletView ? 'column' : 'column-reverse'}>
+              <VStack space={isTabletView ? 4 : 0} paddingTop={4}>
+                <Text variant="2xl-grey" textAlign="center" fontWeight="700">
+                  Impact to Date
+                </Text>
+                <HStack space={0} justifyContent="space-evenly" flexDir={isTabletView ? 'row' : 'column'}>
+                  {Object.values(totalStats).map(({ amount, copy }) => (
+                    <VStack key={copy} space={0} paddingTop={2} textAlign="center" minWidth="220">
+                      <Text variant="3xl-grey" color="goodPurple.400" fontWeight="700" fontFamily="heading">
+                        {amount}
+                      </Text>
+                      <Text variant="md-grey">{copy}</Text>
+                    </VStack>
+                  ))}
+                </HStack>
+              </VStack>
+              <VStack
+                space={0}
+                {...(isTabletView ? {} : { borderBottomWidth: 0.5, borderBottomColor: 'borderGrey' })}
+                paddingBottom={4}>
+                <HStack space={2} justifyContent="center" minWidth="100%">
+                  <ActionButton
+                    href="https://gooddollar.org/goodcollective-how-it-works"
+                    text="How it works"
+                    bg="goodPurple.400"
+                    textColor="white"
+                  />
+                </HStack>
+                <HStack space={2} justifyContent="center" flexDir={isTabletView ? 'row' : 'column'}>
+                  <ActionButton
+                    text="Donate to a GoodCollective"
+                    bg="goodGreen.200"
+                    textColor="goodGreen.400"
+                    onPress={scrollToCollectives}
+                  />
+                  <ActionButton
+                    href="https://gooddollar.typeform.com/creategood"
+                    text="Create a GoodCollective"
+                    bg="goodPurple.100"
+                    textColor="goodPurple.400"
+                  />
+                </HStack>
+              </VStack>
             </VStack>
           </VStack>
           <VStack space={10}>
@@ -171,7 +145,7 @@ individuals and communities by providing direct digital payments to those who ne
                   textAlign="center">{`Check out existing GoodCollective pools and support existing members, or start your own!`}</Text>
               </VStack>
             </VStack>
-            <VStack space={0} style={[sectionContainer, isDesktopResolution ? sectionContainerDesktop : {}]}>
+            <VStack space={0} {...collectivesContainer}>
               {!collectives ? (
                 <Text>Loading...</Text>
               ) : (

diff --git a/packages/app/src/theme/theme.ts b/packages/app/src/theme/theme.ts
@@ -56,7 +56,7 @@ export const nbTheme = extendTheme({
     // custom keys for breakpoints cannot be used in useBreakpoint hook so we override defaults
     base: 0,
     sm: 375,
-    md: 480,
+    md: 720,
     lg: 976,
     xl: 1280,
     '2xl': 1440,
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { theme as AboutCard } from './AboutCard';
		export { theme as ActionButton } from './ActionButton';