From d949b75bc4c2b33c411ac025aad98e7dfda0eaa7 Mon Sep 17 00:00:00 2001 From: Brian August Nguyen Date: Mon, 10 Jun 2024 20:42:29 -0700 Subject: [PATCH] refactor: replace secondary colors with warning colors (#9922) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This PR replaces the `secondary` colors with `warning` colors, in preparation to upgrade the design-tokens package to v4 ## **Related issues** Fixes: #9921 ## **Manual testing steps** 1. Render the given components 2. Observe changes 3. ## **Screenshots/Recordings** ### **Before and after** - `PendingText` ![Simulator Screenshot - iPhone 15 Pro - 2024-06-10 at 09 35 40](https://github.com/MetaMask/metamask-mobile/assets/14355083/d55b2b20-612b-45e6-b481-f05ebbe21bb3) ![Simulator Screenshot - iPhone 15 Pro - 2024-06-10 at 09 36 07](https://github.com/MetaMask/metamask-mobile/assets/14355083/af09a532-bd96-46df-99e4-f87133ce0f75) - `StyledButtons` ![Simulator Screenshot - iPhone 15 Pro - 2024-06-10 at 09 40 08](https://github.com/MetaMask/metamask-mobile/assets/14355083/f6e085ac-147c-406f-bc9a-2ce21949851f) ![Simulator Screenshot - iPhone 15 Pro - 2024-06-10 at 09 40 31](https://github.com/MetaMask/metamask-mobile/assets/14355083/502aa368-da45-46ba-8d2b-71397dbfce63) - `GasInfoIcon` + `Text` ![Simulator Screenshot - iPhone 15 Pro - 2024-06-10 at 09 47 59](https://github.com/MetaMask/metamask-mobile/assets/14355083/3ecb8fc1-70fc-40c4-8b32-0f67b6ebc903) ![Simulator Screenshot - iPhone 15 Pro - 2024-06-10 at 09 48 17](https://github.com/MetaMask/metamask-mobile/assets/14355083/b7ef6000-6598-467d-a0a7-33af3ec43fe6) ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- app/components/Base/StatusText.js | 2 +- app/components/Base/Text/Text.styles.ts | 2 +- .../UI/StyledButton/__snapshots__/index.test.tsx.snap | 6 +++--- app/components/UI/StyledButton/styledButtonStyles.js | 4 ++-- .../TransactionReview/TransactionReviewEIP1559/index.js | 2 +- .../TransactionReviewEIP1559Update/styles.ts | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/components/Base/StatusText.js b/app/components/Base/StatusText.js index 0de17d43962..7f337970011 100644 --- a/app/components/Base/StatusText.js +++ b/app/components/Base/StatusText.js @@ -29,7 +29,7 @@ export const PendingText = (props) => { return ( ); diff --git a/app/components/Base/Text/Text.styles.ts b/app/components/Base/Text/Text.styles.ts index 2e2001c5d50..c6cf0a8b375 100644 --- a/app/components/Base/Text/Text.styles.ts +++ b/app/components/Base/Text/Text.styles.ts @@ -21,7 +21,7 @@ const createStyles = (colors: Colors) => color: colors.error.default, }, orange: { - color: colors.secondary.default, + color: colors.warning.default, }, black: { color: colors.text.default, diff --git a/app/components/UI/StyledButton/__snapshots__/index.test.tsx.snap b/app/components/UI/StyledButton/__snapshots__/index.test.tsx.snap index 056530166a3..7b79f615227 100644 --- a/app/components/UI/StyledButton/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/StyledButton/__snapshots__/index.test.tsx.snap @@ -91,7 +91,7 @@ exports[`StyledButton should render correctly on Android the button with type or "padding": 15, }, { - "borderColor": "#F66A0A", + "borderColor": "#BF5208", "borderWidth": 1, }, null, @@ -223,7 +223,7 @@ exports[`StyledButton should render correctly on iOS the button with type orange "padding": 15, }, { - "borderColor": "#F66A0A", + "borderColor": "#BF5208", "borderWidth": 1, }, undefined, @@ -239,7 +239,7 @@ exports[`StyledButton should render correctly on iOS the button with type orange "textAlign": "center", }, { - "color": "#F66A0A", + "color": "#BF5208", }, undefined, ] diff --git a/app/components/UI/StyledButton/styledButtonStyles.js b/app/components/UI/StyledButton/styledButtonStyles.js index cca00a0e395..b2453c147f4 100644 --- a/app/components/UI/StyledButton/styledButtonStyles.js +++ b/app/components/UI/StyledButton/styledButtonStyles.js @@ -20,11 +20,11 @@ const createStyles = (colors) => color: colors.primary.inverse, }, orange: { - borderColor: colors.secondary.default, + borderColor: colors.warning.default, borderWidth: 1, }, orangeText: { - color: colors.secondary.default, + color: colors.warning.default, }, infoText: { color: colors.primary.default, diff --git a/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559/index.js b/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559/index.js index 5dc7fea2078..8e31222ab6e 100644 --- a/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559/index.js +++ b/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559/index.js @@ -33,7 +33,7 @@ const createStyles = (colors) => paddingLeft: 2, }, gasInfoIcon: (hasOrigin) => ({ - color: hasOrigin ? colors.secondary.default : colors.icon.muted, + color: hasOrigin ? colors.warning.default : colors.icon.muted, }), amountContainer: { flex: 1, diff --git a/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559Update/styles.ts b/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559Update/styles.ts index 7f6fbbfbd42..f2de06dd326 100644 --- a/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559Update/styles.ts +++ b/app/components/Views/confirmations/components/TransactionReview/TransactionReviewEIP1559Update/styles.ts @@ -16,7 +16,7 @@ const createStyles = (colors: any) => paddingLeft: 2, }, gasInfoIcon: (hasOrigin) => ({ - color: hasOrigin ? colors.secondary.default : colors.icon.muted, + color: hasOrigin ? colors.warning.default : colors.icon.muted, }), amountContainer: { flex: 1,