Skip to content

Commit

Permalink
style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@L03TJ3
L03TJ3 committed Oct 23, 2024
1 parent c8e4f9e commit 015f761
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 105 deletions.
5 changes: 3 additions & 2 deletions packages/app/src/components/CollectiveHomeCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Image, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';

import { InterSemiBold, InterSmall } from '../utils/webFonts';
import useCrossNavigate from '../routes/useCrossNavigate';
Expand All @@ -16,7 +16,7 @@ interface CollectiveHomeCardProps {

function CollectiveHomeCard({ name, description, headerImage, route }: CollectiveHomeCardProps) {
const { navigate } = useCrossNavigate();
const { isDesktopView } = useScreenSize();
const { isDesktopView, isTabletView } = useScreenSize();

const headerImg = headerImage ? { uri: headerImage } : Ocean;

Expand All @@ -29,6 +29,7 @@ function CollectiveHomeCard({ name, description, headerImage, route }: Collectiv
styles.elevation,
isDesktopView ? styles.cardContainerDesktop : {},
isParagraphExpanded ? { height: 'auto' } : {},
isTabletView ? { marginBottom: 20 } : {},
]}
onPress={() => navigate(`/collective/${route}`)}>
<Image source={headerImg} style={styles.sectionImage} />
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const styles = StyleSheet.create({
native: 'scroll',
default: 'auto',
}),
backgroundColor: 'defaultGrey',
backgroundColor: 'goodGrey.50',
},
});

Expand Down
2 changes: 0 additions & 2 deletions packages/app/src/components/theme.ts
View file

This file was deleted.

180 changes: 92 additions & 88 deletions packages/app/src/pages/HomePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { FC, PropsWithChildren, useRef } from 'react';
import { useScreenSize } from '@gooddollar/good-design';
import { Box, HStack, ScrollView, Spinner, Text, useBreakpointValue, VStack } from 'native-base';
import { Platform } from 'react-native';

import { useTotalStats } from '../hooks';
import { useScreenSize } from '../theme/hooks';

import ActionButton from '../components/ActionButton';
import CollectiveHomeCard from '../components/CollectiveHomeCard';
Expand All @@ -26,29 +27,30 @@ const homeContainerStyles = {
};

const CollectivesContainer: FC<PropsWithChildren> = ({ children }) => {
const { isDesktopView } = useScreenSize();
const collectiveStyles = {
marginBottom: 20,
paddingTop: 0,
paddingLeft: 15,
paddingRight: 15,
};

const container = useBreakpointValue({
base: {
...collectiveStyles,
space: 0,
},
lg: {
...collectiveStyles,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'flex-start',
space: 6,
},
});

return <VStack {...container}>{children}</VStack>;
return (
<VStack {...container} {...Platform.select({ web: { style: { gap: isDesktopView ? 12 : 0 } } })}>
{children}
</VStack>
);
};

const HomePage = () => {
Expand All @@ -65,97 +67,99 @@ const HomePage = () => {
}
};

if (!totalStats) return <Spinner variant="page-loader" size="lg" />;

return (
<Layout>
<ScrollView>
<VStack {...homeContainerStyles} space={4}>
<VStack space={8}>
<VStack space={2}>
<Text variant="3xl-grey" textAlign="center" fontWeight="700">
Empower Communities. Maximize Impact.
</Text>
<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={isDesktopView ? 8 : 0} flexDirection={isDesktopView ? 'column' : 'column-reverse'}>
<VStack space={isDesktopView ? 4 : 0} paddingTop={4}>
<Text variant="2xl-grey" textAlign="center" fontWeight="700">
Impact to Date
{!totalStats ? (
<Spinner variant="page-loader" size="lg" />
) : (
<ScrollView>
<VStack {...homeContainerStyles} space={4}>
<VStack space={8}>
<VStack space={2}>
<Text variant="3xl-grey" textAlign="center" fontWeight="700">
Empower Communities. Maximize Impact.
</Text>
<HStack space={0} justifyContent="space-evenly" flexDir={isDesktopView ? '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>
<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={0}
{...(isDesktopView ? {} : { 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={isDesktopView ? '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 space={isDesktopView ? 8 : 0} flexDirection={isDesktopView ? 'column' : 'column-reverse'}>
<VStack space={isDesktopView ? 4 : 0} paddingTop={4}>
<Text variant="2xl-grey" textAlign="center" fontWeight="700">
Impact to Date
</Text>
<HStack space={0} justifyContent="space-evenly" flexDir={isDesktopView ? '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}
{...(isDesktopView ? {} : { 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={isDesktopView ? '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>
<VStack space={10}>
<VStack space={0}>
<VStack paddingTop={4} paddingBottom={4}>
<Box borderWidth="1" borderColor="borderGrey" />
</VStack>
<VStack space={2} ref={collectivesSectionRef}>
<Text variant="3xl-grey" textAlign="center" fontWeight="700">
Explore GoodCollective Pools
</Text>
<Text
variant="md-grey"
textAlign="center">{`Check out existing GoodCollective pools and support existing members, or start your own!`}</Text>
<VStack space={10}>
<VStack space={0}>
<VStack paddingTop={4} paddingBottom={4}>
<Box borderWidth="1" borderColor="borderGrey" />
</VStack>
<VStack space={2} ref={collectivesSectionRef}>
<Text variant="3xl-grey" textAlign="center" fontWeight="700">
Explore GoodCollective Pools
</Text>
<Text
variant="md-grey"
textAlign="center">{`Check out existing GoodCollective pools and support existing members, or start your own!`}</Text>
</VStack>
</VStack>
<CollectivesContainer>
{!collectives ? (
<Text>Loading...</Text>
) : (
collectives?.map((ipfsCollective: IpfsCollective) => (
<CollectiveHomeCard
key={ipfsCollective.collective}
name={ipfsCollective.name}
description={ipfsCollective.description}
headerImage={ipfsCollective.headerImage}
route={ipfsCollective.collective}
/>
))
)}
</CollectivesContainer>
</VStack>
<CollectivesContainer>
{!collectives ? (
<Text>Loading...</Text>
) : (
collectives?.map((ipfsCollective: IpfsCollective) => (
<CollectiveHomeCard
key={ipfsCollective.collective}
name={ipfsCollective.name}
description={ipfsCollective.description}
headerImage={ipfsCollective.headerImage}
route={ipfsCollective.collective}
/>
))
)}
</CollectivesContainer>
</VStack>
</VStack>
</ScrollView>
</ScrollView>
)}
</Layout>
);
};
Expand Down
21 changes: 9 additions & 12 deletions packages/app/src/theme/theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { extendTheme } from 'native-base';
import { fontConfig, getPlatformFamilies } from '@gooddollar/good-design';

import * as components from '../components/theme';

export const nbTheme = extendTheme({
fontConfig: getPlatformFamilies(fontConfig),
colors: {
Expand All @@ -11,16 +9,16 @@ export const nbTheme = extendTheme({
primaryHoverDark: '#0075AC',
white: '#FFFFFF',
black: '#000000',
defaultGrey: '#F3F3F3',

// text
goodGrey: {
50: '#F4F4F4',
100: '#E6E6E6',
200: '#CCCCCC',
300: '#B0B0B0',
400: '#1F2937',
500: '#5A5A5A',
600: '#000000',
50: '#F3F3F3',
100: '#F4F4F4',
200: '#E6E6E6',
300: '#CCCCCC',
400: '#B0B0B0',
500: '#1F2937',
600: '#5A5A5A',
},
goodPurple: {
100: '#E2EAFF',
Expand Down Expand Up @@ -78,12 +76,11 @@ export const nbTheme = extendTheme({
'4xl': 60,
},
components: {
...components,
Spinner: {
variants: {
'page-loader': () => ({
borderWidth: '0',
color: 'primary',
color: 'goodPurple.400',
paddingBottom: 4,
}),
},
Expand Down

0 comments on commit 015f761

Please sign in to comment.