Dark Mode: Swap hex colors in ui/components/ui folder (#14191)

2024-12-23 01:39:44 +01:00 · 2022-03-25 16:09:22 +01:00 · 2022-03-25 16:09:22 +01:00 · e8d4f11cbf
commit e8d4f11cbf
parent 57818fabbe
18 changed files with 56 additions and 94 deletions
--- a/ui/components/ui/actionable-message/actionable-message.stories.js
+++ b/ui/components/ui/actionable-message/actionable-message.stories.js
@ -110,7 +110,7 @@ export const WithIcon = (args) => <ActionableMessage {...args} />;
 WithIcon.args = {
  className: 'actionable-message--left-aligned actionable-message--warning',
  useIcon: true,
-  iconFillColor: '#f8c000',
+  iconFillColor: 'var(--color-waring-default)',
 };

 export const PrimaryV2Action = (args) => <ActionableMessage {...args} />;
@ -119,7 +119,7 @@ PrimaryV2Action.args = {
  message:
    'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
  useIcon: true,
-  iconFillColor: '#d73a49',
+  iconFillColor: 'var(--color-error-default)',
  type: 'danger',
  primaryActionV2: {
    label: 'I want to proceed anyway',
--- a/ui/components/ui/breadcrumbs/breadcrumbs.component.js
+++ b/ui/components/ui/breadcrumbs/breadcrumbs.component.js
@ -21,7 +21,10 @@ export default class Breadcrumbs extends PureComponent {
              key={i}
              className="breadcrumb"
              style={{
-                backgroundColor: i === currentIndex ? '#D8D8D8' : '#FFFFFF',
+                backgroundColor:
+                  i === currentIndex
+                    ? 'var(--color-background-alternative)'
+                    : 'var(--color-background-default)',
              }}
            />
          ))}
--- a/ui/components/ui/breadcrumbs/breadcrumbs.component.test.js
+++ b/ui/components/ui/breadcrumbs/breadcrumbs.component.test.js
@ -11,12 +11,12 @@ describe('Breadcrumbs Component', () => {
    expect(wrapper.find('.breadcrumb')).toHaveLength(3);
    expect(
      wrapper.find('.breadcrumb').at(0).props().style.backgroundColor,
-    ).toStrictEqual('#FFFFFF');
+    ).toStrictEqual('var(--color-background-default)');
    expect(
      wrapper.find('.breadcrumb').at(1).props().style.backgroundColor,
-    ).toStrictEqual('#D8D8D8');
+    ).toStrictEqual('var(--color-background-alternative)');
    expect(
      wrapper.find('.breadcrumb').at(2).props().style.backgroundColor,
-    ).toStrictEqual('#FFFFFF');
+    ).toStrictEqual('var(--color-background-default)');
  });
 });
--- a/ui/components/ui/export-text-container/export-text-container.component.js
+++ b/ui/components/ui/export-text-container/export-text-container.component.js
@ -21,7 +21,7 @@ function ExportTextContainer({ text = '' }) {
            handleCopy(text);
          }}
        >
-          <Copy size={17} color="#3098DC" />
+          <Copy size={17} color="var(--color-primary-default)" />
          <div className="export-text-container__button-text">
            {copied ? t('copiedExclamation') : t('copyToClipboard')}
          </div>
--- a/ui/components/ui/form-field/form-field.stories.js
+++ b/ui/components/ui/form-field/form-field.stories.js
@ -55,7 +55,11 @@ export const FormFieldWithTitleDetail = (args) => {
    text: <div style={{ fontSize: '12px' }}>Detail</div>,
    button: (
      <button
-        style={{ backgroundColor: clicked ? 'orange' : 'rgb(239, 239, 239)' }}
+        style={{
+          backgroundColor: clicked
+            ? 'var(--color-secondary-default)'
+            : 'var(--color-background-alternative)',
+        }}
        onClick={() => setClicked(!clicked)}
      >
        Click Me
--- a/ui/components/ui/icon/README.mdx
+++ b/ui/components/ui/icon/README.mdx
@ -7,7 +7,6 @@ import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
-import PaperAirplane from './paper-airplane-icon';
 import Preloader from './preloader';
 import ReceiveIcon from './receive-icon.component';
 import SendIcon from './send-icon.component';
@ -176,12 +175,6 @@ Use the `className` prop to add an additional class to the icon. This additional

 <ArgsTable of={SwapIconComponent} />

-## PaperAirplane
-
-<Canvas>
-  <Story id="ui-components-ui-icon-icon-stories-js--paper-airplane-story" />
-</Canvas>
-
 ## CopyIcon

 <Canvas>
--- a/ui/components/ui/icon/icon.stories.js
+++ b/ui/components/ui/icon/icon.stories.js
@ -17,7 +17,6 @@ import CopyIcon from './copy-icon.component';
 import InfoIcon from './info-icon.component';
 import InfoIconInverted from './info-icon-inverted.component';
 import Interaction from './interaction-icon.component';
-import PaperAirplane from './paper-airplane-icon';
 import Preloader from './preloader';
 import ReceiveIcon from './receive-icon.component';
 import SendIcon from './send-icon.component';
@ -152,7 +151,6 @@ export const DefaultStory = (args) => (
        <IconItem Component={<BuyIcon {...args} />} />
        <IconItem Component={<SwapIcon {...args} />} />
        <IconItem Component={<SwapIconComponent {...args} />} />
-        <IconItem Component={<PaperAirplane {...args} />} />
        <IconItem Component={<CopyIcon {...args} />} />
        <IconItem Component={<Preloader {...args} />} />
        <IconItem Component={<IconEye {...args} />} />
@ -279,7 +277,7 @@ export const BuyIconStory = (args) => <BuyIcon {...args} />;
 BuyIconStory.args = {
  width: '17',
  height: '21',
-  fill: '#2F80ED',
+  fill: 'var(--color-primary-default)',
 };
 BuyIconStory.storyName = 'BuyIcon';

@ -287,7 +285,7 @@ export const SwapIconStory = (args) => <SwapIcon {...args} />;
 SwapIconStory.args = {
  width: '17',
  height: '21',
-  fill: '#2F80ED',
+  fill: 'var(--color-primary-default)',
 };
 SwapIconStory.storyName = 'SwapIcon';

@ -299,13 +297,6 @@ SendSwapIconStory.args = {
 };
 SendSwapIconStory.storyName = 'Send/SwapIcon';

-export const PaperAirplaneStory = (args) => <PaperAirplane {...args} />;
-PaperAirplaneStory.args = {
-  size: 40,
-  color: 'var(--color-icon-default)',
-};
-PaperAirplaneStory.storyName = 'PaperAirplane';
-
 export const CopyIconStory = (args) => <CopyIcon {...args} />;
 CopyIconStory.args = {
  size: 40,
--- a/ui/components/ui/icon/paper-airplane-icon.js
+++ b/ui/components/ui/icon/paper-airplane-icon.js
@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function PaperAirplane({ size, className, color }) {
-  return (
-    <svg
-      className={className}
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M22.6001 0.0846465C22.9027 -0.0485745 23.2611 -0.0263377 23.5508 0.164104C23.9463 0.424137 24.1048 0.926235 23.9302 1.36621L15.1985 23.3701C15.0453 23.7562 14.6689 24.0071 14.2535 23.9999C13.8381 23.9926 13.4707 23.7289 13.3309 23.3376L9.99771 14.0046L0.662377 10.6706C0.271138 10.5308 0.00736766 10.1634 0.000151723 9.74798C-0.00706558 9.3326 0.24378 8.95619 0.629931 8.80296L22.6001 0.0846465ZM11.9306 13.4818L20.2936 5.11878L14.32 20.1722L11.9306 13.4818ZM18.8812 3.70792L3.82785 9.68148L10.5182 12.0709L18.8812 3.70792Z"
-        fill={color}
-      />
-    </svg>
-  );
-}
-
-PaperAirplane.defaultProps = {
-  color: '#FFFFFF',
-};
-
-PaperAirplane.propTypes = {
-  /**
-   * Additional className
-   */
-  className: PropTypes.string,
-  /**
-   * Size of the icon should adhere to 8px grid. e.g: 8, 16, 24, 32, 40 and is required
-   */
-  size: PropTypes.number.isRequired,
-  /**
-   * Color of the icon should be a valid design system color
-   */
-  color: PropTypes.string,
-};
--- a/ui/components/ui/icon/sun-check-icon.component.js
+++ b/ui/components/ui/icon/sun-check-icon.component.js
@ -2,8 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';

 export default function SunCheck({ reverseColors }) {
-  const sunColor = reverseColors ? '#037DD6' : 'white';
-  const checkColor = reverseColors ? 'white' : '#037DD6';
+  const sunColor = reverseColors
+    ? 'var(--color-primary-default)'
+    : 'var(--color-primary-inverse)';
+  const checkColor = reverseColors
+    ? 'var(--color-primary-inverse)'
+    : 'var(--color-primary-default)';
  return (
    <svg
      width="15"
--- a/ui/components/ui/info-tooltip/info-tooltip-icon.js
+++ b/ui/components/ui/info-tooltip/info-tooltip-icon.js
@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-export default function InfoTooltipIcon({ fillColor = '#b8b8b8' }) {
+export default function InfoTooltipIcon({
+  fillColor = 'var(--color-icon-default)',
+}) {
  return (
    <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
      <path
--- a/ui/components/ui/info-tooltip/info-tooltip.js
+++ b/ui/components/ui/info-tooltip/info-tooltip.js
@ -17,7 +17,7 @@ export default function InfoTooltip({
  containerClassName,
  wrapperClassName,
  wide,
-  iconFillColor = '#b8b8b8',
+  iconFillColor = 'var(--color-icon-default)',
 }) {
  return (
    <div className="info-tooltip">
--- a/ui/components/ui/list-item/list-item.stories.js
+++ b/ui/components/ui/list-item/list-item.stories.js
@ -28,13 +28,13 @@ Currencies.propTypes = {
  secondary: PropTypes.string,
 };

-const okColor = '#2F80ED';
-const failColor = '#D73A49';
+const okColor = 'var(--color-primary-default)';
+const failColor = 'var(--color-error-default';

 export const SendComponent = () => (
  <ListItem
    icon={<Send color={okColor} size={28} />}
-    titleIcon={<Preloader size={16} color="#D73A49" />}
+    titleIcon={<Preloader size={16} color={failColor} />}
    title={text('title', 'Send DAI')}
    className="list-item"
    subtitle={text('subtitle', 'Sept 20 · To: 00X4...3058')}
@ -61,7 +61,10 @@ export const PendingComponent = () => (
    className="list-item"
    subtitleStatus={
      <span>
-        <span style={{ color: '#F56821' }}>Unapproved</span> ·{' '}
+        <span style={{ color: 'var(--color-warning-default)' }}>
+          Unapproved
+        </span>{' '}
+        ·{' '}
      </span>
    }
    subtitle={text('subtitle', 'Turtlefarm.com')}
--- a/ui/components/ui/loading-screen/loading-screen.component.js
+++ b/ui/components/ui/loading-screen/loading-screen.component.js
@ -34,7 +34,10 @@ class LoadingScreen extends Component {
        {this.props.header}
        <div className="loading-overlay__container">
          {this.props.showLoadingSpinner && (
-            <Spinner color="#F7C06C" className="loading-overlay__spinner" />
+            <Spinner
+              color="var(--color-secondary-muted)"
+              className="loading-overlay__spinner"
+            />
          )}
          {this.renderMessage()}
        </div>
--- a/ui/components/ui/nickname-popover/nickname-popover.component.js
+++ b/ui/components/ui/nickname-popover/nickname-popover.component.js
@ -51,7 +51,7 @@ const NicknamePopover = ({
              }}
              title=""
            >
-              <CopyIcon size={11} color="#989a9b" />
+              <CopyIcon size={11} color="var(--color-icon-default)" />
            </button>
          </Tooltip>
        </div>
--- a/ui/components/ui/slider/slider.component.js
+++ b/ui/components/ui/slider/slider.component.js
@ -19,12 +19,12 @@ const styles = {
  },
  rail: {
    borderRadius: 50,
-    background: '#D6D9DC',
+    background: 'var(--color-background-alternative)',
    height: 6,
  },
  track: {
    borderRadius: 50,
-    background: '#037DD6',
+    background: 'var(--color-primary-default)',
    height: 6,
  },
  thumb: {
@ -32,8 +32,8 @@ const styles = {
    width: 20,
    marginTop: -7,
    marginLeft: -7,
-    backgroundColor: '#037DD6',
-    border: '1px solid #EAF6FF',
+    backgroundColor: 'var(--color-primary-default)',
+    border: '1px solid var(--color-border-muted)',
    boxSizing: 'border-box',
    boxShadow: '0px 0px 14px 0px rgba(0, 0, 0, 0.18)',
    '&:focus, &$active': {
--- a/ui/components/ui/spinner/spinner.component.js
+++ b/ui/components/ui/spinner/spinner.component.js
@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-const Spinner = ({ className = '', color = '#000000' }) => {
+const Spinner = ({ className = '', color = 'var(--color-text-default)' }) => {
  return (
    <div className={`spinner ${className}`}>
      <svg
--- a/ui/components/ui/text-field/text-field.component.js
+++ b/ui/components/ui/text-field/text-field.component.js
@ -27,7 +27,7 @@ const styles = {
      borderBottom: '1px solid var(--color-text-default) !important', // Visible bottom border
    },
    '&:after': {
-      borderBottom: `2px solid rgb(3, 125, 214)`, // Animated bottom border
+      borderBottom: `2px solid var(--color-primary-default)`, // Animated bottom border
    },
  },
  materialError: {},
@ -46,16 +46,16 @@ const styles = {
  },
  materialWhitePaddedUnderline: {
    '&:after': {
-      borderBottom: '2px solid #fff',
+      borderBottom: '2px solid var(--color-background-default)', // @TODO: Replace with border-muted ?
    },
  },
  // Non-material styles
  formLabel: {
    '&$formLabelFocused': {
-      color: '#5b5b5b',
+      color: 'var(--color-text-alternative)',
    },
    '&$materialError': {
-      color: '#5b5b5b',
+      color: 'var(--color-text-alternative)',
    },
  },
  formLabelFocused: {},
--- a/ui/components/ui/toggle-button/toggle-button.component.js
+++ b/ui/components/ui/toggle-button/toggle-button.component.js
@ -8,7 +8,7 @@ const trackStyle = {
  height: '24px',
  padding: '0px',
  borderRadius: '26px',
-  border: '2px solid rgb(3, 125, 214)',
+  border: '2px solid var(--color-primary-default)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
@ -16,7 +16,7 @@ const trackStyle = {

 const offTrackStyle = {
  ...trackStyle,
-  border: '2px solid #8E8E8E',
+  border: '2px solid var(--color-border-default)',
 };

 const thumbStyle = {
@ -31,18 +31,18 @@ const thumbStyle = {

 const colors = {
  activeThumb: {
-    base: '#037DD6',
+    base: 'var(--color-primary-default)',
  },
  inactiveThumb: {
-    base: '#6A737D',
+    base: 'var(--color-icon-default)',
  },
  active: {
-    base: '#ffffff',
-    hover: '#ffffff',
+    base: 'var(--color-background-default)',
+    hover: 'var(--color-background-default)',
  },
  inactive: {
-    base: '#DADADA',
-    hover: '#DADADA',
+    base: 'var(--color-background-alternative)',
+    hover: 'var(color-background-alternative)',
  },
 };