colocate account modal styles with their components (#9150)

This one gets a bit more complicated because the styles were interwoven and needed to be untangled to be moved. Essentially, though, the goal is to put the styles where they make the most sense and colocate them with their components.
mvs-org · Aug 11, 2020 · 01f69d7 · 01f69d7
1 parent 6ba9e65
commit 01f69d7
Show file tree

Hide file tree

Showing 15 changed files with 236 additions and 220 deletions.
diff --git a/test/e2e/ethereum-on.spec.js b/test/e2e/ethereum-on.spec.js
@@ -93,7 +93,7 @@ describe('MetaMask', function () {
       publicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)

diff --git a/test/e2e/from-import-ui.spec.js b/test/e2e/from-import-ui.spec.js
@@ -105,7 +105,7 @@ describe('Using MetaMask with an existing account', function () {
       const [address] = await driver.findElements(By.css('.readonly-input__input'))
       assert.equal(await address.getAttribute('value'), testAddress)
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
       await driver.delay(largeDelayMs)
     })
 
@@ -116,7 +116,7 @@ describe('Using MetaMask with an existing account', function () {
       const detailModal = await driver.findElement(By.css('span .modal'))
       await driver.delay(regularDelayMs)
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
       await driver.wait(until.stalenessOf(detailModal))
       await driver.delay(regularDelayMs)
     })

diff --git a/test/e2e/incremental-security.spec.js b/test/e2e/incremental-security.spec.js
@@ -100,7 +100,7 @@ describe('MetaMask', function () {
 
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
@@ -125,7 +125,7 @@ describe('MetaMask', function () {
       await driver.delay(regularDelayMs)
 
       const accountModal = await driver.findElement(By.css('span .modal'))
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)

diff --git a/test/e2e/permissions.spec.js b/test/e2e/permissions.spec.js
@@ -94,7 +94,7 @@ describe('MetaMask', function () {
       publicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)

diff --git a/test/e2e/signature-request.spec.js b/test/e2e/signature-request.spec.js
@@ -128,7 +128,7 @@ describe('MetaMask', function () {
       const newPublicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)

diff --git a/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js b/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js
@@ -42,9 +42,9 @@ export default class AccountDetailsModal extends Component {
     }
 
     return (
-      <AccountModalContainer>
+      <AccountModalContainer className="account-details-modal">
         <EditableLabel
-          className="account-modal__name"
+          className="account-details-modal__name"
           defaultValue={name}
           onSubmit={(label) => setAccountLabel(address, label)}
         />
@@ -56,11 +56,11 @@ export default class AccountDetailsModal extends Component {
           }}
         />
 
-        <div className="account-modal-divider" />
+        <div className="account-details-modal__divider" />
 
         <Button
           type="secondary"
-          className="account-modal__button"
+          className="account-details-modal__button"
           onClick={() => {
             global.platform.openTab({ url: genAccountLink(address, network, rpcPrefs) })
           }}
@@ -75,7 +75,7 @@ export default class AccountDetailsModal extends Component {
           ? (
             <Button
               type="secondary"
-              className="account-modal__button"
+              className="account-details-modal__button"
               onClick={() => showExportPrivateKeyModal()}
             >
               {this.context.t('exportPrivateKey')}

diff --git a/ui/app/components/app/modals/account-details-modal/index.scss b/ui/app/components/app/modals/account-details-modal/index.scss
@@ -0,0 +1,37 @@
+.account-details-modal {
+  &__name {
+    margin-top: 9px;
+    font-size: 20px;
+  }
+
+  &__button {
+    margin-top: 17px;
+    padding: 10px 22px;
+    width: 286px;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    margin: 19px 0 8px 0;
+    background-color: $alto;
+  }
+
+  & .qr-header {
+    margin-top: 9px;
+    font-size: 20px;
+  }
+
+  & .qr-wrapper {
+    margin-top: 5px;
+  }
+
+  & .ellip-address-wrapper {
+    display: flex;
+    justify-content: center;
+    border: 1px solid $alto;
+    padding: 5px 10px;
+    margin-top: 7px;
+    width: 286px;
+  }
+}
diff --git a/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js b/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js
@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Identicon from '../../../ui/identicon'
+import classnames from 'classnames'
 
 export default function AccountModalContainer (props, context) {
   const {
+    className,
     selectedIdentity,
     showBackButton,
     backButtonAction,
@@ -12,21 +14,21 @@ export default function AccountModalContainer (props, context) {
   } = props
 
   return (
-    <div style={{ borderRadius: '4px' }}>
-      <div className="account-modal-container">
+    <div className={classnames(className, 'account-modal')} style={{ borderRadius: '4px' }}>
+      <div className="account-modal__container">
         <div>
           <Identicon
             address={selectedIdentity.address}
             diameter={64}
           />
         </div>
         {showBackButton && (
-          <div className="account-modal-back" onClick={backButtonAction}>
+          <div className="account-modal__back" onClick={backButtonAction}>
             <i className="fa fa-angle-left fa-lg" />
-            <span className="account-modal-back__text">{' ' + context.t('back')}</span>
+            <span className="account-modal__text">{' ' + context.t('back')}</span>
           </div>
         )}
-        <button className="account-modal-close" onClick={hideModal} />
+        <button className="account-modal__close" onClick={hideModal} />
         {children}
       </div>
     </div>
@@ -44,6 +46,7 @@ AccountModalContainer.defaultProps = {
 }
 
 AccountModalContainer.propTypes = {
+  className: PropTypes.string,
   selectedIdentity: PropTypes.object.isRequired,
   showBackButton: PropTypes.bool,
   backButtonAction: PropTypes.func,

diff --git a/ui/app/components/app/modals/account-modal-container/index.scss b/ui/app/components/app/modals/account-modal-container/index.scss
@@ -0,0 +1,50 @@
+// Account Modal Container
+.account-modal {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    padding: 5px 0 31px 0;
+    border: 1px solid $silver;
+    border-radius: 4px;
+  }
+
+  &__back {
+    color: $dusty-gray;
+    position: absolute;
+    top: 13px;
+    left: 17px;
+    cursor: pointer;
+  }
+
+  &__text {
+    margin-top: 2px;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  &__close {
+    font-size: 40px;
+    background-color: transparent;
+    color: $dusty-gray;
+    position: absolute;
+    cursor: pointer;
+    top: 10px;
+    right: 12px;
+
+    &::after {
+      content: '\00D7';
+    }
+  }
+
+  & .identicon {
+    position: relative;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    top: -32px;
+    margin-bottom: -32px;
+  }
+}
diff --git a/ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js b/ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
@@ -47,7 +47,7 @@ export default class ExportPrivateKeyModal extends Component {
 
   renderPasswordLabel (privateKey) {
     return (
-      <span className="private-key-password-label">
+      <span className="export-private-key-modal__password-label">
         {
           privateKey
             ? this.context.t('copyPrivateKey')
@@ -64,16 +64,16 @@ export default class ExportPrivateKeyModal extends Component {
       return (
         <input
           type="password"
-          className="private-key-password-input"
+          className="export-private-key-modal__password-input"
           onChange={(event) => this.setState({ password: event.target.value })}
         />
       )
     }
 
     return (
       <ReadOnlyInput
-        wrapperClass="private-key-password-display-wrapper"
-        inputClass="private-key-password-display-textarea"
+        wrapperClass="export-private-key-modal__password-display-wrapper"
+        inputClass="export-private-key-modal__password-display-textarea"
         textarea
         value={plainKey}
         onClick={() => copyToClipboard(plainKey)}
@@ -83,12 +83,12 @@ export default class ExportPrivateKeyModal extends Component {
 
   renderButtons (privateKey, address, hideModal) {
     return (
-      <div className="export-private-key-buttons">
+      <div className="export-private-key-modal__buttons">
         {!privateKey && (
           <Button
             type="default"
             large
-            className="export-private-key__button export-private-key__button--cancel"
+            className="export-private-key-modal__button export-private-key-modal__button--cancel"
             onClick={() => hideModal()}
           >
             {this.context.t('cancel')}
@@ -101,7 +101,7 @@ export default class ExportPrivateKeyModal extends Component {
                 onClick={() => hideModal()}
                 type="secondary"
                 large
-                className="export-private-key__button"
+                className="export-private-key-modal__button"
               >
                 {this.context.t('done')}
               </Button>
@@ -111,7 +111,7 @@ export default class ExportPrivateKeyModal extends Component {
                 onClick={() => this.exportAccountAndGetPrivateKey(this.state.password, address)}
                 type="secondary"
                 large
-                className="export-private-key__button"
+                className="export-private-key-modal__button"
                 disabled={!this.state.password}
               >
                 {this.context.t('confirm')}
@@ -139,27 +139,28 @@ export default class ExportPrivateKeyModal extends Component {
 
     return (
       <AccountModalContainer
+        className="export-private-key-modal"
         selectedIdentity={selectedIdentity}
         showBackButton={previousModalState === 'ACCOUNT_DETAILS'}
         backButtonAction={() => showAccountDetailModal()}
       >
-        <span className="account-name">{name}</span>
+        <span className="export-private-key-modal__account-name">{name}</span>
         <ReadOnlyInput
           wrapperClass="ellip-address-wrapper"
           value={checksumAddress(address)}
         />
-        <div className="account-modal-divider" />
-        <span className="modal-body-title">{this.context.t('showPrivateKeys')}</span>
-        <div className="private-key-password">
+        <div className="export-private-key-modal__divider" />
+        <span className="export-private-key-modal__body-title">{this.context.t('showPrivateKeys')}</span>
+        <div className="export-private-key-modal__password">
           {this.renderPasswordLabel(privateKey)}
           {this.renderPasswordInput(privateKey)}
           {
             (showWarning && warning)
-              ? <span className="private-key-password-error">{warning}</span>
+              ? <span className="export-private-key-modal__password--error">{warning}</span>
               : null
           }
         </div>
-        <div className="private-key-password-warning">{this.context.t('privateKeyWarning')}</div>
+        <div className="export-private-key-modal__password--warning">{this.context.t('privateKeyWarning')}</div>
         {this.renderButtons(privateKey, address, hideModal)}
       </AccountModalContainer>
     )