Skip to content

Commit e72e149

Browse files
youngkidwarrioryoungkidwarrior
authored
new theme and updated color palettes (#452)
Writeup coming soon
2 parents 76b6378 + d7345c7 commit e72e149

File tree

69 files changed

+6194
-3940
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+6194
-3940
lines changed

‎apps/next/public/tamagui.css

Lines changed: 1581 additions & 271 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/app/components/FormFields/BooleanCheckboxField.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,22 +63,22 @@ export const BooleanCheckboxField = (
6363
id={id}
6464
borderWidth={0}
6565
$theme-dark={{
66-
bc: '$accent1Dark',
66+
bc: '$green1Dark',
6767
}}
6868
$theme-light={{
69-
bc: '$accent1Light',
69+
bc: '$green1Light',
7070
}}
7171
{...props}
7272
>
7373
<Checkbox.Indicator>
7474
<Check
7575
$theme-dark={{
76-
bc: '$accent1Dark',
77-
color: '$accent12Dark',
76+
bc: '$green1Dark',
77+
color: '$green12Dark',
7878
}}
7979
$theme-light={{
80-
bc: '$accent1Light',
81-
color: '$accent12Light',
80+
bc: '$green1Light',
81+
color: '$green12Light',
8282
}}
8383
/>
8484
</Checkbox.Indicator>

‎packages/app/components/FormFields/TextField.tsx

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -92,21 +92,12 @@ export const TextField = (props: InputProps & { fieldsetProps?: FieldsetProps })
9292
fontSize={'$5'}
9393
fontStyle={field.value ? 'normal' : 'italic'}
9494
fontWeight={field.value ? 'bold' : 'normal'}
95-
bc={'$color2'}
9695
$theme-dark={{
97-
color: '$gray12Dark',
98-
// placeholderTextColor fails in test env for some reason
9996
...(process.env.NODE_ENV !== 'test' ? { placeholderTextColor: '$white' } : {}),
10097
}}
10198
$theme-light={{
102-
color: '$black',
103-
// placeholderTextColor fails in test env for some reason
10499
...(process.env.NODE_ENV !== 'test' ? { placeholderTextColor: '$black' } : {}),
105100
}}
106-
// @todo use the theme colors if we ever have the palette scales
107-
// bc={'$color2'}
108-
// color={'$color12'}
109-
// placeholderTextColor={'$color10'}
110101
spellCheck={isEmail ? false : undefined}
111102
autoCapitalize={isEmail ? 'none' : undefined}
112103
keyboardType={isEmail ? 'email-address' : undefined}

‎packages/app/components/NavSheet.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export function NavSheet({
3838
circular
3939
icon={<IconX size="$3" $theme-light={{ color: '$color12' }} color="$color9" />}
4040
onPress={() => onOpenChange()}
41-
theme="accent"
41+
theme="green"
4242
/>
4343
</Stack>
4444
<Separator $theme-dark={{ bc: '$decay' }} />

‎packages/app/components/ReferralLink.tsx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
type ButtonProps,
66
ButtonText,
77
useToastController,
8+
Theme,
89
} from '@my/ui'
910
import { useUser } from 'app/utils/useUser'
1011
import { CheckCheck } from '@tamagui/lucide-icons'
@@ -41,7 +42,7 @@ export function ReferralLink(props: ButtonProps) {
4142
toast.show('Something went wrong', {
4243
message: 'We were unable to copy your referral link to the clipboard',
4344
customData: {
44-
theme: 'error',
45+
theme: 'red',
4546
},
4647
})
4748
)
@@ -58,7 +59,6 @@ export function ReferralLink(props: ButtonProps) {
5859
if (!referralCode) return null
5960
return (
6061
<Button
61-
bc="transparent"
6262
chromeless
6363
hoverStyle={{
6464
backgroundColor: 'transparent',
@@ -76,16 +76,17 @@ export function ReferralLink(props: ButtonProps) {
7676
}}
7777
{...props}
7878
>
79-
<ButtonText
80-
fontSize={'$4'}
81-
bc="$primary"
82-
fontWeight={'500'}
83-
fontFamily={'$mono'}
84-
theme="accent"
85-
px="$2"
86-
>
87-
{referralLinkVisual}
88-
</ButtonText>
79+
<Theme name="green">
80+
<ButtonText
81+
fontSize={'$4'}
82+
fontWeight={'500'}
83+
fontFamily={'$mono'}
84+
px="$2"
85+
bc="$background"
86+
>
87+
{referralLinkVisual}
88+
</ButtonText>
89+
</Theme>
8990
<ButtonIcon>
9091
<AnimatePresence exitBeforeEnter>
9192
{hasCopied ? (

‎packages/app/components/SearchBar.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -249,8 +249,7 @@ function SearchResultRow({
249249

250250
function Search() {
251251
const { form } = useTagSearch()
252-
const { resolvedTheme } = useThemeSetting()
253-
const iconColor = resolvedTheme?.startsWith('dark') ? '$olive' : '$black'
252+
254253
return (
255254
<>
256255
<H4 color="$gray11Light" fontFamily={'$mono'} fontWeight={'500'} size={'$5'}>
@@ -268,7 +267,7 @@ function Search() {
268267
props={{
269268
query: {
270269
accessibilityRole: 'search',
271-
placeholder: '$Sendtag, Phone, Send ID',
270+
placeholder: 'Sendtag, Phone, Send ID',
272271
pr: '$size.3.5',
273272
},
274273
}}
@@ -303,7 +302,7 @@ function Search() {
303302
onPress={() => form.setValue('query', '')}
304303
aria-label="Clear input."
305304
>
306-
<IconX width="$size.1.5" height="$size.1.5" color={iconColor} />
305+
<IconX width="$size.1.5" height="$size.1.5" />
307306
</Button>
308307
</View>
309308
</>

‎packages/app/components/TopNav.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,7 @@ export function TopNav({
179179
) : (
180180
<H2
181181
fontWeight={'300'}
182-
$theme-light={{ col: '$gray10Light' }}
183-
$theme-dark={{ col: '$gray8Light' }}
182+
col="$color10"
184183
lineHeight={32}
185184
$gtLg={{ ml: isSubRoute ? '$4' : '$0' }}
186185
display={selectedCoin && !media.gtLg ? 'none' : 'flex'}
@@ -206,8 +205,7 @@ export function TopNav({
206205
py="$3"
207206
$gtSm={{ py: '$6' }}
208207
$gtLg={{ pl: '$1', pb: '$6', pt: '$0', ...{ ml: isSubRoute ? '$10' : '$1' } }}
209-
$theme-light={{ col: '$gray10Light' }}
210-
$theme-dark={{ col: '$gray8Light' }}
208+
col="$color10"
211209
>
212210
{subheader}
213211
</Paragraph>
@@ -264,7 +262,7 @@ function Button(props: ButtonProps) {
264262
focusStyle={{
265263
backgroundColor: 'transparent',
266264
}}
267-
theme="accent"
265+
theme="green"
268266
{...props}
269267
/>
270268
)

‎packages/app/components/sidebar/AuthSideBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const AuthSideBarWrapper = ({ children }: { children?: React.ReactNode })
2929
const media = useMedia()
3030
return (
3131
<XStack overflow="hidden" height={'100%'}>
32-
{media.gtMd && <AuthSideBar bc={'$background'} h={'92%'} ml={'$7'} my={'auto'} br={'$8'} />}
32+
{media.gtMd && <AuthSideBar h={'92%'} ml={'$7'} my={'auto'} br={'$8'} />}
3333
{children}
3434
</XStack>
3535
)

‎packages/app/components/sidebar/HomeSideBar.tsx

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,22 +30,22 @@ import { ReferralLink } from '../ReferralLink'
3030

3131
const links = [
3232
{
33-
icon: <IconHome size={'$1.75'} />,
33+
icon: <IconHome size={'$1.75'} color={'inherit'} />,
3434
text: 'Home',
3535
href: '/',
3636
},
3737
{
38-
icon: <IconActivity size={'$1'} />,
38+
icon: <IconActivity size={'$1'} color={'inherit'} />,
3939
text: 'Send',
4040
href: '/send',
4141
},
4242
{
43-
icon: <IconDeviceReset size={'$1'} />,
43+
icon: <IconDeviceReset size={'$1'} color={'inherit'} />,
4444
text: 'Activity',
4545
href: '/activity',
4646
},
4747
{
48-
icon: <IconAccount size={'$1'} />,
48+
icon: <IconAccount size={'$1'} color={'inherit'} />,
4949
text: 'Account',
5050
href: '/account',
5151
},
@@ -60,17 +60,16 @@ const links = [
6060

6161
const HomeSideBar = ({ ...props }: YStackProps) => {
6262
return (
63-
<SideBar {...props}>
64-
<Nav display="flex" w="100%" pl={'$7'}>
65-
<Link href={'/'} display="flex">
66-
<IconSendLogo size={'$2.5'} color={'$color12'} />
67-
</Link>
68-
<YStack gap={'$3.5'} pt={'$10'}>
69-
{links.map((link) => (
70-
<SideBarNavLink key={link.href} {...link} />
71-
))}
72-
</YStack>
73-
</Nav>
63+
<SideBar {...props} ai={'flex-start'} pl="$7">
64+
<Link href={'/'}>
65+
<IconSendLogo color={'$color12'} size={'$2.5'} />
66+
</Link>
67+
68+
<YStack gap={'$7'} pt={'$10'} jc={'space-between'}>
69+
{links.map((link) => (
70+
<SideBarNavLink key={link.href} {...link} />
71+
))}
72+
</YStack>
7473
</SideBar>
7574
)
7675
}
@@ -128,9 +127,7 @@ export const HomeSideBarWrapper = ({ children }: { children?: React.ReactNode })
128127

129128
return (
130129
<XStack overflow="hidden" height={'100%'}>
131-
{media.gtLg && (
132-
<HomeSideBar bc="$color2" width={234} minWidth={234} pt={80} jc="flex-start" />
133-
)}
130+
{media.gtLg && <HomeSideBar width={234} minWidth={234} pt={80} jc="flex-start" />}
134131
{children}
135132
<HomeBottomSheet />
136133
</XStack>

‎packages/app/components/sidebar/SideBarNavLink.tsx

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { Button, ButtonIcon, ButtonText, Link, type LinkProps } from '@my/ui'
1+
import { Link, Theme, type LinkProps } from '@my/ui'
22
import { usePathname } from 'app/utils/usePathname'
33
import type { ReactElement } from 'react'
4-
import { useThemeSetting } from '@tamagui/next-theme'
54

65
export function SideBarNavLink({
76
icon,
@@ -15,41 +14,29 @@ export function SideBarNavLink({
1514
parts.includes(props.href.toString()) ||
1615
props.href.toString().startsWith(`/${parts[0]}`)
1716

18-
const { resolvedTheme } = useThemeSetting()
19-
const iconActiveColor = resolvedTheme?.startsWith('dark') ? '$primary' : '$accent3Light'
20-
const iconInActiveColor = resolvedTheme?.startsWith('dark') ? '$gray5Light' : '$color12'
21-
2217
return (
23-
<Link {...props} href={props.disabled ? '' : props.href}>
24-
<Button
25-
disabled={props.disabled}
26-
bg={'transparent'}
27-
p={0}
28-
width={'100%'}
18+
<Theme name={isActiveRoute ? 'green' : null}>
19+
<Link
20+
{...props}
21+
href={props.disabled ? '' : props.href}
22+
$theme-dark={{ color: isActiveRoute ? '$color9' : '$color10' }}
23+
$theme-light={{ color: isActiveRoute ? '$color12' : '$color10' }}
2924
hoverStyle={{
3025
position: 'relative',
3126
left: '2%',
3227
scale: '105%',
33-
opacity: 1,
34-
backgroundColor: 'transparent',
35-
borderWidth: 0,
36-
}}
37-
focusStyle={{
38-
backgroundColor: 'transparent',
39-
outlineWidth: 0,
40-
}}
41-
pressStyle={{
42-
backgroundColor: 'transparent',
43-
outlineWidth: 0,
28+
color: '$color12',
4429
}}
45-
color={isActiveRoute ? iconActiveColor : iconInActiveColor}
46-
opacity={isActiveRoute ? 1 : 0.63}
30+
fontSize={'$7'}
31+
f={1}
32+
fontWeight={isActiveRoute ? '400' : '300'}
33+
gap="$3"
34+
display="flex"
35+
alignItems="center"
4736
>
48-
<ButtonIcon>{icon}</ButtonIcon>
49-
<ButtonText fontSize={'$7'} f={1} fontWeight={isActiveRoute ? '400' : '300'}>
50-
{text}
51-
</ButtonText>
52-
</Button>
53-
</Link>
37+
{icon}
38+
{text}
39+
</Link>
40+
</Theme>
5441
)
5542
}

0 commit comments

Comments
 (0)