From c1f1f6bec6149120810ea2359e6a5d7750d38186 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 19 Feb 2025 10:42:33 -0800
Subject: [PATCH] fix: text visibility issues in error page in dark mode
 (#30408)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

This PR addresses an issue where the error page text was not visible in
dark mode due to missing theme handling and color inheritance. The
changes ensure proper text visibility regardless of the user's system
theme by:

1. Adding `TextColor.inherit` to all text components in the error page
to ensure proper color inheritance
2. Fixing the theme handling in base styles to properly apply dark mode
colors
3. Ensuring the banner alert text inherits the correct color
4. Adding max-width to textarea components to prevent overflow issues
5. Adding comprehensive Storybook stories for the error page component
to improve test coverage and enable isolated development

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30408?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/metamask-extension/issues/30407

## **Manual testing steps**

1. Set your system to dark mode
2. Trigger an error in MetaMask by setting [if
(error)](https://github.com/MetaMask/metamask-extension/blob/7d050e1e7af78d663e862ddf8d034c49590101d6/ui/pages/index.js#L34)
{ to ` if (true) {` in `ui/pages/index.js`
3. Verify the error page text is visible and properly contrasted
4. Switch to light mode and repeat steps 2-3
5. Test the `Textarea` component to ensure it doesn't overflow its
container
6. Run Storybook and verify all error page stories render correctly

## **Screenshots/Recordings**

### **Before**


https://github.com/user-attachments/assets/3bea795f-4507-4ce0-8b6c-e6f7e50d8b7c

### **After**

https://github.com/user-attachments/assets/5111f8ed-a57f-4857-a5df-1481a97d04ca


https://github.com/user-attachments/assets/30f1c9cc-cf7d-4826-b567-8a46b170e3c7

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.
---
 .../component-library/textarea/textarea.scss  |  2 ++
 ui/css/base-styles.scss                       |  3 +++
 ui/pages/error-page/error-page.component.tsx  | 26 ++++++++++++++++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui/components/component-library/textarea/textarea.scss b/ui/components/component-library/textarea/textarea.scss
index d6ea35fee110..fc312562ae1c 100644
--- a/ui/components/component-library/textarea/textarea.scss
+++ b/ui/components/component-library/textarea/textarea.scss
@@ -1,6 +1,8 @@
 .mm-textarea {
   $resize: none, both, horizontal, vertical, initial, inherit;
 
+  max-width: 100%;
+
   &--is-disabled,
   &:disabled {
     opacity: var(--opacity-disabled);
diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss
index 408e0e0eb973..7d252baa4c65 100644
--- a/ui/css/base-styles.scss
+++ b/ui/css/base-styles.scss
@@ -17,7 +17,10 @@ body {
 
 html {
   min-height: 500px;
+}
 
+html,
+body {
   @include design-system.screen-sm-max {
     &:not([data-theme]) {
       background-color: var(--color-background-default);
diff --git a/ui/pages/error-page/error-page.component.tsx b/ui/pages/error-page/error-page.component.tsx
index 9a094057dcc0..17da4edab91d 100644
--- a/ui/pages/error-page/error-page.component.tsx
+++ b/ui/pages/error-page/error-page.component.tsx
@@ -110,16 +110,27 @@ const ErrorPage: React.FC<ErrorPageProps> = ({ error }) => {
             size={IconSize.Xl}
             color={IconColor.warningDefault}
           />
-          <Text variant={TextVariant.headingMd} marginBottom={4}>
+          <Text
+            color={TextColor.inherit}
+            variant={TextVariant.headingMd}
+            marginBottom={4}
+          >
             {t('errorPageTitle')}
           </Text>
         </Box>
 
         <div className="error-page__banner-wrapper">
-          <BannerAlert marginBottom={4}>{t('errorPageInfo')}</BannerAlert>
+          <BannerAlert
+            childrenWrapperProps={{ color: TextColor.inherit }}
+            marginBottom={4}
+          >
+            {t('errorPageInfo')}
+          </BannerAlert>
         </div>
 
-        <Text variant={TextVariant.bodyMd}>{t('errorPageMessageTitle')}</Text>
+        <Text color={TextColor.inherit} variant={TextVariant.bodyMd}>
+          {t('errorPageMessageTitle')}
+        </Text>
 
         <Box
           borderRadius={BorderRadius.LG}
@@ -136,6 +147,7 @@ const ErrorPage: React.FC<ErrorPageProps> = ({ error }) => {
               variant={TextVariant.bodyXs}
               marginBottom={2}
               data-testid="error-page-error-message"
+              color={TextColor.inherit}
             >
               {t('errorMessage', [error.message])}
             </Text>
@@ -145,6 +157,7 @@ const ErrorPage: React.FC<ErrorPageProps> = ({ error }) => {
               variant={TextVariant.bodyXs}
               marginBottom={2}
               data-testid="error-page-error-code"
+              color={TextColor.inherit}
             >
               {t('errorCode', [error.code])}
             </Text>
@@ -154,13 +167,18 @@ const ErrorPage: React.FC<ErrorPageProps> = ({ error }) => {
               variant={TextVariant.bodyXs}
               marginBottom={2}
               data-testid="error-page-error-name"
+              color={TextColor.inherit}
             >
               {t('errorName', [error.name])}
             </Text>
           ) : null}
           {error.stack ? (
             <>
-              <Text variant={TextVariant.bodyXs} marginBottom={2}>
+              <Text
+                color={TextColor.inherit}
+                variant={TextVariant.bodyXs}
+                marginBottom={2}
+              >
                 {t('errorStack')}
               </Text>
               <pre