fix: text visibility issues in error page in dark mode (#30408)

## **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: #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.
MetaMask · Feb 19, 2025 · c1f1f6b · c1f1f6b
1 parent 67aa6aa
commit c1f1f6b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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