Standardize scss import practices (#9183)

2024-12-23 09:52:26 +01:00 · 2020-08-19 11:41:56 -05:00 · 2020-08-19 11:41:56 -05:00 · c04cb63c63
commit c04cb63c63
parent b6ccd22d6c
27 changed files with 185 additions and 203 deletions
--- a/ui/app/components/app/app-components.scss
+++ b/ui/app/components/app/app-components.scss
@ -1,68 +1,38 @@
+/** Please import your files in alphabetical order **/
@import 'account-list-item/index';
@import 'account-menu/index';
@import 'add-token-button/index';
-@import '../ui/alert/index';
@import 'alerts/alerts';
@import 'app-header/index';
@import 'asset-list-item/asset-list-item';
-@import '../ui/breadcrumbs/index';
-@import '../ui/button-group/index';
-@import '../ui/card/index';
@import 'confirm-page-container/index';
-@import '../ui/currency-input/index';
-@import '../ui/currency-display/index';
-@import '../ui/editable-label/index';
-@import '../ui/error-message/index';
-@import '../ui/export-text-container/index';
-@import '../ui/identicon/index';
-@import '../ui/menu/menu';
+@import 'connected-accounts-list/index';
+@import 'connected-accounts-permissions/index';
+@import 'connected-sites-list/index';
+@import 'connected-status-indicator/index';
+@import 'gas-customization/gas-modal-page-container/index';
+@import 'gas-customization/gas-price-button-group/index';
+@import 'gas-customization/index';
+@import 'home-notification/index';
@import 'info-box/index';
@import 'menu-bar/index';
@import 'modal/index';
@import 'modals/index';
+@import 'multiple-notifications/index';
@import 'network-display/index';
-@import '../ui/page-container/index';
-@import '../../pages/index';
@import 'permission-page-container/index';
-@import '../ui/qr-code/index';
-@import '../ui/readonly-input/index';
+@import 'permissions-connect-footer/index';
+@import 'permissions-connect-header/index';
@import 'selected-account/index';
-@import '../ui/sender-to-recipient/index';
-@import '../ui/tabs/index';
-@import '../ui/token-balance/index';
+@import 'sidebars/index';
+@import 'signature-request/index';
@import 'signature-request-original/index';
+@import 'tab-bar/index';
@import 'token-cell/token-cell';
@import 'transaction-activity-log/index';
@import 'transaction-breakdown/index';
-@import 'transaction-list/index';
-@import 'transaction-list-item/index';
@import 'transaction-list-item-details/index';
+@import 'transaction-list-item/index';
+@import 'transaction-list/index';
@import 'transaction-status/index';
-@import 'sidebars/index';
-@import '../ui/unit-input/index';
-@import 'gas-customization/gas-modal-page-container/index';
-@import 'gas-customization/index';
-@import 'gas-customization/gas-price-button-group/index';
-@import '../ui/toggle-button/index';
-@import 'home-notification/index';
-@import 'multiple-notifications/index';
-@import 'signature-request/index';
-@import 'connected-sites-list/index';
-@import 'connected-accounts-list/index';
-@import 'connected-accounts-permissions/index';
-@import '../ui/icon/index';
-@import '../ui/icon-with-fallback/icon-with-fallback';
-@import '../ui/icon-with-label/index';
-@import '../ui/circle-icon/index';
-@import '../ui/alert-circle-icon/index';
-@import './connected-status-indicator/index';
-@import '../ui/check-box/index';
-@import '../ui/dropdown/dropdown';
-@import 'permissions-connect-header/index';
-@import 'permissions-connect-footer/index';
-@import 'tab-bar/index';
@import 'wallet-overview/index';
-@import '../ui/account-mismatch-warning/index';
-@import '../ui/icon-border/icon-border';
-@import '../ui/info-tooltip/index';
-@import '../ui/pulse-loader/index';
--- a/ui/app/components/app/asset-list-item/asset-list-item.scss
+++ b/ui/app/components/app/asset-list-item/asset-list-item.scss
@ -17,7 +17,7 @@
    margin-left: 8px;
  }

-  &__send-token-button {
+  & &__send-token-button {
    display: none;
    text-transform: uppercase;
    width: fit-content;
@ -33,7 +33,7 @@
      display: flex;
    }

-    &__send-token-button {
+    & &__send-token-button {
      display: inline-block;
    }

--- a/ui/app/components/app/contact-list/contact-list.component.js
+++ b/ui/app/components/app/contact-list/contact-list.component.js
@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import Button from '../../ui/button'
 import RecipientGroup from './recipient-group/recipient-group.component'

 export default class ContactList extends PureComponent {
@ -37,12 +38,13 @@ export default class ContactList extends PureComponent {
        />
        {
          showLoadMore && (
-            <div
+            <Button
+              type="link"
              className="send__select-recipient-wrapper__recent-group-wrapper__load-more"
              onClick={() => this.setState({ isShowingAllRecent: true })}
            >
              {t('loadMore')}
-            </div>
+            </Button>
          )
        }
      </div>
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/index.scss
@ -34,10 +34,11 @@
      font-size: 14px;
      color: #4eade7;
      position: absolute;
-      top: 16px;
+      top: 4px;
      right: 16px;
      cursor: pointer;
      overflow: hidden;
+      width: min-content;
    }

    &__title {
--- a/ui/app/components/app/modals/account-details-modal/index.scss
+++ b/ui/app/components/app/modals/account-details-modal/index.scss
@ -4,7 +4,7 @@
    font-size: 20px;
  }

-  &__button {
+  & &__button {
    margin-top: 17px;
    padding: 10px 22px;
    width: 286px;
--- a/ui/app/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js
+++ b/ui/app/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js
@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import * as actions from '../../../../store/actions'
 import Identicon from '../../../ui/identicon'
+import Button from '../../../ui/button'

 function mapStateToProps (state) {
  return {
@ -63,20 +64,22 @@ class HideTokenConfirmationModal extends Component {
            {this.context.t('readdToken')}
          </div>
          <div className="hide-token-confirmation__buttons">
-            <button
-              className="btn-default hide-token-confirmation__button btn--large"
+            <Button
+              type="default"
+              className="hide-token-confirmation__button"
              data-testid="hide-token-confirmation__cancel"
              onClick={() => hideModal()}
            >
              {this.context.t('cancel')}
-            </button>
-            <button
-              className="btn-secondary hide-token-confirmation__button btn--large"
+            </Button>
+            <Button
+              type="secondary"
+              className="hide-token-confirmation__button"
              data-testid="hide-token-confirmation__hide"
              onClick={() => hideToken(address)}
            >
              {this.context.t('hide')}
-            </button>
+            </Button>
          </div>
        </div>
      </div>
--- a/ui/app/components/app/modals/hide-token-confirmation-modal/index.scss
+++ b/ui/app/components/app/modals/hide-token-confirmation-modal/index.scss
@ -51,11 +51,6 @@
  }

  &__button {
-    @include Paragraph;
-
-    @extend %button;
-
-    width: 141px;
    margin: 0 5px;
  }
 }
--- a/ui/app/components/app/transaction-list-item-details/index.scss
+++ b/ui/app/components/app/transaction-list-item-details/index.scss
@ -16,7 +16,7 @@
    flex-direction: row;
  }

-  &__header-button {
+  & &__header-button {
    font-size: 0.625rem;

    &:not(:last-child) {
--- a/ui/app/components/app/transaction-list-item/index.scss
+++ b/ui/app/components/app/transaction-list-item/index.scss
@ -9,7 +9,7 @@
    color: $Grey-500;
  }

-  &--unconfirmed {
+  & &--unconfirmed {
    color: $Grey-500;
  }

--- a/ui/app/components/app/wallet-overview/index.scss
+++ b/ui/app/components/app/wallet-overview/index.scss
@ -83,7 +83,7 @@
    color: $Grey-400;
  }

-  &__button {
+  .wallet-overview &__button {
    @extend %asset-buttons;
  }
 }
@ -115,7 +115,7 @@
    color: $Grey-400;
  }

-  &__button {
+  .wallet-overview &__button {
    @extend %asset-buttons;
  }
 }
--- a/ui/app/components/ui/button/button.stories.js
+++ b/ui/app/components/ui/button/button.stories.js
@ -67,12 +67,3 @@ export const dangerPrimaryType = () => (
  </Button>
 )

-export const linkType = () => (
-  <Button
-    onClick={action('clicked')}
-    type="link"
-    disabled={boolean('disabled', false)}
-  >
-    {text('text', 'Click me')}
-  </Button>
-)
--- a/ui/app/components/ui/button/buttons.scss
+++ b/ui/app/components/ui/button/buttons.scss
@ -10,7 +10,7 @@ $hover-red-primary: #c72837;
 $hover-orange: #ffd3b5;
 $warning-light-orange: #f8b588;

-%button {
+.button {
  @include H6;

  font-weight: 500;
@ -30,41 +30,6 @@ $warning-light-orange: #f8b588;
    opacity: 0.5;
    pointer-events: none;
  }
-}
-
-%link {
-  @include H4;
-
-  color: $Blue-500;
-  line-height: 1.25rem;
-  cursor: pointer;
-  background-color: transparent;
-
-  &:hover {
-    color: $Blue-400;
-  }
-
-  &:active {
-    color: $Blue-600;
-  }
-
-  &--disabled,
-  &[disabled] {
-    cursor: auto;
-    opacity: 1;
-    pointer-events: none;
-    color: $hover-secondary;
-  }
-}
-
-%small-link {
-  @extend %link;
-
-  @include H6;
-}
-
-.button {
-  @extend %button;

  &__icon {
    display: flex;
@ -202,7 +167,28 @@ $warning-light-orange: #f8b588;
 }

 .btn-link {
-  @extend %link;
+  @include H4;
+
+  color: $Blue-500;
+  line-height: 1.25rem;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    color: $Blue-400;
+  }
+
+  &:active {
+    color: $Blue-600;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: 1;
+    pointer-events: none;
+    color: $hover-secondary;
+  }
 }

 .btn--large {
--- a/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import Button from '../../button'

 export default class PageContainerHeader extends Component {
  static propTypes = {
@ -72,7 +73,7 @@ export default class PageContainerHeader extends Component {

        {
          onClose && headerCloseText
-            ? <div className="page-container__header-close-text" onClick={() => onClose()}>{ headerCloseText }</div>
+            ? <Button type="link" className="page-container__header-close-text" onClick={() => onClose()}>{ headerCloseText }</Button>
            : onClose && (
              <div
                className="page-container__header-close"
--- a/ui/app/components/ui/ui-components.scss
+++ b/ui/app/components/ui/ui-components.scss
@ -0,0 +1,37 @@
+/** Please import your files in alphabetical order **/
+@import 'account-mismatch-warning/index';
+@import 'alert-circle-icon/index';
+@import 'alert/index';
+@import 'breadcrumbs/index';
+@import 'button-group/index';
+@import 'button/buttons';
+@import 'card/index';
+@import 'check-box/index';
+@import 'circle-icon/index';
+@import 'currency-display/index';
+@import 'currency-input/index';
+@import 'dialog/dialog';
+@import 'dropdown/dropdown';
+@import 'editable-label/index';
+@import 'error-message/index';
+@import 'export-text-container/index';
+@import 'icon-border/icon-border';
+@import 'icon-with-fallback/icon-with-fallback';
+@import 'icon-with-label/index';
+@import 'icon/index';
+@import 'icon/preloader/index';
+@import 'identicon/index';
+@import 'info-tooltip/index';
+@import 'list-item/index';
+@import 'menu/menu';
+@import 'page-container/index';
+@import 'popover/index';
+@import 'pulse-loader/index';
+@import 'qr-code/index';
+@import 'readonly-input/index';
+@import 'sender-to-recipient/index';
+@import 'snackbar/index';
+@import 'tabs/index';
+@import 'toggle-button/index';
+@import 'token-balance/index';
+@import 'unit-input/index';
--- a/ui/app/css/design-system/index.scss
+++ b/ui/app/css/design-system/index.scss
@ -1,4 +1,5 @@
-@import './colors.scss';
-@import './deprecated-colors.scss';
-@import './typography.scss';
-@import './breakpoints.scss';
+@import 'breakpoints';
+@import 'colors';
+@import 'deprecated-colors';
+@import 'typography';
+@import 'z-index';
--- a/ui/app/css/design-system/z-index.scss
+++ b/ui/app/css/design-system/z-index.scss
@ -0,0 +1,12 @@
+/*
+  Z-Indicies
+*/
+$dropdown-z-index: 30;
+$token-icon-z-index: 15;
+$container-z-index: 15;
+$header-z-index: 12;
+$mobile-header-z-index: 26;
+$main-container-z-index: 18;
+$send-card-z-index: 20;
+$sidebar-z-index: 26;
+$sidebar-overlay-z-index: 25;
--- a/ui/app/css/index.scss
+++ b/ui/app/css/index.scss
@ -7,6 +7,9 @@
@import './reset.scss';
@import './design-system/index';
@import './base-styles.scss';
+@import '../components/app/app-components';
+@import '../components/ui/ui-components';
+@import '../pages/pages';

 /*
  ITCSS
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@ -1,9 +1,3 @@
-@import '../../../components/ui/button/buttons';
-@import '../../../components/ui/dialog/dialog';
-@import '../../../components/ui/snackbar/index';
-@import '../../../components/ui/list-item/index';
-@import '../../../components/ui/popover/index';
-@import '../../../components/ui/icon/preloader/index';
@import './footer';
@import './network';
@import './newui-sections';
@ -14,4 +8,3 @@
@import './gas-slider';
@import './simple-dropdown';
@import './pages/index';
-@import '../../../components/app/index';
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@ -1,16 +1,3 @@
-/*
-  Z-Indicies
- */
-$dropdown-z-index: 30;
-$token-icon-z-index: 15;
-$container-z-index: 15;
-$header-z-index: 12;
-$mobile-header-z-index: 26;
-$main-container-z-index: 18;
-$send-card-z-index: 20;
-$sidebar-z-index: 26;
-$sidebar-overlay-z-index: 25;
-
 // Flex
 %row-nowrap {
  display: flex;
--- a/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss
+++ b/ui/app/pages/add-token/token-list/token-list-placeholder/index.scss
@ -18,8 +18,6 @@
  }

  &__link {
-    @extend %link;
-
    margin-top: 0.5rem;
  }
 }
--- a/ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
+++ b/ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Button from '../../../../components/ui/button'

 export default class TokenListPlaceholder extends Component {
  static contextTypes = {
@ -13,14 +14,15 @@ export default class TokenListPlaceholder extends Component {
        <div className="token-list-placeholder__text">
          { this.context.t('addAcquiredTokens') }
        </div>
-        <a
+        <Button
+          type="link"
          className="token-list-placeholder__link"
          href="https://metamask.zendesk.com/hc/en-us/articles/360015489031"
          target="_blank"
          rel="noopener noreferrer"
        >
          { this.context.t('learnMore') }
-        </a>
+        </Button>
      </div>
    )
  }
--- a/ui/app/pages/pages.scss
+++ b/ui/app/pages/pages.scss
@ -1,18 +1,20 @@
-@import 'unlock-page/index';
+/** Please import your files in alphabetical order **/
@import 'add-token/index';
-@import 'error/index';
-@import 'home/index';
-@import 'send/send';
+@import 'asset/asset';
@import 'confirm-add-token/index';
+@import 'confirm-approve/index';
@import 'confirm-decrypt-message/confirm-decrypt-message';
@import 'confirm-encryption-public-key/confirm-encryption-public-key';
@import 'connected-sites/index';
@import 'connected-accounts/index';
-@import 'settings/index';
-@import 'first-time-flow/index';
-@import 'keychains/index';
-@import 'confirm-approve/index';
-@import 'permissions-connect/index';
-@import 'asset/asset';
-@import 'token/index';
+@import 'connected-sites/index';
@import 'create-account/index';
+@import 'error/index';
+@import 'first-time-flow/index';
+@import 'home/index';
+@import 'keychains/index';
+@import 'permissions-connect/index';
+@import 'send/send';
+@import 'settings/index';
+@import 'token/index';
+@import 'unlock-page/index';
--- a/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
+++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
@ -7,6 +7,7 @@ import Dialog from '../../../../components/ui/dialog'
 import ContactList from '../../../../components/app/contact-list'
 import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component'
 import { ellipsify } from '../../send.utils'
+import Button from '../../../../components/ui/button'

 export default class AddRecipient extends Component {

@ -147,13 +148,14 @@ export default class AddRecipient extends Component {

    return (
      <div className="send__select-recipient-wrapper__list">
-        <div
+        <Button
+          type="link"
          className="send__select-recipient-wrapper__list__link"
          onClick={() => this.setState({ isShowingTransfer: false })}
        >
          <div className="send__select-recipient-wrapper__list__back-caret" />
          { t('backToAll') }
-        </div>
+        </Button>
        <RecipientGroup
          label={t('myAccounts')}
          items={ownedAccounts}
@ -177,12 +179,13 @@ export default class AddRecipient extends Component {
        >
          {
            (ownedAccounts && ownedAccounts.length > 1) && !query && (
-              <div
+              <Button
+                type="link"
                className="send__select-recipient-wrapper__list__link"
                onClick={() => this.setState({ isShowingTransfer: true })}
              >
                { t('transferBetweenAccounts') }
-              </div>
+              </Button>
            )
          }
        </ContactList>
--- a/ui/app/pages/send/send.scss
+++ b/ui/app/pages/send/send.scss
@ -14,12 +14,12 @@
    }

    .page-container__header-close-text {
-      @extend %link;
-
      font-size: 1rem;
      line-height: 1.1875rem;
      position: absolute;
      right: 1rem;
+      top: 6px;
+      width: min-content;
    }
  }

@ -50,13 +50,13 @@
      overflow-y: auto;

      &__link {
-        @extend %link;
        @extend %row-nowrap;

        padding: 1rem;
        font-size: 1rem;
        border-bottom: 1px solid $alto;
        align-items: center;
+        justify-content: flex-start;
      }

      &__back-caret {
@ -78,13 +78,12 @@
      @extend %col-nowrap;

      &__load-more {
-        @extend %link;
-
        font-size: 0.75rem;
        line-height: 1.0625rem;
        padding: 0.5rem;
        text-align: center;
        border-bottom: 1px solid $alto;
+        justify-content: flex-start;
      }
    }

--- a/ui/app/pages/settings/info-tab/index.scss
+++ b/ui/app/pages/settings/info-tab/index.scss
@ -21,6 +21,11 @@
    }
  }

+  &__link-text {
+    width: max-content;
+    padding: 0;
+  }
+
  &__link-item {
    padding: 15px 0;

@ -29,10 +34,6 @@
    }
  }

-  &__link-text {
-    @extend %link;
-  }
-
  &__version-number {
    padding-top: 5px;
    font-size: 13px;
--- a/ui/app/pages/settings/info-tab/info-tab.component.js
+++ b/ui/app/pages/settings/info-tab/info-tab.component.js
@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import Button from '../../../components/ui/button'

 export default class InfoTab extends PureComponent {
  state = {
@ -19,71 +20,71 @@ export default class InfoTab extends PureComponent {
          { t('links') }
        </div>
        <div className="info-tab__link-item">
-          <a
+          <Button
+            type="link"
            href="https://metamask.io/privacy.html"
            target="_blank"
            rel="noopener noreferrer"
+            className="info-tab__link-text"
          >
-            <span className="info-tab__link-text">
-              { t('privacyMsg') }
-            </span>
-          </a>
+            { t('privacyMsg') }
+          </Button>
        </div>
        <div className="info-tab__link-item">
-          <a
+          <Button
+            type="link"
            href="https://metamask.io/terms.html"
            target="_blank"
            rel="noopener noreferrer"
+            className="info-tab__link-text"
          >
-            <span className="info-tab__link-text">
-              { t('terms') }
-            </span>
-          </a>
+            { t('terms') }
+          </Button>
        </div>
        <div className="info-tab__link-item">
-          <a
+          <Button
+            type="link"
            href="https://metamask.io/attributions.html"
            target="_blank"
            rel="noopener noreferrer"
+            className="info-tab__link-text"
          >
-            <span className="info-tab__link-text">
-              { t('attributions') }
-            </span>
-          </a>
+            { t('attributions') }
+          </Button>
        </div>
        <hr className="info-tab__separator" />
        <div className="info-tab__link-item">
-          <a
+          <Button
+            type="link"
            href="https://support.metamask.io"
            target="_blank"
            rel="noopener noreferrer"
+            className="info-tab__link-text"
          >
-            <span className="info-tab__link-text">
-              { t('supportCenter') }
-            </span>
-          </a>
+            { t('supportCenter') }
+          </Button>
        </div>
        <div className="info-tab__link-item">
-          <a
+          <Button
+            type="link"
            href="https://metamask.io/"
            target="_blank"
            rel="noopener noreferrer"
+            className="info-tab__link-text"
          >
-            <span className="info-tab__link-text">
-              { t('visitWebSite') }
-            </span>
-          </a>
+            { t('visitWebSite') }
+          </Button>
        </div>
        <div className="info-tab__link-item">
-          <a
+          <Button
+            type="link"
            href="https://metamask.zendesk.com/hc/en-us/requests/new"
            target="_blank"
            rel="noopener noreferrer"
+            className="info-tab__link-text"
          >
-            <span className="info-tab__link-text">
-              { t('contactUs') }
-            </span>
-          </a>
+            { t('contactUs') }
+          </Button>
        </div>
      </div>
    )
--- a/ui/app/pages/settings/settings-tab/index.scss
+++ b/ui/app/pages/settings/settings-tab/index.scss
@ -5,12 +5,6 @@
    color: $crimson;
  }

-  &__advanced-link {
-    @extend %small-link;
-
-    padding-left: 5px;
-  }
-
  &__rpc-save-button {
    align-self: flex-end;
    padding: 5px;