From 38f42ff7d7c8b8675e5e1aad8658bf40dd78cb43 Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Thu, 11 Jan 2024 23:48:43 -0800 Subject: [PATCH 1/6] Remove unused theme params --- src/theme/variables/edgeDark.ts | 22 ---------------------- src/theme/variables/edgeLight.ts | 2 -- src/theme/variables/testDark.ts | 22 ---------------------- src/theme/variables/testLight.ts | 16 ---------------- src/types/Theme.ts | 22 ---------------------- 5 files changed, 84 deletions(-) diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 43f3e4feef4..90fbb4b70cd 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -127,8 +127,6 @@ export const edgeDark: Theme = { dangerIcon: palette.accentRed, warningIcon: palette.accentOrange, iconLoadingOverlay: palette.whiteOp75, - transactionListIconBackground: palette.darkAqua, - buySellCustomPluginModalIcon: palette.navyAqua, loadingIcon: palette.edgeMint, // Background @@ -180,7 +178,6 @@ export const edgeDark: Theme = { modalBorderWidth: 0, modalBorderRadiusRem: 1, - sideMenuColor: palette.navyAqua, sideMenuBorderColor: palette.navyAqua, sideMenuBorderWidth: 0, sideMenuFont: palette.QuicksandMedium, @@ -197,10 +194,6 @@ export const edgeDark: Theme = { // listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 }, // listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 }, - // WalletList - walletListBackground: palette.navyAqua, - walletListMutedBackground: palette.navyAqua, - // Text primaryText: palette.white, secondaryText: palette.skyBlue, @@ -384,9 +377,6 @@ export const edgeDark: Theme = { // Settings Row settingsRowBackground: palette.transparent, settingsRowPressed: palette.transparent, - settingsRowHeaderBackground: [palette.navyAqua, palette.navyAqua], - settingsRowHeaderBackgroundStart: { x: 0, y: 0 }, - settingsRowHeaderBackgroundEnd: { x: 1, y: 1 }, settingsRowHeaderFont: palette.QuicksandMedium, settingsRowHeaderFontSizeRem: 1, settingsRowSubHeader: palette.transparent, @@ -405,7 +395,6 @@ export const edgeDark: Theme = { // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, - flipInputBorder: palette.blueGray, // Fonts fontFaceDefault: palette.QuicksandRegular, @@ -440,17 +429,6 @@ export const edgeDark: Theme = { inputAccessoryBackground: palette.white, inputAccessoryText: palette.accentBlue, - // Outline Text Input - outlineTextInputColor: palette.transparent, - outlineTextInputTextColor: palette.white, - outlineTextInputBorderWidth: 1, - outlineTextInputBorderColor: palette.blueGray, - outlineTextInputBorderColorDisabled: palette.gray, - outlineTextInputBorderColorFocused: palette.edgeMint, - outlineTextInputLabelColor: palette.blueGray, - outlineTextInputLabelColorDisabled: palette.gray, - outlineTextInputLabelColorFocused: palette.edgeMint, - // Simple Text Input textInputTextColor: palette.white, textInputTextColorDisabled: palette.gray, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index ad483dd9a63..0d3bb53e4a4 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -121,8 +121,6 @@ export const edgeLight: Theme = { dangerIcon: palette.accentRed, warningIcon: palette.accentOrange, iconLoadingOverlay: palette.whiteOp75, - transactionListIconBackground: palette.white, - buySellCustomPluginModalIcon: palette.white, loadingIcon: palette.edgeBlue, // Background diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index 132f3fc9226..417cc913e74 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -127,8 +127,6 @@ export const testDark: Theme = { dangerIcon: palette.accentRed, warningIcon: palette.accentOrange, iconLoadingOverlay: palette.whiteOp75, - transactionListIconBackground: palette.darkAqua, - buySellCustomPluginModalIcon: palette.navyAqua, loadingIcon: palette.edgeMint, // Background @@ -180,7 +178,6 @@ export const testDark: Theme = { modalBorderWidth: 0, modalBorderRadiusRem: 1, - sideMenuColor: palette.navyAqua, sideMenuBorderColor: palette.navyAqua, sideMenuBorderWidth: 0, sideMenuFont: palette.QuicksandMedium, @@ -197,10 +194,6 @@ export const testDark: Theme = { // listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 }, // listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 }, - // WalletList - walletListBackground: palette.navyAqua, - walletListMutedBackground: palette.navyAqua, - // Text primaryText: palette.white, secondaryText: palette.skyBlue, @@ -384,9 +377,6 @@ export const testDark: Theme = { // Settings Row settingsRowBackground: palette.transparent, settingsRowPressed: palette.transparent, - settingsRowHeaderBackground: [palette.navyAqua, palette.navyAqua], - settingsRowHeaderBackgroundStart: { x: 0, y: 0 }, - settingsRowHeaderBackgroundEnd: { x: 1, y: 1 }, settingsRowHeaderFont: palette.QuicksandMedium, settingsRowHeaderFontSizeRem: 1, settingsRowSubHeader: palette.transparent, @@ -405,7 +395,6 @@ export const testDark: Theme = { // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, - flipInputBorder: palette.blueGray, // Fonts fontFaceDefault: palette.QuicksandRegular, @@ -440,17 +429,6 @@ export const testDark: Theme = { inputAccessoryBackground: palette.white, inputAccessoryText: palette.accentBlue, - // Outline Text Input - outlineTextInputColor: palette.transparent, - outlineTextInputTextColor: palette.white, - outlineTextInputBorderWidth: 1, - outlineTextInputBorderColor: palette.blueGray, - outlineTextInputBorderColorDisabled: palette.gray, - outlineTextInputBorderColorFocused: palette.edgeMint, - outlineTextInputLabelColor: palette.blueGray, - outlineTextInputLabelColorDisabled: palette.gray, - outlineTextInputLabelColorFocused: palette.edgeMint, - // Simple Text Input textInputTextColor: palette.white, textInputTextColorDisabled: palette.gray, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 73b904c81a9..2d39df838e6 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -121,8 +121,6 @@ export const testLight: Theme = { dangerIcon: palette.accentRed, warningIcon: palette.accentOrange, iconLoadingOverlay: palette.whiteOp75, - transactionListIconBackground: palette.white, - buySellCustomPluginModalIcon: palette.white, loadingIcon: palette.edgeBlue, // Background @@ -355,9 +353,6 @@ export const testLight: Theme = { // Settings Row settingsRowBackground: palette.white, settingsRowPressed: palette.transparent, - settingsRowHeaderBackground: [palette.lightGray, palette.lightGray], - settingsRowHeaderBackgroundStart: { x: 0, y: 0 }, - settingsRowHeaderBackgroundEnd: { x: 1, y: 1 }, settingsRowHeaderFont: palette.QuicksandMedium, settingsRowHeaderFontSizeRem: 1, settingsRowSubHeader: palette.transparent, @@ -411,17 +406,6 @@ export const testLight: Theme = { inputAccessoryBackground: palette.white, inputAccessoryText: palette.accentBlue, - // Outline Text Input - outlineTextInputColor: palette.transparent, - outlineTextInputTextColor: palette.black, - outlineTextInputBorderWidth: 1, - outlineTextInputBorderColor: palette.gray, - outlineTextInputBorderColorDisabled: palette.gray, - outlineTextInputBorderColorFocused: palette.edgeBlue, - outlineTextInputLabelColor: palette.gray, - outlineTextInputLabelColorDisabled: palette.gray, - outlineTextInputLabelColorFocused: palette.edgeBlue, - // Simple Text Input textInputTextColor: palette.gray, textInputTextColorDisabled: palette.white, diff --git a/src/types/Theme.ts b/src/types/Theme.ts index f930eeeaa03..7f67c03d747 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -93,8 +93,6 @@ export interface Theme { warningIcon: string dangerIcon: string iconLoadingOverlay: string - transactionListIconBackground: string - buySellCustomPluginModalIcon: string loadingIcon: string // Background @@ -124,7 +122,6 @@ export interface Theme { modalBorderWidth: number modalBorderRadiusRem: number - sideMenuColor: string sideMenuBorderColor: string sideMenuBorderWidth: number sideMenuFont: string @@ -148,16 +145,9 @@ export interface Theme { // - otpSettingsKey // - tileComponent - // WalletList - walletListBackground: string - walletListMutedBackground: string - // Settings Row settingsRowBackground: string settingsRowPressed: string - settingsRowHeaderBackground: string[] - settingsRowHeaderBackgroundStart: GradientCoords - settingsRowHeaderBackgroundEnd: GradientCoords settingsRowHeaderFont: string settingsRowHeaderFontSizeRem: number @@ -349,7 +339,6 @@ export interface Theme { // pressedOpacity: number, searchListRefreshControlIndicator: string clipboardPopupText: string - flipInputBorder: string // Fonts fontFaceDefault: string @@ -384,17 +373,6 @@ export interface Theme { inputAccessoryBackground: string inputAccessoryText: string - // Outline Text Input - outlineTextInputColor: string - outlineTextInputTextColor: string - outlineTextInputBorderWidth: number - outlineTextInputBorderColor: string - outlineTextInputBorderColorDisabled: string - outlineTextInputBorderColorFocused: string - outlineTextInputLabelColor: string - outlineTextInputLabelColorDisabled: string - outlineTextInputLabelColorFocused: string - // Text Input textInputTextColor: string textInputTextColorDisabled: string From af279aaa7577908e2c3086b50e446ff0eb37c390 Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Sat, 13 Jan 2024 09:21:22 -0800 Subject: [PATCH 2/6] Fix broken theme files ts-expect-error was hiding errors --- src/theme/variables/edgeLight.ts | 23 +---------------------- src/theme/variables/testLight.ts | 9 +-------- 2 files changed, 2 insertions(+), 30 deletions(-) diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 0d3bb53e4a4..487745571a1 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -148,14 +148,11 @@ export const edgeLight: Theme = { // Modal modal: palette.lightestGray, - // @ts-expect-error - modalBlurType: 'dark', modalCloseIcon: palette.edgeMint, modalBorderColor: palette.transparent, modalBorderWidth: 0, modalBorderRadiusRem: 1, - sideMenuColor: palette.lightestGray, sideMenuBorderColor: palette.transparent, sideMenuBorderWidth: 0, sideMenuFont: palette.QuicksandMedium, @@ -168,10 +165,6 @@ export const edgeLight: Theme = { // Section Lists listSectionHeaderBackgroundGradientColors: [palette.transparent], - // WalletList - walletListBackground: palette.edgeBlue, - walletListMutedBackground: palette.mutedBlue, - // Text primaryText: palette.black, secondaryText: palette.gray, @@ -181,6 +174,7 @@ export const edgeLight: Theme = { dangerText: palette.accentRed, textLink: palette.edgeBlue, deactivatedText: palette.gray, + emphasizedText: palette.edgeMint, // listHeaderText: palette.black, // Header @@ -353,9 +347,6 @@ export const edgeLight: Theme = { // Settings Row settingsRowBackground: palette.white, settingsRowPressed: palette.transparent, - settingsRowHeaderBackground: [palette.lightGray, palette.lightGray], - settingsRowHeaderBackgroundStart: { x: 0, y: 0 }, - settingsRowHeaderBackgroundEnd: { x: 1, y: 1 }, settingsRowHeaderFont: palette.QuicksandMedium, settingsRowHeaderFontSizeRem: 1, settingsRowSubHeader: palette.transparent, @@ -374,7 +365,6 @@ export const edgeLight: Theme = { // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, - flipInputBorder: palette.edgeBlue, // Fonts fontFaceDefault: palette.QuicksandRegular, @@ -409,17 +399,6 @@ export const edgeLight: Theme = { inputAccessoryBackground: palette.white, inputAccessoryText: palette.accentBlue, - // Outline Text Input - outlineTextInputColor: palette.transparent, - outlineTextInputTextColor: palette.black, - outlineTextInputBorderWidth: 1, - outlineTextInputBorderColor: palette.gray, - outlineTextInputBorderColorDisabled: palette.gray, - outlineTextInputBorderColorFocused: palette.edgeBlue, - outlineTextInputLabelColor: palette.gray, - outlineTextInputLabelColorDisabled: palette.gray, - outlineTextInputLabelColorFocused: palette.edgeBlue, - // Simple Text Input textInputTextColor: palette.gray, textInputTextColorDisabled: palette.white, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 2d39df838e6..10e1e7f759a 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -148,14 +148,11 @@ export const testLight: Theme = { // Modal modal: palette.lightestGray, - // @ts-expect-error - modalBlurType: 'dark', modalCloseIcon: palette.edgeMint, modalBorderColor: palette.transparent, modalBorderWidth: 0, modalBorderRadiusRem: 1, - sideMenuColor: palette.lightestGray, sideMenuBorderColor: palette.transparent, sideMenuBorderWidth: 0, sideMenuFont: palette.QuicksandMedium, @@ -168,10 +165,6 @@ export const testLight: Theme = { // Section Lists listSectionHeaderBackgroundGradientColors: [palette.transparent], - // WalletList - walletListBackground: palette.edgeBlue, - walletListMutedBackground: palette.mutedBlue, - // Text primaryText: palette.black, secondaryText: palette.gray, @@ -181,6 +174,7 @@ export const testLight: Theme = { dangerText: palette.accentRed, textLink: palette.edgeBlue, deactivatedText: palette.gray, + emphasizedText: palette.edgeMint, // listHeaderText: palette.black, // Header @@ -371,7 +365,6 @@ export const testLight: Theme = { // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, - flipInputBorder: palette.edgeBlue, // Fonts fontFaceDefault: palette.QuicksandRegular, From 809d95a365242652eb95cd6ae7459f1e8799bfbc Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Sat, 13 Jan 2024 09:26:19 -0800 Subject: [PATCH 3/6] Don't make any theme params optional This ensures every theme has the parameters even if disabled --- src/theme/variables/edgeDark.ts | 5 ++--- src/theme/variables/edgeLight.ts | 2 ++ src/theme/variables/testDark.ts | 4 ++-- src/theme/variables/testLight.ts | 2 ++ src/types/Theme.ts | 4 ++-- 5 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 90fbb4b70cd..543de61d5de 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -188,11 +188,10 @@ export const edgeDark: Theme = { tileBackgroundMuted: palette.transparent, // Section Lists - // listSectionHeaderBackgroundGradientColors: [palette.navyAquaMiddle], // For vertical gradient listSectionHeaderBackgroundGradientColors: [`#000000aa`, `#00000000`], // Commenting out will remove background gradient: - // listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 }, - // listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 }, + listSectionHeaderBackgroundGradientStart: null, + listSectionHeaderBackgroundGradientEnd: null, // Text primaryText: palette.white, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 487745571a1..bc610cf25cb 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -164,6 +164,8 @@ export const edgeLight: Theme = { // Section Lists listSectionHeaderBackgroundGradientColors: [palette.transparent], + listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 }, + listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 }, // Text primaryText: palette.black, diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index 417cc913e74..e180419237b 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -191,8 +191,8 @@ export const testDark: Theme = { // listSectionHeaderBackgroundGradientColors: [palette.navyAquaMiddle], // For vertical gradient listSectionHeaderBackgroundGradientColors: [`#000000aa`, `#00000000`], // Commenting out will remove background gradient: - // listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 }, - // listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 }, + listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 }, + listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 }, // Text primaryText: palette.white, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 10e1e7f759a..9c65d268de3 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -164,6 +164,8 @@ export const testLight: Theme = { // Section Lists listSectionHeaderBackgroundGradientColors: [palette.transparent], + listSectionHeaderBackgroundGradientStart: { x: 0, y: 0 }, + listSectionHeaderBackgroundGradientEnd: { x: 1, y: 0 }, // Text primaryText: palette.black, diff --git a/src/types/Theme.ts b/src/types/Theme.ts index 7f67c03d747..ab34fb61b48 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -133,8 +133,8 @@ export interface Theme { // Section Lists listSectionHeaderBackgroundGradientColors: string[] - listSectionHeaderBackgroundGradientStart?: { x: number; y: number } - listSectionHeaderBackgroundGradientEnd?: { x: number; y: number } + listSectionHeaderBackgroundGradientStart: { x: number; y: number } | null + listSectionHeaderBackgroundGradientEnd: { x: number; y: number } | null // NOTE: List of components/screens that uses the tileBackground // - promoCard From 7ba24662b64773b996c1a155826572f1709b6331 Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Sat, 13 Jan 2024 09:30:24 -0800 Subject: [PATCH 4/6] Remove commented lines from theme files --- src/theme/variables/edgeDark.ts | 31 ---------------------- src/theme/variables/edgeLight.ts | 44 -------------------------------- src/theme/variables/testDark.ts | 31 ---------------------- src/theme/variables/testLight.ts | 44 -------------------------------- 4 files changed, 150 deletions(-) diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 543de61d5de..ec53b341986 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -203,7 +203,6 @@ export const edgeDark: Theme = { textLink: palette.edgeMint, deactivatedText: palette.gray, emphasizedText: palette.edgeMint, - // listHeaderText: palette.white, // Header headerIcon: edgeMark, @@ -294,8 +293,6 @@ export const edgeDark: Theme = { dropdownText: palette.white, // Card - // cardBackground: palette.edgeBlue, - // cardShadow: palette.blackOp25, cardBorder: 1, cardBorderColor: palette.whiteOp10, cardBorderRadius: 16, @@ -322,17 +319,8 @@ export const edgeDark: Theme = { shimmerBackgroundColor: palette.whiteOp05, shimmerBackgroundHighlight: palette.whiteOp10, - // pinOutline: palette.white, - // pinFilled: palette.white, - - // radioButtonOutline: palette.lightGray, - // radioButtonFilled: palette.edgeMint, - toggleButton: palette.edgeMint, toggleButtonOff: palette.gray, - // toggleButtonThumb: palette.white, - - // warningBubble: palette.accentOrange, // Confirmation slider confirmationSlider: palette.darkBlueLightened, @@ -347,9 +335,6 @@ export const edgeDark: Theme = { // Lines lineDivider: palette.whiteOp10, titleLineDivider: palette.blueGray, - // textInputLine: palette.blueGray, - // orLine: palette.blueGray, - // tileDivider: palette.blueGray, thinLineWidth: 1, mediumLineWidth: 2, thickLineWidth: 3, @@ -358,21 +343,6 @@ export const edgeDark: Theme = { dividerLineHeight: 1, dividerLineColors: [palette.whiteOp10, palette.whiteOp10], - // Notifications - // notificationBackground: palette.lightGrayOp75, - // messageBanner: palette.grayOp80, - // bubble: palette.whiteOp10, - - // Alert Modal - // securityAlertModalHeaderIcon: palette.accentOrange, - // securityAlertModalRowBorder: palette.lightGray, - // securityAlertModalWarningIcon: palette.accentOrange, - // securityAlertModalDangerIcon: palette.accentRed, - // securityAlertModalBackground: palette.white, - // securityAlertModalText: palette.black, - // securityAlertModalLine: palette.lightGray, - // securityAlertModalHeaderIconShadow: palette.accentOrangeOp30, - // Settings Row settingsRowBackground: palette.transparent, settingsRowPressed: palette.transparent, @@ -391,7 +361,6 @@ export const edgeDark: Theme = { walletProgressIconDone: palette.white, // Misc - // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index bc610cf25cb..827945f3b89 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -177,7 +177,6 @@ export const edgeLight: Theme = { textLink: palette.edgeBlue, deactivatedText: palette.gray, emphasizedText: palette.edgeMint, - // listHeaderText: palette.black, // Header headerIcon: edgeMark, @@ -253,22 +252,7 @@ export const edgeLight: Theme = { dropdownError: palette.accentRed, dropdownText: palette.white, - // tertiaryButtonOutline: palette.edgeBlue, - // tertiaryButton: palette.transparent, - // tertiaryButtonText: palette.edgeBlue, - - // glassButton: palette.blackOp10, - // glassButtonDark: palette.blackOp50, - // glassButtonDarkIcon: palette.white, - // glassButtonIcon: palette.edgeBlue, - - // dangerButtonOutline: palette.transparent, - // dangerButton: palette.accentRed, - // dangerButtonText: palette.white, - // Card - // cardBackground: palette.white, - // cardShadow: palette.blackOp25, cardBorder: 1, cardBorderColor: palette.whiteOp10, cardBorderRadius: 16, @@ -295,17 +279,8 @@ export const edgeLight: Theme = { shimmerBackgroundColor: palette.whiteOp05, shimmerBackgroundHighlight: palette.whiteOp10, - // pinOutline: palette.edgeBlue, - // pinFilled: palette.edgeBlue, - - // radioButtonOutline: palette.edgeNavy, - // radioButtonFilled: palette.edgeBlue, - toggleButton: palette.accentGreen, toggleButtonOff: palette.gray, - // toggleButtonThumb: palette.white, - - // warningBubble: palette.accentOrange, // Confirmation slider confirmationSlider: palette.blackOp10, @@ -320,9 +295,6 @@ export const edgeLight: Theme = { // Lines lineDivider: palette.edgeBlue, titleLineDivider: palette.edgeBlue, - // textInputLine: palette.gray, - // orLine: palette.gray, - // tileDivider: palette.gray, thinLineWidth: 1, mediumLineWidth: 2, thickLineWidth: 3, @@ -331,21 +303,6 @@ export const edgeLight: Theme = { dividerLineHeight: 1, dividerLineColors: [palette.edgeBlue, palette.edgeBlue], - // Notifications - // notificationBackground: palette.grayOp80, - // messageBanner: palette.grayOp80, - // bubble: palette.whiteOp10, - - // Alert Modal - // securityAlertModalHeaderIcon: palette.accentOrange, - // securityAlertModalRowBorder: palette.lightGray, - // securityAlertModalWarningIcon: palette.accentOrange, - // securityAlertModalDangerIcon: palette.accentRed, - // securityAlertModalBackground: palette.white, - // securityAlertModalText: palette.black, - // securityAlertModalLine: palette.lightGray, - // securityAlertModalHeaderIconShadow: palette.accentOrangeOp30, - // Settings Row settingsRowBackground: palette.white, settingsRowPressed: palette.transparent, @@ -364,7 +321,6 @@ export const edgeLight: Theme = { walletProgressIconDone: palette.white, // Misc - // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index e180419237b..7f147cf4106 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -204,7 +204,6 @@ export const testDark: Theme = { textLink: palette.edgeMint, deactivatedText: palette.gray, emphasizedText: palette.edgeMint, - // listHeaderText: palette.white, // Header headerIcon: edgeMark, @@ -295,8 +294,6 @@ export const testDark: Theme = { dropdownText: palette.white, // Card - // cardBackground: palette.edgeBlue, - // cardShadow: palette.blackOp25, cardBorder: 1, cardBorderColor: palette.whiteOp10, cardBorderRadius: 16, @@ -323,17 +320,8 @@ export const testDark: Theme = { shimmerBackgroundColor: palette.whiteOp05, shimmerBackgroundHighlight: palette.whiteOp10, - // pinOutline: palette.white, - // pinFilled: palette.white, - - // radioButtonOutline: palette.lightGray, - // radioButtonFilled: palette.edgeMint, - toggleButton: palette.edgeMint, toggleButtonOff: palette.gray, - // toggleButtonThumb: palette.white, - - // warningBubble: palette.accentOrange, // Confirmation slider confirmationSlider: palette.darkBlueLightened, @@ -348,9 +336,6 @@ export const testDark: Theme = { // Lines lineDivider: palette.whiteOp10, titleLineDivider: palette.blueGray, - // textInputLine: palette.blueGray, - // orLine: palette.blueGray, - // tileDivider: palette.blueGray, thinLineWidth: 1, mediumLineWidth: 2, thickLineWidth: 3, @@ -359,21 +344,6 @@ export const testDark: Theme = { dividerLineHeight: 1, dividerLineColors: [palette.whiteOp10, palette.whiteOp10], - // Notifications - // notificationBackground: palette.lightGrayOp75, - // messageBanner: palette.grayOp80, - // bubble: palette.whiteOp10, - - // Alert Modal - // securityAlertModalHeaderIcon: palette.accentOrange, - // securityAlertModalRowBorder: palette.lightGray, - // securityAlertModalWarningIcon: palette.accentOrange, - // securityAlertModalDangerIcon: palette.accentRed, - // securityAlertModalBackground: palette.white, - // securityAlertModalText: palette.black, - // securityAlertModalLine: palette.lightGray, - // securityAlertModalHeaderIconShadow: palette.accentOrangeOp30, - // Settings Row settingsRowBackground: palette.transparent, settingsRowPressed: palette.transparent, @@ -392,7 +362,6 @@ export const testDark: Theme = { walletProgressIconDone: palette.white, // Misc - // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 9c65d268de3..944f2accac0 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -177,7 +177,6 @@ export const testLight: Theme = { textLink: palette.edgeBlue, deactivatedText: palette.gray, emphasizedText: palette.edgeMint, - // listHeaderText: palette.black, // Header headerIcon: edgeMark, @@ -253,22 +252,7 @@ export const testLight: Theme = { dropdownError: palette.accentRed, dropdownText: palette.white, - // tertiaryButtonOutline: palette.edgeBlue, - // tertiaryButton: palette.transparent, - // tertiaryButtonText: palette.edgeBlue, - - // glassButton: palette.blackOp10, - // glassButtonDark: palette.blackOp50, - // glassButtonDarkIcon: palette.white, - // glassButtonIcon: palette.edgeBlue, - - // dangerButtonOutline: palette.transparent, - // dangerButton: palette.accentRed, - // dangerButtonText: palette.white, - // Card - // cardBackground: palette.white, - // cardShadow: palette.blackOp25, cardBorder: 1, cardBorderColor: palette.whiteOp10, cardBorderRadius: 16, @@ -295,17 +279,8 @@ export const testLight: Theme = { shimmerBackgroundColor: palette.whiteOp05, shimmerBackgroundHighlight: palette.whiteOp10, - // pinOutline: palette.edgeBlue, - // pinFilled: palette.edgeBlue, - - // radioButtonOutline: palette.edgeNavy, - // radioButtonFilled: palette.edgeBlue, - toggleButton: palette.accentGreen, toggleButtonOff: palette.gray, - // toggleButtonThumb: palette.white, - - // warningBubble: palette.accentOrange, // Confirmation slider confirmationSlider: palette.blackOp10, @@ -320,9 +295,6 @@ export const testLight: Theme = { // Lines lineDivider: palette.edgeBlue, titleLineDivider: palette.edgeBlue, - // textInputLine: palette.gray, - // orLine: palette.gray, - // tileDivider: palette.gray, thinLineWidth: 1, mediumLineWidth: 2, thickLineWidth: 3, @@ -331,21 +303,6 @@ export const testLight: Theme = { dividerLineHeight: 1, dividerLineColors: [palette.edgeBlue, palette.edgeBlue], - // Notifications - // notificationBackground: palette.grayOp80, - // messageBanner: palette.grayOp80, - // bubble: palette.whiteOp10, - - // Alert Modal - // securityAlertModalHeaderIcon: palette.accentOrange, - // securityAlertModalRowBorder: palette.lightGray, - // securityAlertModalWarningIcon: palette.accentOrange, - // securityAlertModalDangerIcon: palette.accentRed, - // securityAlertModalBackground: palette.white, - // securityAlertModalText: palette.black, - // securityAlertModalLine: palette.lightGray, - // securityAlertModalHeaderIconShadow: palette.accentOrangeOp30, - // Settings Row settingsRowBackground: palette.white, settingsRowPressed: palette.transparent, @@ -364,7 +321,6 @@ export const testLight: Theme = { walletProgressIconDone: palette.white, // Misc - // pressedOpacity: 0.25, // Should be removed when press colors are given to buttons and links searchListRefreshControlIndicator: palette.transparent, clipboardPopupText: palette.black, From 74ae98b31a0905d8033a0e4c09a0aab31eed0822 Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Sat, 13 Jan 2024 11:23:28 -0800 Subject: [PATCH 5/6] Tweak colors Per live discussion with design, these were the decided color values --- .../LineTextDivider.test.tsx.snap | 4 +- .../__snapshots__/CategoryModal.test.tsx.snap | 22 +-- .../__snapshots__/HelpModal.test.tsx.snap | 9 +- .../WalletListModal.test.tsx.snap | 12 +- ...reateWalletAccountSetupScene.test.tsx.snap | 4 +- .../CreateWalletImportScene.test.tsx.snap | 4 +- ...reateWalletSelectCryptoScene.test.tsx.snap | 4 +- .../CreateWalletSelectFiatScene.test.tsx.snap | 2 +- .../CryptoExchangeQuoteScene.test.tsx.snap | 18 +-- .../CurrencyNotificationScene.test.tsx.snap | 10 +- .../CurrencySettings.ui.test.tsx.snap | 2 +- .../EdgeLoginScene.test.tsx.snap | 2 +- .../FioAddressRegisterScene.test.tsx.snap | 2 +- .../FioDomainRegisterScene.test.tsx.snap | 2 +- .../__snapshots__/RequestScene.test.tsx.snap | 2 +- .../__snapshots__/SendScene2.ui.test.tsx.snap | 148 +++++++++--------- .../__snapshots__/SettingsScene.test.tsx.snap | 62 ++++---- .../TransactionDetailsScene.test.tsx.snap | 10 +- src/components/themed/SafeSlider.tsx | 2 +- src/components/themed/Slider.tsx | 2 +- src/components/ui4/CryptoIconUi4.tsx | 2 +- src/components/ui4/ModalUi4.tsx | 8 +- src/theme/variables/edgeDark.ts | 48 +++--- src/theme/variables/edgeLight.ts | 8 +- src/theme/variables/testDark.ts | 6 +- src/theme/variables/testLight.ts | 6 +- src/types/Theme.ts | 11 +- 27 files changed, 214 insertions(+), 198 deletions(-) diff --git a/src/__tests__/components/__snapshots__/LineTextDivider.test.tsx.snap b/src/__tests__/components/__snapshots__/LineTextDivider.test.tsx.snap index e952169e307..72cde2f8e42 100644 --- a/src/__tests__/components/__snapshots__/LineTextDivider.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/LineTextDivider.test.tsx.snap @@ -16,7 +16,7 @@ exports[`LineTextDivider should render with loading props 1`] = ` @@ -443,12 +443,12 @@ exports[`CurrencyNotificationComponent should render with loading props 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> diff --git a/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap index fccf9de5ceb..c880c26c197 100644 --- a/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CurrencySettings.ui.test.tsx.snap @@ -154,7 +154,7 @@ exports[`CurrencySettings should render 1`] = ` "type": 0, } } - opacity={0.25} + opacity={0.1} > diff --git a/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap index d13bd3ff8d0..a55c1840211 100644 --- a/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/FioDomainRegisterScene.test.tsx.snap @@ -97,7 +97,7 @@ exports[`FioDomainRegister should render with loading props 1`] = ` diff --git a/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap index bcd8bd14d7d..ba9ddbdc88c 100644 --- a/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/RequestScene.test.tsx.snap @@ -9,7 +9,7 @@ exports[`Request should render with loaded props 1`] = ` } backgroundGradientColors={ [ - "#1b2f3b", + "#1a1a1a", "#1a1a1a", ] } diff --git a/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap b/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap index 966c7bab48e..4296fedbfa7 100644 --- a/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/SendScene2.ui.test.tsx.snap @@ -5,7 +5,7 @@ exports[`SendScene2 1 spendTarget 1`] = ` @@ -1895,12 +1895,12 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -2022,12 +2022,12 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -2515,12 +2515,12 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -2642,12 +2642,12 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -3135,12 +3135,12 @@ exports[`MyComponent should render Locked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -3588,7 +3588,7 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = ` "type": 0, } } - opacity={0.25} + opacity={0.1} > @@ -5329,12 +5329,12 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -5456,12 +5456,12 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -5949,12 +5949,12 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -6076,12 +6076,12 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> @@ -6569,12 +6569,12 @@ exports[`MyComponent should render UnLocked SettingsOverview 1`] = ` "width": 51, }, { - "backgroundColor": "#87939E", + "backgroundColor": "#888888", "borderRadius": 16, }, ] } - tintColor="#87939E" + tintColor="#888888" value={true} /> diff --git a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap index b98e269b99b..1a6cd92bf36 100644 --- a/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/TransactionDetailsScene.test.tsx.snap @@ -5,7 +5,7 @@ exports[`TransactionDetailsScene should render 1`] = ` ({ }, slider: { borderRadius: theme.confirmationSliderThumbWidth / 2, - backgroundColor: theme.confirmationSlider, + backgroundColor: theme.confirmationSliderCompleted, justifyContent: 'center', height: theme.confirmationSliderThumbWidth, width: theme.confirmationSliderWidth diff --git a/src/components/themed/Slider.tsx b/src/components/themed/Slider.tsx index 92475e7a79f..5b7befc09dc 100644 --- a/src/components/themed/Slider.tsx +++ b/src/components/themed/Slider.tsx @@ -144,7 +144,7 @@ const getStyles = cacheStyles((theme: Theme) => ({ }, slider: { borderRadius: theme.confirmationSliderThumbWidth / 2, - backgroundColor: theme.confirmationSlider, + backgroundColor: theme.confirmationSliderCompleted, justifyContent: 'center', height: theme.confirmationSliderThumbWidth, width: theme.confirmationSliderWidth diff --git a/src/components/ui4/CryptoIconUi4.tsx b/src/components/ui4/CryptoIconUi4.tsx index 5022fe32e65..126277e8566 100644 --- a/src/components/ui4/CryptoIconUi4.tsx +++ b/src/components/ui4/CryptoIconUi4.tsx @@ -122,7 +122,7 @@ export const CryptoIconUi4 = (props: Props) => { onIconColor(colors.primary) } if (colors.platform === 'android') { - onIconColor(colors.vibrant) + onIconColor(colors.darkVibrant) } }) .catch(err => { diff --git a/src/components/ui4/ModalUi4.tsx b/src/components/ui4/ModalUi4.tsx index 0eefe82fba1..e754bd37daf 100644 --- a/src/components/ui4/ModalUi4.tsx +++ b/src/components/ui4/ModalUi4.tsx @@ -12,6 +12,7 @@ import { fixSides, mapSides, sidesToMargin } from '../../util/sides' import { maybeComponent } from '../hoc/maybeComponent' import { Theme, useTheme } from '../services/ThemeContext' +const BACKGROUND_ALPHA = 0.7 export interface ModalPropsUi4 { bridge: AirshipBridge children?: React.ReactNode @@ -67,7 +68,7 @@ export function ModalUi4(props: ModalPropsUi4): JSX.Element { React.useEffect(() => { // Animate in: - opacity.value = withTiming(1, { duration }) + opacity.value = withTiming(BACKGROUND_ALPHA, { duration }) offset.value = withTiming(0, { duration }) // Animate out: @@ -124,7 +125,7 @@ export function ModalUi4(props: ModalPropsUi4): JSX.Element { {/* Need another Biew here because BlurView doesn't accept rounded corners in its styling */} - + @@ -155,7 +156,8 @@ const getStyles = cacheStyles((theme: Theme) => ({ left: 0, position: 'absolute', right: 0, - top: 0 + top: 0, + backgroundColor: theme.modalSceneOverlayColor }, body: { alignSelf: 'flex-end', diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index ec53b341986..ce332298dd9 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -35,14 +35,9 @@ const palette = { darkMint: '#089e73', edgeMint: '#00f1a2', - darkAqua: '#1b2f3b', - navyAqua: '#121d25', - navyAquaMiddle: '#11191f', // For vertical gradient - navyAquaDarker: '#0E141A', // For vertical gradient - blueGray: '#A4C7DF', - gray: '#87939E', + gray: '#888888', + darkGrey: '#333333', lightGray: '#D9E3ED', - mutedBlue: '#2F5E89', accentGreen: '#77C513', accentRed: '#E85466', accentBlue: '#0073D9', @@ -51,9 +46,12 @@ const palette = { blackOp25: 'rgba(0, 0, 0, .25)', blackOp50: 'rgba(0, 0, 0, .5)', + blackOp70: 'rgba(0, 0, 0, .7)', whiteOp05: 'rgba(255, 255, 255, .05)', whiteOp10: 'rgba(255, 255, 255, .1)', + whiteOp37: 'rgba(255, 255, 255, .37)', + whiteOp50: 'rgba(255, 255, 255, .5)', whiteOp75: 'rgba(255, 255, 255, .75)', grayOp80: 'rgba(135, 147, 158, .8)', @@ -135,7 +133,7 @@ export const edgeDark: Theme = { backgroundGradientEnd: { x: 1, y: 1 }, backgroundDots: { blurRadius: scale(80), - dotOpacity: 0.25, + dotOpacity: 0.1, dots: [ { // Top-left: @@ -161,7 +159,7 @@ export const edgeDark: Theme = { ], assetOverrideDots: [undefined, { accentColor: 'iconAccentColor' }, null] }, - assetBackgroundGradientColors: [palette.darkAqua, palette.backgroundBlack], + assetBackgroundGradientColors: [palette.backgroundBlack, palette.backgroundBlack], assetBackgroundGradientStart: { x: 0, y: 0 }, assetBackgroundGradientEnd: { x: 0, y: 1 }, assetBackgroundColorScale: 0.1, @@ -172,13 +170,16 @@ export const edgeDark: Theme = { cameraOverlayOpEnd: 0.3, // Modal - modal: palette.navyAqua, + modal: palette.backgroundBlack, modalCloseIcon: palette.edgeMint, modalBorderColor: palette.transparent, modalBorderWidth: 0, modalBorderRadiusRem: 1, + modalAndroidBlurColor: palette.blackOp70, + modalBackgroundUi4: palette.whiteOp37, + modalSceneOverlayColor: palette.black, - sideMenuBorderColor: palette.navyAqua, + sideMenuBorderColor: palette.backgroundBlack, sideMenuBorderWidth: 0, sideMenuFont: palette.QuicksandMedium, @@ -323,9 +324,10 @@ export const edgeDark: Theme = { toggleButtonOff: palette.gray, // Confirmation slider - confirmationSlider: palette.darkBlueLightened, + confirmationSlider: palette.darkGrey, + confirmationSliderCompleted: palette.darkGreen, confirmationSliderText: palette.white, - confirmationSliderArrow: palette.darkAqua, + confirmationSliderArrow: palette.backgroundBlack, confirmationSliderThumb: palette.edgeMint, confirmationSliderTextDeactivated: palette.gray, confirmationThumbDeactivated: palette.gray, @@ -334,7 +336,7 @@ export const edgeDark: Theme = { // Lines lineDivider: palette.whiteOp10, - titleLineDivider: palette.blueGray, + titleLineDivider: palette.whiteOp10, thinLineWidth: 1, mediumLineWidth: 2, thickLineWidth: 3, @@ -354,7 +356,7 @@ export const edgeDark: Theme = { dateModalTextLight: palette.accentBlue, dateModalTextDark: palette.white, dateModalBackgroundLight: palette.white, - dateModalBackgroundDark: palette.darkAqua, + dateModalBackgroundDark: palette.backgroundBlack, // Wallet Icon Progress walletProgressIconFill: palette.edgeMint, @@ -401,19 +403,19 @@ export const edgeDark: Theme = { textInputTextColor: palette.white, textInputTextColorDisabled: palette.gray, textInputTextColorFocused: palette.white, - textInputBackgroundColor: palette.darkAqua, - textInputBackgroundColorDisabled: palette.darkAqua, - textInputBackgroundColorFocused: palette.darkAqua, + textInputBackgroundColor: palette.graySecondary, + textInputBackgroundColorDisabled: palette.graySecondary, + textInputBackgroundColorFocused: palette.graySecondary, textInputBorderColor: `${palette.edgeMint}00`, textInputBorderColorDisabled: palette.gray, textInputBorderColorFocused: palette.edgeMint, textInputBorderRadius: 100, textInputBorderWidth: 1, - textInputIconColor: palette.gray, - textInputIconColorDisabled: palette.gray, + textInputIconColor: palette.whiteOp50, + textInputIconColorDisabled: palette.whiteOp50, textInputIconColorFocused: palette.edgeMint, - textInputPlaceholderColor: palette.gray, - textInputPlaceholderColorDisabled: palette.gray, + textInputPlaceholderColor: palette.whiteOp50, + textInputPlaceholderColorDisabled: palette.whiteOp50, textInputPlaceholderColorFocused: palette.edgeMint, // Animation @@ -501,8 +503,6 @@ export const edgeDark: Theme = { start: { x: 1, y: 0 } }, - modalBackgroundUi4: 'rgba(255, 255, 255, 0.376)', - txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 827945f3b89..55f82cfe0e2 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -152,6 +152,9 @@ export const edgeLight: Theme = { modalBorderColor: palette.transparent, modalBorderWidth: 0, modalBorderRadiusRem: 1, + modalAndroidBlurColor: palette.whiteOp75, + modalBackgroundUi4: palette.blackOp25, + modalSceneOverlayColor: palette.black, sideMenuBorderColor: palette.transparent, sideMenuBorderWidth: 0, @@ -284,6 +287,7 @@ export const edgeLight: Theme = { // Confirmation slider confirmationSlider: palette.blackOp10, + confirmationSliderCompleted: palette.darkGreen, confirmationSliderText: palette.edgeBlue, confirmationSliderArrow: palette.white, confirmationSliderThumb: palette.edgeBlue, @@ -364,7 +368,7 @@ export const edgeLight: Theme = { textInputBackgroundColor: palette.edgeNavy, textInputBackgroundColorDisabled: palette.edgeNavy, textInputBackgroundColorFocused: palette.edgeNavy, - textInputBorderColor: palette.mutedBlue, + textInputBorderColor: palette.transparent, textInputBorderColorDisabled: palette.gray, textInputBorderColorFocused: palette.edgeMint, textInputBorderRadius: 100, @@ -461,8 +465,6 @@ export const edgeLight: Theme = { start: { x: 1, y: 0 } }, - modalBackgroundUi4: '#ffffff80', - txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index 7f147cf4106..61637ae90c9 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -177,6 +177,9 @@ export const testDark: Theme = { modalBorderColor: palette.transparent, modalBorderWidth: 0, modalBorderRadiusRem: 1, + modalAndroidBlurColor: palette.blackOp25, + modalBackgroundUi4: palette.whiteOp10, + modalSceneOverlayColor: palette.black, sideMenuBorderColor: palette.navyAqua, sideMenuBorderWidth: 0, @@ -325,6 +328,7 @@ export const testDark: Theme = { // Confirmation slider confirmationSlider: palette.darkBlueLightened, + confirmationSliderCompleted: palette.darkGreen, confirmationSliderText: palette.white, confirmationSliderArrow: palette.darkAqua, confirmationSliderThumb: palette.edgeMint, @@ -502,8 +506,6 @@ export const testDark: Theme = { start: { x: 1, y: 0 } }, - modalBackgroundUi4: '#00000080', - txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 944f2accac0..7210f40505d 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -152,6 +152,9 @@ export const testLight: Theme = { modalBorderColor: palette.transparent, modalBorderWidth: 0, modalBorderRadiusRem: 1, + modalAndroidBlurColor: palette.whiteOp75, + modalBackgroundUi4: palette.blackOp25, + modalSceneOverlayColor: palette.black, sideMenuBorderColor: palette.transparent, sideMenuBorderWidth: 0, @@ -284,6 +287,7 @@ export const testLight: Theme = { // Confirmation slider confirmationSlider: palette.blackOp10, + confirmationSliderCompleted: palette.darkGreen, confirmationSliderText: palette.edgeBlue, confirmationSliderArrow: palette.white, confirmationSliderThumb: palette.edgeBlue, @@ -461,8 +465,6 @@ export const testLight: Theme = { start: { x: 1, y: 0 } }, - modalBackgroundUi4: '#ffffff80', - txDirBgReceiveUi4: palette.greenOp60, txDirBgSendUi4: palette.redOp60, txDirBgSwapUi4: palette.grayOp70, diff --git a/src/types/Theme.ts b/src/types/Theme.ts index ab34fb61b48..b0068c61da8 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -121,6 +121,9 @@ export interface Theme { modalBorderColor: string modalBorderWidth: number modalBorderRadiusRem: number + modalBackgroundUi4: string + modalAndroidBlurColor: string + modalSceneOverlayColor: string sideMenuBorderColor: string sideMenuBorderWidth: number @@ -286,8 +289,12 @@ export interface Theme { // warningBubble: string, - // Confirmation slider + // Confirmation slider background left of thumb confirmationSlider: string + + // Section of slider to right of thumb + confirmationSliderCompleted: string + confirmationSliderText: string confirmationSliderArrow: string confirmationSliderThumb: string @@ -441,8 +448,6 @@ export interface Theme { fioCardGradientUi4: ThemeGradientParams swapCardGradientUi4: ThemeGradientParams - modalBackgroundUi4: string - txDirBgReceiveUi4: string txDirBgSendUi4: string txDirBgSwapUi4: string From be45047a3d6998d35fdcbd34606a97d4485f8a20 Mon Sep 17 00:00:00 2001 From: Paul Puey Date: Sat, 13 Jan 2024 13:55:28 -0800 Subject: [PATCH 6/6] Fix tabbar blur color Remove extra LinearGradientA llow separate iOS gradient colors to compensate for blurview darkening/lightening --- .../__snapshots__/MenuTabs.test.tsx.snap | 29 ++++--------------- src/components/themed/MenuTabs.tsx | 12 ++++---- src/theme/variables/edgeDark.ts | 6 ++-- src/theme/variables/edgeLight.ts | 1 + src/theme/variables/testDark.ts | 3 +- src/theme/variables/testLight.ts | 1 + src/types/Theme.ts | 3 ++ 7 files changed, 22 insertions(+), 33 deletions(-) diff --git a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap index f65289821f4..de45e109b5e 100644 --- a/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap +++ b/src/__tests__/components/__snapshots__/MenuTabs.test.tsx.snap @@ -1,26 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MenuTabs should render with loading props 1`] = ` - - + `; diff --git a/src/components/themed/MenuTabs.tsx b/src/components/themed/MenuTabs.tsx index 97f79557890..d2883687b75 100644 --- a/src/components/themed/MenuTabs.tsx +++ b/src/components/themed/MenuTabs.tsx @@ -2,7 +2,7 @@ import { BottomTabBarProps, BottomTabNavigationEventMap } from '@react-navigatio import { NavigationHelpers, ParamListBase } from '@react-navigation/native' import * as React from 'react' import { useMemo } from 'react' -import { StyleSheet, TouchableOpacity, View } from 'react-native' +import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native' import LinearGradient from 'react-native-linear-gradient' import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated' import { useSafeAreaInsets } from 'react-native-safe-area-context' @@ -42,7 +42,7 @@ export const MenuTabs = (props: BottomTabBarProps) => { const { navigation, state } = props const theme = useTheme() const activeTabFullIndex = state.index - const colors = theme.tabBarBackground + const colors = Platform.OS === 'ios' ? theme.tabBarBackgroundIos : theme.tabBarBackground const start = theme.tabBarBackgroundStart const end = theme.tabBarBackgroundEnd const routes = useMemo( @@ -68,8 +68,8 @@ export const MenuTabs = (props: BottomTabBarProps) => { const { drawerOpenRatio, resetDrawerRatio } = useDrawerOpenRatio() return ( - - + + {routes.map((route, index: number) => ( @@ -85,11 +85,11 @@ export const MenuTabs = (props: BottomTabBarProps) => { ))} - + ) } -const ContainerLinearGradient = styled(LinearGradient)({ +const Container = styled(View)({ position: 'absolute', left: 0, right: 0, diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index ce332298dd9..1dadd71515e 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -44,7 +44,8 @@ const palette = { accentOrange: '#F1AA19', darkBlueLightened: '#2B333A', - blackOp25: 'rgba(0, 0, 0, .25)', + blackOp10: 'rgba(0, 0, 0, .1)', + blackOp35: 'rgba(0, 0, 0, .25)', blackOp50: 'rgba(0, 0, 0, .5)', blackOp70: 'rgba(0, 0, 0, .7)', @@ -306,7 +307,8 @@ export const edgeDark: Theme = { textShadowRadius: 3 }, - tabBarBackground: [`${palette.black}00`, palette.black], + tabBarBackground: [palette.blackOp35, palette.blackOp70], + tabBarBackgroundIos: [palette.blackOp10, palette.blackOp70], tabBarBackgroundStart: { x: 0, y: 0.5 }, tabBarBackgroundEnd: { x: 0, y: 1 }, tabBarTopOutlineColors: [`${palette.white}22`, `${palette.white}22`], diff --git a/src/theme/variables/edgeLight.ts b/src/theme/variables/edgeLight.ts index 55f82cfe0e2..dc0ed08f604 100644 --- a/src/theme/variables/edgeLight.ts +++ b/src/theme/variables/edgeLight.ts @@ -269,6 +269,7 @@ export const edgeLight: Theme = { }, tabBarBackground: [palette.white, palette.white], + tabBarBackgroundIos: [palette.white, palette.white], tabBarBackgroundStart: { x: 0, y: 0 }, tabBarBackgroundEnd: { x: 1, y: 1 }, tabBarTopOutlineColors: [palette.white, palette.white], diff --git a/src/theme/variables/testDark.ts b/src/theme/variables/testDark.ts index 61637ae90c9..01caffd2526 100644 --- a/src/theme/variables/testDark.ts +++ b/src/theme/variables/testDark.ts @@ -309,7 +309,8 @@ export const testDark: Theme = { textShadowRadius: 3 }, - tabBarBackground: [`${palette.black}00`, palette.black], + tabBarBackground: [palette.black, palette.black], + tabBarBackgroundIos: [palette.blackOp25, palette.blackOp50], tabBarBackgroundStart: { x: 0, y: 0.5 }, tabBarBackgroundEnd: { x: 0, y: 1 }, tabBarTopOutlineColors: [`${palette.white}22`, `${palette.white}22`], diff --git a/src/theme/variables/testLight.ts b/src/theme/variables/testLight.ts index 7210f40505d..363d36f2e47 100644 --- a/src/theme/variables/testLight.ts +++ b/src/theme/variables/testLight.ts @@ -269,6 +269,7 @@ export const testLight: Theme = { }, tabBarBackground: [palette.white, palette.white], + tabBarBackgroundIos: [palette.white, palette.white], tabBarBackgroundStart: { x: 0, y: 0 }, tabBarBackgroundEnd: { x: 1, y: 1 }, tabBarTopOutlineColors: [palette.white, palette.white], diff --git a/src/types/Theme.ts b/src/types/Theme.ts index b0068c61da8..ad7d30d4f9f 100644 --- a/src/types/Theme.ts +++ b/src/types/Theme.ts @@ -263,6 +263,9 @@ export interface Theme { cardTextShadow: TextShadowParams // For added contrast against complex card backgrounds tabBarBackground: string[] + // IOS has a forced darkening and lightening of blurviews so we need + // a different color to compensate + tabBarBackgroundIos: string[] tabBarBackgroundStart: GradientCoords tabBarBackgroundEnd: GradientCoords tabBarTopOutlineColors: string[]