Use the "color" prop instead of scss, update snapshots

MetaMask · Jul 14, 2023 · 11719ef · 11719ef
1 parent 7884cda
commit 11719ef
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap b/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap
@@ -6,7 +6,7 @@ exports[`ExchangeRateDisplay renders the component with initial props 1`] = `
     class="exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>

diff --git a/ui/pages/swaps/exchange-rate-display/exchange-rate-display.js b/ui/pages/swaps/exchange-rate-display/exchange-rate-display.js
@@ -10,6 +10,7 @@ import {
   DISPLAY,
   AlignItems,
   IconColor,
+  TextColor,
 } from '../../../helpers/constants/design-system';
 import { Icon, IconName } from '../../../components/component-library';
 import { I18nContext } from '../../../contexts/i18n';
@@ -74,6 +75,9 @@ export default function ExchangeRateDisplay({
   const quoteRateClassName = onQuotesClick
     ? 'exchange-rate-display__quote-rate'
     : 'exchange-rate-display__quote-rate--no-link';
+  const quoteRateColor = onQuotesClick
+    ? TextColor.primaryDefault
+    : TextColor.textDefault;
 
   return (
     <div className={classnames('exchange-rate-display', className)}>
@@ -82,6 +86,7 @@ export default function ExchangeRateDisplay({
         justifyContent={JustifyContent.center}
         alignItems={AlignItems.center}
         onClick={onQuotesClick}
+        color={quoteRateColor}
         className={quoteRateClassName}
         data-testid="exchange-rate-display-quote-rate"
       >

diff --git a/ui/pages/swaps/exchange-rate-display/index.scss b/ui/pages/swaps/exchange-rate-display/index.scss
@@ -18,11 +18,9 @@
 
   &__quote-rate {
     cursor: pointer;
-    color: var(--color-primary-default);
   }
 
   &__quote-rate--no-link {
     cursor: text;
-    color: var(--color-text-default);
   }
 }
diff --git a/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap b/ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
@@ -81,7 +81,7 @@ exports[`MainQuoteSummary renders the component with initial props 4`] = `
     class="exchange-rate-display main-quote-summary__exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>

diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
@@ -38,7 +38,7 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 2`] = `
     class="exchange-rate-display main-quote-summary__exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>
@@ -110,7 +110,7 @@ exports[`ViewQuote renders the component with initial props 2`] = `
     class="exchange-rate-display main-quote-summary__exchange-rate-display"
   >
     <div
-      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+      class="box exchange-rate-display__quote-rate--no-link box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default"
       data-testid="exchange-rate-display-quote-rate"
     >
       <span>