Make height consistent on all row in send-content (#6480)

* Update all send-content row to 54px height * Remove header subtitle * Remove tests that check for send screen subheader
MetaMask · Apr 18, 2019 · 3519e90 · 3519e90
1 parent ed23801
commit 3519e90
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 16 deletions.
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
@@ -50,9 +50,6 @@ async function runSendFlowTest (assert, done) {
   const sendTitle = await queryAsync($, '.page-container__title')
   assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct')
 
-  const sendCopy = await queryAsync($, '.page-container__subtitle')
-  assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy')
-
   const sendFromField = await queryAsync($, '.send-v2__form-field')
   assert.ok(sendFromField[0], 'send screen has a from field')
 

diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss
@@ -65,6 +65,7 @@
 .gas-price-button-group--small {
   display: flex;
   justify-content: stretch;
+  height: 54px;
 
   @media screen and (max-width: $break-small) {
     max-width: 260px;
@@ -80,10 +81,14 @@
 
   &__label {
     font-weight: 500;
+    line-height: 16px;
+    padding-bottom: 4px;
   }
 
   &__primary-currency {
     font-size: 12px;
+    line-height: 12px;
+    padding-bottom: 2px;
 
     @media screen and (max-width: 575px) {
       font-size: 10px;
@@ -92,6 +97,8 @@
 
   &__secondary-currency {
     font-size: 12px;
+    line-height: 12px;
+    padding-bottom: 2px;
 
     @media screen and (max-width: 575px) {
       font-size: 10px;
@@ -105,11 +112,7 @@
   .button-group__button, .button-group__button--active {
     background: white;
     color: $scorpion;
-    padding: 2px 8.5px 4px 8.5px;
-
-    @media screen and (max-width: $break-small) {
-      padding-left: 4px;
-    }
+    padding: 0 4px;
 
     div {
       display: flex;

diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss
@@ -7,7 +7,7 @@
   border-radius: 4px;
   background-color: #fff;
   color: #4d4d4d;
-  font-size: 1rem;
+  font-size: 16px;
   padding: 8px 10px;
   position: relative;
 
@@ -29,6 +29,8 @@
 
   &__inputs {
     flex: 1 0 auto;
+    display: flex;
+    flex-flow: column nowrap;
   }
 
   &__input {
@@ -38,15 +40,20 @@
     border: none;
     outline: 0 !important;
     max-width: 22ch;
+    height: 16px;
+    line-height: 18px;
   }
 
   &__input-container {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    padding-bottom: 4px;
   }
 
   &__suffix {
     margin-left: 3px;
+    font-size: 1rem;
+    line-height: 1rem;
   }
 
   &--error {

diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
@@ -633,14 +633,14 @@
   }
 
   &__asset-dropdown {
-    height: 62px;
+    height: 54px;
     border: none;
 
     &__asset {
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
-      padding: 10px 8px;
+      padding: 0 8px;
       cursor: pointer;
 
       &:hover {
@@ -688,22 +688,30 @@
       border-radius: 4px;
       background-color: $white;
       box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
-      top: 55px;
+      top: 65px;
       left: 0;
       box-sizing: content-box;
       overflow-y: scroll;
+      margin-top: 0;
+      padding: 4px 0;
+
+      .send-v2__asset-dropdown__asset {
+        padding: 8px;
+      }
     }
 
     &__input-wrapper {
       border: 1px solid $alto;
       border-radius: 4px;
+      height: 100%;
 
       &--opened {
         position: relative;
         z-index: 2050;
       }
 
       .send-v2__asset-dropdown__asset {
+        height: 100%;
         &:hover {
           background-color: $white;
         }

diff --git a/ui/app/pages/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js
@@ -25,7 +25,6 @@ export default class SendHeader extends Component {
     return (
       <PageContainerHeader
         onClose={() => this.onClose()}
-        subtitle={this.context.t(...this.props.subtitleParams)}
         title={this.context.t(this.props.titleKey)}
       />
     )

diff --git a/ui/app/pages/send/send-header/tests/send-header-component.test.js b/ui/app/pages/send/send-header/tests/send-header-component.test.js
@@ -57,10 +57,8 @@ describe('SendHeader Component', function () {
     it('should pass the correct props to PageContainerHeader', () => {
       const {
         onClose,
-        subtitle,
         title,
       } = wrapper.find(PageContainerHeader).props()
-      assert.equal(subtitle, 'mockSubtitleKeymockVal')
       assert.equal(title, 'mockTitleKey')
       assert.equal(SendHeader.prototype.onClose.callCount, 0)
       onClose()