Skip to content

Commit cf94ca0

Browse files
author
Jon Tzeng
committed
Update light theme colors
Updated colors: - Tab bar icon - Slider - Gift card pending text
1 parent 43dfe6a commit cf94ca0

7 files changed

Lines changed: 68 additions & 53 deletions

File tree

‎src/components/cards/GiftCardDisplayCard.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
249249
pendingText: {
250250
fontSize: theme.rem(0.875),
251251
fontFamily: theme.fontFaceMedium,
252-
...theme.embossedTextShadow
252+
...theme.embossedTextShadow,
253+
color: theme.giftCardText
253254
}
254255
}))

‎src/components/icons/IconBadge.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,14 @@ const getStyles = cacheStyles((theme: Theme) => {
8383
justifyContent: 'center'
8484
},
8585
textIos: {
86+
color: theme.badgeText,
8687
fontSize: theme.rem(0.5) - 1,
8788
fontFamily: theme.fontFaceBold,
8889
marginLeft: 2,
8990
marginRight: 1
9091
},
9192
textAndroid: {
93+
color: theme.badgeText,
9294
fontSize: theme.rem(0.5) - 1,
9395
fontFamily: theme.fontFaceBold,
9496
marginTop: 1.5,
@@ -98,7 +100,7 @@ const getStyles = cacheStyles((theme: Theme) => {
98100
width: theme.rem(0.15),
99101
height: theme.rem(0.15),
100102
borderRadius: theme.rem(0.15 / 2),
101-
backgroundColor: theme.primaryText
103+
backgroundColor: theme.badgeText
102104
}
103105
}
104106
})

‎src/theme/variables/edgeDark.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -497,6 +497,7 @@ export const edgeDark: Theme = {
497497
// UI 4.0:
498498

499499
badgeDot: palette.accentRed,
500+
badgeText: palette.white,
500501

501502
// Shadows
502503
iconShadow: {

‎src/theme/variables/edgeLight.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export const edgeLight: Theme = {
140140
// Icons
141141
icon: palette.darkestNavy,
142142
iconTappable: palette.darkMint,
143-
iconDeactivated: palette.whiteOp75,
143+
iconDeactivated: palette.darkestNavy,
144144
dangerIcon: palette.accentRed,
145145
warningIcon: palette.accentOrange,
146146
iconLoadingOverlay: palette.whiteOp75,
@@ -362,13 +362,13 @@ export const edgeLight: Theme = {
362362
toggleButtonOff: palette.darkGray,
363363

364364
// Confirmation slider
365-
confirmationSlider: palette.darkGray,
365+
confirmationSlider: palette.lightGray,
366366
confirmationSliderCompleted: palette.darkGreen,
367367
confirmationSliderText: palette.darkestNavy,
368-
confirmationSliderArrow: palette.backgroundWhite,
368+
confirmationSliderArrow: palette.darkestNavy,
369369
confirmationSliderThumb: palette.darkMint,
370-
confirmationSliderTextDeactivated: palette.darkGray,
371-
confirmationThumbDeactivated: palette.darkGray,
370+
confirmationSliderTextDeactivated: palette.gray,
371+
confirmationThumbDeactivated: palette.gray,
372372
confirmationSliderWidth: deviceWidth >= 340 ? 295 : deviceWidth - 45,
373373
confirmationSliderThumbWidth: 55,
374374

@@ -500,6 +500,7 @@ export const edgeLight: Theme = {
500500
// UI 4.0:
501501

502502
badgeDot: palette.accentRed,
503+
badgeText: palette.white,
503504

504505
// Shadows
505506
iconShadow: {

‎src/theme/variables/testDark.ts‎

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,36 @@ const palette = {
3838

3939
darkMint: '#089e73',
4040
edgeMint: '#00f1a2',
41-
darkAqua: '#1b2f3b',
42-
navyAqua: '#121d25',
43-
navyAquaMiddle: '#11191f', // For vertical gradient
44-
navyAquaDarker: '#0E141A', // For vertical gradient
45-
blueGray: '#A4C7DF',
46-
gray: '#87939E',
47-
lightGray: '#D9E3ED',
48-
mutedBlue: '#2F5E89',
41+
42+
gray: '#888888',
43+
darkGray: '#494949',
44+
darkGrayOp30: 'hsla(0, 0%, 53%, 0.3)',
45+
lightGray: '#e2e2e2',
46+
47+
blueGray: '#D9E3ED',
48+
blueGrayOp75: 'rgba(217, 227, 237, .75)',
49+
blueGrayOp80: 'rgba(135, 147, 158, .8)',
50+
4951
accentGreen: '#77C513',
5052
accentRed: '#E85466',
5153
accentBlue: '#0073D9',
5254
accentOrange: '#F1AA19',
5355
darkBlueLightened: '#2B333A',
5456

55-
blackOp25: 'rgba(0, 0, 0, .25)',
57+
blackOp10: 'rgba(0, 0, 0, .1)',
58+
blackOp35: 'rgba(0, 0, 0, .25)',
5659
blackOp50: 'rgba(0, 0, 0, .5)',
60+
blackOp70: 'rgba(0, 0, 0, .7)',
5761
blackOp80: 'rgba(0, 0, 0, .8)',
5862

5963
whiteOp05: 'rgba(255, 255, 255, .05)',
6064
whiteOp10: 'rgba(255, 255, 255, .1)',
6165
whiteOp25: 'rgba(255, 255, 255, .25)',
66+
whiteOp37: 'rgba(255, 255, 255, .37)',
67+
whiteOp50: 'rgba(255, 255, 255, .5)',
6268
whiteOp75: 'rgba(255, 255, 255, .75)',
6369

64-
grayOp80: 'rgba(135, 147, 158, .8)',
6570
accentOrangeOp30: 'rgba(241, 170, 25, .3)',
66-
lightGrayOp75: 'rgba(217, 227, 237, .75)',
6771
transparent: 'rgba(255, 255, 255, 0)',
6872

6973
// Fonts
@@ -78,7 +82,7 @@ const palette = {
7882
skyBlue: '#3dd9f4',
7983
blackOp65: 'rgba(0, 0, 0, .65)',
8084
redOp60: 'rgba(232, 84, 102, .6)',
81-
grayOp70: 'rgba(135, 147, 158, .7)',
85+
blueGrayOp70: 'rgba(135, 147, 158, .7)',
8286
greenOp60: 'rgba(119, 197, 19, .6)',
8387
lightGreen: '#75C649',
8488
greenOp50: 'rgba(51, 183, 36, 0.5)',
@@ -141,12 +145,12 @@ export const testDark: Theme = {
141145
loadingIcon: palette.edgeMint,
142146

143147
// Background
144-
backgroundGradientColors: [palette.black, palette.black],
148+
backgroundGradientColors: [palette.backgroundBlack, palette.backgroundBlack],
145149
backgroundGradientStart: { x: 0, y: 0 },
146-
backgroundGradientEnd: { x: 1, y: 0 },
150+
backgroundGradientEnd: { x: 1, y: 1 },
147151
backgroundDots: {
148152
blurRadius: scale(80),
149-
dotOpacity: 0.25,
153+
dotOpacity: 0.1,
150154
dots: [
151155
{
152156
// Top-left:
@@ -172,29 +176,32 @@ export const testDark: Theme = {
172176
],
173177
assetOverrideDots: [undefined, { accentColor: 'iconAccentColor' }, null]
174178
},
175-
assetBackgroundGradientColors: [palette.darkAqua, palette.black],
179+
assetBackgroundGradientColors: [
180+
palette.backgroundBlack,
181+
palette.backgroundBlack
182+
],
176183
assetBackgroundGradientStart: { x: 0, y: 0 },
177184
assetBackgroundGradientEnd: { x: 0, y: 1 },
178-
assetBackgroundColorScale: 0.3,
185+
assetBackgroundColorScale: 0.1,
179186

180187
// Camera Overlay
181188
cameraOverlayColor: palette.black,
182189
cameraOverlayOpStart: 0.7,
183190
cameraOverlayOpEnd: 0.3,
184191

185192
// Modal
186-
modal: palette.navyAqua,
193+
modal: palette.backgroundBlack,
187194
modalCloseIcon: palette.edgeMint,
188195
modalBorderColor: palette.transparent,
189196
modalBorderWidth: 0,
190197
modalBorderRadiusRem: 1,
191-
modalBackground: palette.whiteOp10,
198+
modalBackground: palette.whiteOp37,
192199
modalSceneOverlayColor: palette.black,
193-
modalDragbarColor: palette.gray,
200+
modalDragbarColor: palette.darkGrayOp30,
194201

195202
modalLikeBackground: '#333232',
196203

197-
sideMenuBorderColor: palette.navyAqua,
204+
sideMenuBorderColor: palette.backgroundBlack,
198205
sideMenuBorderWidth: 0,
199206
sideMenuFont: palette.QuicksandMedium,
200207

@@ -204,18 +211,17 @@ export const testDark: Theme = {
204211
tileBackgroundMuted: palette.transparent,
205212

206213
// Section Lists
207-
// listSectionHeaderBackgroundGradientColors: [palette.navyAquaMiddle], // For vertical gradient
208214
listSectionHeaderBackgroundGradientColors: [`#000000aa`, `#00000000`],
209215
// Commenting out will remove background gradient:
210-
listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 },
211-
listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 },
216+
listSectionHeaderBackgroundGradientStart: null,
217+
listSectionHeaderBackgroundGradientEnd: null,
212218

213219
// Text
214220
primaryText: palette.white,
215221
secondaryText: palette.skyBlue,
216222
warningText: palette.accentOrange,
217223
positiveText: palette.accentGreen,
218-
negativeText: palette.gray,
224+
negativeText: palette.blueGray,
219225
negativeDeltaText: palette.accentRed,
220226
dangerText: palette.accentRed,
221227
textLink: palette.edgeMint,
@@ -335,7 +341,7 @@ export const testDark: Theme = {
335341
textShadowRadius: 3
336342
},
337343

338-
tabBarBackground: [palette.blackOp25, palette.blackOp50],
344+
tabBarBackground: [palette.transparent, palette.transparent],
339345
tabBarBackgroundStart: { x: 0, y: 0.5 },
340346
tabBarBackgroundEnd: { x: 0, y: 1 },
341347
tabBarTopOutlineColors: [`${palette.white}22`, `${palette.white}22`],
@@ -353,10 +359,10 @@ export const testDark: Theme = {
353359
toggleButtonOff: palette.gray,
354360

355361
// Confirmation slider
356-
confirmationSlider: palette.darkBlueLightened,
362+
confirmationSlider: palette.darkGray,
357363
confirmationSliderCompleted: palette.darkGreen,
358364
confirmationSliderText: palette.white,
359-
confirmationSliderArrow: palette.darkAqua,
365+
confirmationSliderArrow: palette.backgroundBlack,
360366
confirmationSliderThumb: palette.edgeMint,
361367
confirmationSliderTextDeactivated: palette.gray,
362368
confirmationThumbDeactivated: palette.gray,
@@ -365,7 +371,7 @@ export const testDark: Theme = {
365371

366372
// Lines
367373
lineDivider: palette.whiteOp10,
368-
titleLineDivider: palette.blueGray,
374+
titleLineDivider: palette.whiteOp10,
369375
thinLineWidth: 1,
370376
mediumLineWidth: 2,
371377
thickLineWidth: 3,
@@ -384,7 +390,7 @@ export const testDark: Theme = {
384390
dateModalTextLight: palette.accentBlue,
385391
dateModalTextDark: palette.white,
386392
dateModalBackgroundLight: palette.white,
387-
dateModalBackgroundDark: palette.darkAqua,
393+
dateModalBackgroundDark: palette.backgroundBlack,
388394

389395
// Wallet Icon Progress
390396
walletProgressIconFill: palette.edgeMint,
@@ -438,20 +444,20 @@ export const testDark: Theme = {
438444
textInputTextColor: palette.white,
439445
textInputTextColorDisabled: palette.gray,
440446
textInputTextColorFocused: palette.white,
441-
textInputBackgroundColor: palette.darkAqua,
442-
textInputBackgroundColorDisabled: palette.darkAqua,
443-
textInputBackgroundColorFocused: palette.darkAqua,
447+
textInputBackgroundColor: palette.graySecondary,
448+
textInputBackgroundColorDisabled: palette.transparent,
449+
textInputBackgroundColorFocused: palette.graySecondary,
444450
textInputBorderColor: `${palette.edgeMint}00`,
445-
textInputBorderColorDisabled: palette.gray,
451+
textInputBorderColorDisabled: palette.graySecondary,
446452
textInputBorderColorFocused: palette.edgeMint,
447453
textInputBorderRadius: 100,
448454
textInputBorderWidth: 1,
449-
textInputIconColor: palette.gray,
450-
textInputIconColorDisabled: palette.gray,
455+
textInputIconColor: palette.whiteOp50,
456+
textInputIconColorDisabled: palette.whiteOp50,
451457
textInputIconColorFocused: palette.edgeMint,
452-
textInputPlaceholderColor: palette.gray,
453-
textInputPlaceholderColorDisabled: palette.gray,
454-
textInputPlaceholderColorFocused: palette.edgeMint,
458+
textInputPlaceholderColor: palette.whiteOp50,
459+
textInputPlaceholderColorDisabled: palette.whiteOp50,
460+
textInputPlaceholderColorFocused: palette.whiteOp50,
455461
textInputSelectionColor: palette.whiteOp25,
456462

457463
// Animation
@@ -491,6 +497,7 @@ export const testDark: Theme = {
491497
// UI 4.0:
492498

493499
badgeDot: palette.accentRed,
500+
badgeText: palette.white,
494501

495502
// Shadows
496503
iconShadow: {
@@ -501,6 +508,7 @@ export const testDark: Theme = {
501508
},
502509
shadowOpacity: 0.6,
503510
shadowRadius: 4,
511+
// Disable Android shadow
504512
elevation: 0
505513
},
506514

@@ -586,10 +594,10 @@ export const testDark: Theme = {
586594

587595
txDirBgReceive: palette.greenOp60,
588596
txDirBgSend: palette.redOp60,
589-
txDirBgSwap: palette.grayOp70,
597+
txDirBgSwap: palette.blueGrayOp70,
590598
txDirFgReceive: palette.lightGreen,
591599
txDirFgSend: palette.lightRed,
592-
txDirFgSwap: palette.lightGray,
600+
txDirFgSwap: palette.blueGray,
593601

594602
giftCardOverlayGradient: {
595603
colors: [

‎src/theme/variables/testLight.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export const testLight: Theme = {
140140
// Icons
141141
icon: palette.darkestNavy,
142142
iconTappable: palette.darkMint,
143-
iconDeactivated: palette.whiteOp75,
143+
iconDeactivated: palette.darkestNavy,
144144
dangerIcon: palette.accentRed,
145145
warningIcon: palette.accentOrange,
146146
iconLoadingOverlay: palette.whiteOp75,
@@ -362,13 +362,13 @@ export const testLight: Theme = {
362362
toggleButtonOff: palette.darkGray,
363363

364364
// Confirmation slider
365-
confirmationSlider: palette.darkGray,
365+
confirmationSlider: palette.lightGray,
366366
confirmationSliderCompleted: palette.darkGreen,
367367
confirmationSliderText: palette.darkestNavy,
368-
confirmationSliderArrow: palette.backgroundWhite,
368+
confirmationSliderArrow: palette.darkestNavy,
369369
confirmationSliderThumb: palette.darkMint,
370-
confirmationSliderTextDeactivated: palette.darkGray,
371-
confirmationThumbDeactivated: palette.darkGray,
370+
confirmationSliderTextDeactivated: palette.gray,
371+
confirmationThumbDeactivated: palette.gray,
372372
confirmationSliderWidth: deviceWidth >= 340 ? 295 : deviceWidth - 45,
373373
confirmationSliderThumbWidth: 55,
374374

@@ -500,6 +500,7 @@ export const testLight: Theme = {
500500
// UI 4.0:
501501

502502
badgeDot: palette.accentRed,
503+
badgeText: palette.white,
503504

504505
// Shadows
505506
iconShadow: {

‎src/types/Theme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,7 @@ export interface Theme {
453453
// UI 4.0:
454454

455455
badgeDot: string
456+
badgeText: string
456457

457458
// Shadows
458459
iconShadow: ThemeShadowParams

0 commit comments

Comments
 (0)