fix: text visibility issues in error page in dark mode

MetaMask · Feb 18, 2025 · ed2034e · ed2034e
1 parent 7d050e1
commit ed2034e
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