Skip to content

Refactor colors to use theme tokens #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 30, 2025
Merged

Refactor colors to use theme tokens #300

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd46b2a
chore(app): add workspace paths to tsconfig
L03TJ3 Jul 30, 2025
f285b74
fix: merge conflicts, fix: remove unneccessary tsconfig change
L03TJ3 Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions packages/app/src/components/ActivityLog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Image, Text, View, StyleSheet } from 'react-native';
import { Image, Text, View } from 'native-base';
import { InterRegular, InterSemiBold } from '../utils/webFonts';
import { Colors } from '../utils/colors';

const ReceiveIconUri = `data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="32" height="32" rx="16" fill="#95EED8"/> <path d="M19.048 14.6186C18.7453 14.3159 18.2546 14.3159 17.952 14.6186L16.775 15.7956V9.33325C16.775 8.90523 16.428 8.55825 16 8.55825C15.572 8.55825 15.225 8.90523 15.225 9.33325V15.7956L14.048 14.6186C13.7453 14.3159 13.2546 14.3159 12.952 14.6186C12.6493 14.9212 12.6493 15.4119 12.952 15.7146L15.452 18.2146C15.7546 18.5172 16.2453 18.5172 16.548 18.2146L19.048 15.7146C19.3507 15.4119 19.3507 14.9212 19.048 14.6186ZM23.4417 15.9999C23.4417 15.5719 23.0947 15.2249 22.6667 15.2249C22.2386 15.2249 21.8917 15.5719 21.8917 15.9999C21.8917 19.2538 19.2539 21.8916 16 21.8916C12.7461 21.8916 10.1083 19.2538 10.1083 15.9999C10.1083 15.5719 9.76135 15.2249 9.33333 15.2249C8.90531 15.2249 8.55833 15.5719 8.55833 15.9999C8.55833 20.1098 11.8901 23.4416 16 23.4416C20.1099 23.4416 23.4417 20.1098 23.4417 15.9999Z" fill="#27564B" stroke="#5BBAA3" stroke-width="0.3"/> </svg> `;

Expand Down Expand Up @@ -28,10 +27,10 @@ function ActivityLog({}: ActivityLogProps) {
);
}

const styles = StyleSheet.create({
const styles = {
container: {
width: '100%',
backgroundColor: Colors.white,
backgroundColor: 'white',
paddingLeft: 16,
paddingRight: 16,
},
Expand All @@ -40,10 +39,10 @@ const styles = StyleSheet.create({
flex: 1,
flexDirection: 'row',
gap: 8,
backgroundColor: Colors.white,
backgroundColor: 'white',
},
bar: {
backgroundColor: Colors.green[100],
backgroundColor: 'goodGreen.200',
width: 6,
height: 40,
alignSelf: 'flex-start',
Expand All @@ -53,14 +52,14 @@ const styles = StyleSheet.create({
height: 32,
},
name: {
color: Colors.black,
color: 'black',
fontSize: 16,
lineHeight: 24,
...InterSemiBold,
width: '100%',
},
date: {
color: Colors.gray[100],
color: 'goodGrey.400',
fontSize: 14,
lineHeight: 21,
textAlign: 'left',
Expand All @@ -74,5 +73,5 @@ const styles = StyleSheet.create({
},
logProfileDetails: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
logDate: { alignItems: 'flex-end' },
});
} as const;
export default ActivityLog;
29 changes: 13 additions & 16 deletions packages/app/src/components/BannerPool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Image, Linking, StyleSheet, TouchableOpacity } from 'react-native';
import { View } from 'native-base';
import { Colors } from '../utils/colors';
import { Linking } from 'react-native';
import { Image, Pressable, View } from 'native-base';
import { DirectPayments, Segmented, Community } from '../assets/poolTypes';

const getPoolType = (pool: string) => {
Expand All @@ -26,30 +25,28 @@ function BannerPool({
poolType: string;
}) {
const poolTypes = getPoolType(poolType);
const imgStyles = !homePage ? (isDesktopView ? styles.imageDesktop : styles.image) : styles.sectionImage;
return (
<View style={styles.imageContainer}>
<Image
source={headerImg}
style={!homePage ? (isDesktopView ? styles.imageDesktop : styles.image) : styles.sectionImage}
/>
<TouchableOpacity
<View {...styles.imageContainer}>
<Image source={headerImg} alt="header" {...imgStyles} />
<Pressable
onPress={(e) => {
e.stopPropagation();
Linking.openURL('https://www.gooddollar.org/goodcollective-how-it-work');
}}>
<View style={styles.poolTypeContainer}>
<Image source={poolTypes} style={styles.poolTypeImg} />
<View {...styles.poolTypeContainer}>
<Image source={poolTypes} alt="pool" {...styles.poolTypeImg} />
</View>
</TouchableOpacity>
</Pressable>
</View>
);
}

const styles = StyleSheet.create({
const styles = {
sectionImage: {
resizeMode: 'cover',
height: 192,
backgroundColor: Colors.white,
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
Expand Down Expand Up @@ -80,13 +77,13 @@ const styles = StyleSheet.create({
right: 12,
padding: 5,
cursor: 'pointer',
backgroundColor: '#ffffff',
backgroundColor: 'white',
borderRadius: 8,
},
poolTypeImg: {
width: '100%',
height: '100%',
},
});
} as const;

export default BannerPool;
33 changes: 16 additions & 17 deletions packages/app/src/components/CollectiveHomeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Pressable, Text, View } from 'native-base';

import { InterSemiBold, InterSmall } from '../utils/webFonts';
import useCrossNavigate from '../routes/useCrossNavigate';
import { Colors } from '../utils/colors';
import { Ocean } from '../assets';
import { useScreenSize } from '../theme/hooks';
import BannerPool from './BannerPool';
Expand All @@ -21,29 +20,29 @@ function CollectiveHomeCard({ name, description, headerImage, route, poolType }:

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

const containerStyle = {
...styles.cardContainer,
...styles.elevation,
...(isDesktopView ? styles.cardContainerDesktop : {}),
...(isTabletView ? { marginBottom: 20 } : {}),
};

return (
<TouchableOpacity
style={[
styles.cardContainer,
styles.elevation,
isDesktopView ? styles.cardContainerDesktop : {},
isTabletView ? { marginBottom: 20 } : {},
]}
onPress={() => navigate(`/collective/${route}`)}>
<Pressable {...containerStyle} onPress={() => navigate(`/collective/${route}`)}>
<BannerPool isDesktopView={isDesktopView} poolType={poolType} headerImg={headerImg} homePage={true} />
<View style={styles.cardDescriptionContainer}>
<Text style={styles.cardTitle}>{name}</Text>
<Text style={styles.cardDescription}>{description}</Text>
</View>
</TouchableOpacity>
</Pressable>
);
}

const styles = StyleSheet.create({
const styles = {
cardContainer: {
width: '100%',
minHeight: 330,
backgroundColor: Colors.white,
backgroundColor: 'white',
paddingTop: 0,
borderRadius: 20,
marginBottom: 20,
Expand All @@ -65,7 +64,7 @@ const styles = StyleSheet.create({
marginTop: 8,
fontSize: 16,
fontWeight: '400',
color: Colors.gray[100],
color: 'goodGrey.400',
...InterSmall,
lineHeight: 24,
maxHeight: 'auto',
Copy link

@korbit-ai korbit-ai bot Jul 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Invalid maxHeight value category Functionality

Tell me more
What is the issue?

The cardDescription style uses 'auto' as a string value for maxHeight, which is not a valid value for this property

Why this matters

Invalid maxHeight value will be ignored by the layout engine, potentially causing text overflow issues

Suggested change ∙ Feature Preview

Either remove the maxHeight property if no limit is needed, or set a specific numeric value:

cardDescription: {
    marginTop: 8,
    fontSize: 16,
    fontWeight: '400',
    color: 'goodGrey.400',
    ...InterSmall,
    lineHeight: 24,
    overflow: 'hidden',
}
Provide feedback to improve future suggestions

Nice Catch Incorrect Not in Scope Not in coding standard Other

💬 Looking for more details? Reply to this comment to chat with Korbit.

Expand All @@ -74,7 +73,7 @@ const styles = StyleSheet.create({
sectionImage: {
resizeMode: 'cover',
height: 192,
backgroundColor: Colors.white,
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
Expand All @@ -84,7 +83,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 12,
},
elevation: {
shadowColor: Colors.black,
shadowColor: 'black',
shadowOffset: {
width: 0,
height: 12,
Expand All @@ -93,6 +92,6 @@ const styles = StyleSheet.create({
shadowRadius: 15,
elevation: 24,
},
});
} as const;

export default CollectiveHomeCard;
9 changes: 5 additions & 4 deletions packages/app/src/components/DonorsList/DonorsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Platform, StyleSheet, View } from 'react-native';
import { Platform } from 'react-native';
import { View } from 'native-base';
import { DonorCollective } from '../../models/models';
import { DonorsListItem } from './DonorsListItem';
import { useMemo } from 'react';
Expand All @@ -22,15 +23,15 @@ function DonorsList({ donors, listStyle }: DonorsListProps) {
const userFullNames = useFetchFullNames(userAddresses);

return (
<View style={[styles.list, { ...(listStyle ?? {}) }]}>
<View {...styles.list} {...(listStyle ?? {})}>
{sortedDonors.map((donor, index) => (
<DonorsListItem key={donor.donor} donor={donor} rank={index + 1} userFullName={userFullNames[donor.donor]} />
))}
</View>
);
}

const styles = StyleSheet.create({
const styles = {
donorsListContainer: { width: '100%' },
list: {
width: '100%',
Expand All @@ -41,6 +42,6 @@ const styles = StyleSheet.create({
default: 'auto',
}),
},
});
} as const;

export default DonorsList;
52 changes: 27 additions & 25 deletions packages/app/src/components/DonorsList/DonorsListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Colors } from '../../utils/colors';
import { InterRegular, InterSemiBold } from '../../utils/webFonts';
import { Text, Pressable, View } from 'native-base';
import { DonorCollective } from '../../models/models';
import useCrossNavigate from '../../routes/useCrossNavigate';
import { formatAddress } from '../../lib/formatAddress';
Expand All @@ -23,27 +21,31 @@ export const DonorsListItem = ({ donor, rank, userFullName }: DonorsListItemProp
const userIdentifier = userFullName ?? ensName ?? formatAddress(donor.donor);

const circleBackgroundColor =
rank === 1 ? Colors.yellow[100] : rank === 2 ? Colors.gray[700] : rank === 3 ? Colors.orange[400] : 'none';
rank === 1 ? 'goodYellow.100' : rank === 2 ? 'goodGrey.700' : rank === 3 ? 'goodOrange.350' : 'none';
const circleTextColor =
rank === 1 ? Colors.yellow[200] : rank === 2 ? Colors.blue[200] : rank === 3 ? Colors.brown[100] : Colors.black;
rank === 1 ? 'goodYellow.200' : rank === 2 ? 'goodBlue.200' : rank === 3 ? 'goodBrown.100' : 'black';
Copy link

@korbit-ai korbit-ai bot Jul 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unmemoized Color Calculations category Performance

Tell me more
What is the issue?

Multiple ternary operations for color selection are recalculated on every render, even though they only depend on the rank prop.

Why this matters

These color calculations could be memoized since they only depend on the rank prop, avoiding unnecessary recalculations during re-renders.

Suggested change ∙ Feature Preview

Use useMemo to cache the color calculations:

const colors = useMemo(() => ({
  background: rank === 1 ? 'goodYellow.100' : rank === 2 ? 'goodGrey.700' : rank === 3 ? 'goodOrange.350' : 'none',
  text: rank === 1 ? 'goodYellow.200' : rank === 2 ? 'goodBlue.200' : rank === 3 ? 'goodBrown.100' : 'black'
}), [rank]);
Provide feedback to improve future suggestions

Nice Catch Incorrect Not in Scope Not in coding standard Other

💬 Looking for more details? Reply to this comment to chat with Korbit.


return (
<TouchableOpacity style={styles.rowBetween} onPress={() => navigate(`/profile/${donor.donor}`)}>
<View style={styles.rowTogether}>
<View style={[styles.circle, { backgroundColor: circleBackgroundColor }]}>
<Text style={[styles.circleText, { color: circleTextColor }]}>{rank}</Text>
<Pressable {...styles.rowBetween} onPress={() => navigate(`/profile/${donor.donor}`)}>
<View {...styles.rowTogether}>
<View {...styles.circle} style={{ backgroundColor: circleBackgroundColor }}>
<Text {...styles.circleText} style={{ color: circleTextColor }}>
{rank}
</Text>
</View>
<Text style={[styles.title, { color: circleTextColor }]}>{userIdentifier}</Text>
<Text {...styles.title} style={{ color: circleTextColor }}>
{userIdentifier}
</Text>
</View>
<Text style={styles.totalDonated}>
<Text style={styles.currency}>G$ </Text>
<Text {...styles.totalDonated}>
<Text {...styles.currency}>G$ </Text>
<GoodDollarAmount amount={formattedDonations || '0'} />
</Text>
</TouchableOpacity>
</Pressable>
);
};

const styles = StyleSheet.create({
const styles = {
circle: {
paddingVertical: 2,
paddingHorizontal: 10,
Expand All @@ -52,17 +54,17 @@ const styles = StyleSheet.create({
circleText: {
lineHeight: 24,
fontSize: 16,
...InterRegular,
fontWeight: 500,
},
rowNumber: {
fontSize: 16,
lineHeight: 24,
color: Colors.black,
...InterRegular,
color: 'black',
fontWeight: 500,
},
rowBetween: {
width: '100%',
backgroundColor: Colors.white,
backgroundColor: 'white',
flex: 1,
flexDirection: 'row',
marginVertical: 8,
Expand All @@ -77,27 +79,27 @@ const styles = StyleSheet.create({
row: {
minHeight: 48,
width: '100%',
backgroundColor: Colors.white,
backgroundColor: 'white',
flex: 1,
flexDirection: 'row',
marginVertical: 8,
alignItems: 'center',
},
title: {
fontSize: 16,
...InterSemiBold,
fontWeight: 700,
width: '100%',
color: Colors.black,
color: 'black',
marginLeft: 8,
},
totalDonated: {
fontSize: 14,
...InterRegular,
fontWeight: 500,
textAlign: 'right',
width: '100%',
color: Colors.gray[100],
color: 'goodGrey.400',
},
currency: {
...InterSemiBold,
fontWeight: 700,
},
});
} as const;
Loading
Loading