Merge pull request #343 from LiskHQ/298-height-issues

Adjust breakpoints and height - Closes #298

src/components/app/app.css

@@ -46,7 +46,6 @@ body {
 .mainBox {
   margin: 0 auto;
   max-width: var(--main-box-width);
-  height: -webkit-fill-available;
 }
 
 @media (--medium-viewport) {

src/components/box/box.css

@@ -17,7 +17,7 @@
   -webkit-overflow-scrolling: touch;
 
   & footer {
-    padding: 50px 0px;
+    padding: 0 0 50px;
     text-align: center;
 
     & :global .subTitle {
@@ -34,10 +34,6 @@
     min-height: calc(100vh - var(--m-menu-bar-height) - var(--m-menu-bar-height)); /* stylelint-disable-line */
     background-color: var(--color-grayscale-mobile-background);
     box-shadow: unset;
-
-    & footer {
-      padding-bottom: 70px;
-    }
   }
 }
 
@@ -47,7 +43,6 @@
 
     & footer {
       position: relative;
-      padding: 20px 0 40px;
     }
   }
 }

src/components/login/login.css

@@ -20,10 +20,6 @@
   --back-button-icon-font-size-L: 16px;
 }
 
-footer {
-  padding-bottom: 0px;
-}
-
 @keyframes delayedFadeIn {
   0% { opacity: 0; }
   75% { opacity: 0; }
@@ -52,14 +48,19 @@ footer {
 
 .login {
   width: 42%;
+  overflow: scroll;
+
+  & footer {
+    padding-top: 7vh; /* stylelint-disable-line */
+  }
 
   & .table {
     position: relative;
   }
 
   & h2 {
     color: var(--color-black);
-    margin-top: 102px;
+    margin-top: 30vh; /* stylelint-disable-line */
     margin-bottom: 20px;
   }
 
@@ -114,7 +115,6 @@ footer {
 
     & h2 {
       font-size: var(--header-focused-font-size);
-      margin-top: 8em;
     }
   }
 }
@@ -221,7 +221,7 @@ footer {
 
   & h2 {
     color: var(--color-white);
-    margin-top: 0px;
+    margin-top: 32vh; /* stylelint-disable-line */
     margin-bottom: 24px;
   }
 
@@ -274,11 +274,6 @@ footer {
   display: table;
   width: 100%;
   height: 100%;
-
-  & .tableCell {
-    display: table-cell;
-    vertical-align: middle;
-  }
 }
 
 .outTaken {
@@ -447,9 +442,12 @@ footer {
   .login {
     height: calc(100vh - var(--m-top-bar-height) - var(--m-menu-bar-height)); /* stylelint-disable-line */
     width: 40%;
+  }
 
+  .login,
+  .signUp {
     & h2 {
-      margin-top: 122px;
+      margin-top: 28vh; /* stylelint-disable-line */
     }
   }
 
@@ -483,6 +481,7 @@ footer {
 
     & h2 {
       font-size: var(--font-size-h2-s);
+      margin-top: 12vh; /* stylelint-disable-line */
     }
   }
 
@@ -502,7 +501,6 @@ footer {
       height: auto;
 
       & h2 {
-        margin-top: 20px;
         margin-bottom: 10px;
       }
 
@@ -553,10 +551,6 @@ footer {
       border-radius: 0;
     }
 
-    & h2 {
-      margin-top: 40px;
-    }
-
     &.focused {
       width: 100vw; /* stylelint-disable-line */
     }
@@ -601,6 +595,15 @@ footer {
   }
 }
 
+@media (--xSmall-viewport) {
+  .login,
+  .signUp {
+    & h2 {
+      margin-top: 8vh; /* stylelint-disable-line */
+    }
+  }
+}
+
 .input {
   padding-bottom: 0px;
 }

src/components/login/login.js

@@ -200,7 +200,7 @@ class Login extends React.Component {
         </section>
         <section className={`${styles.signUp} ${styles[this.state.passInputState]}`}>
           <section className={styles.table}>
-            <div className={`${styles.tableCell} text-left`}>
+            <div className='text-left'>
               <h2>
                 <Link className='new-account-button' to='/register'>
                   {this.props.t('Get access')}

src/components/mainMenu/mainMenu.css

@@ -62,7 +62,6 @@
 @media (max-height: 920px) {
   .drawer.left {
     display: block;
-    overflow: hidden;
     height: 100%;
   }
 }
@@ -103,7 +102,7 @@
 }
 
 .label {
-  padding: 45px 10px;
+  padding: 4.5vh 10px; /* stylelint-disable-line */
   font-size: 1.125em;
   color: var(--color-black);
   font-weight: bold;

src/components/passphraseSteps/passphraseSteps.css

@@ -3,7 +3,7 @@
 .wrapper {
   padding: 0px 30px 20px;
   display: flex;
-  flex-flow: column wrap;
+  flex-flow: column;
   justify-content: space-between;
   width: 100%;
   overflow-y: hidden;
@@ -12,7 +12,6 @@
 
   & footer {
     width: 100%;
-    padding: 0 0 50px;
   }
 }
 
@@ -38,13 +37,7 @@
 @media (--small-viewport) {
   .wrapper {
     padding: 0px 30px 80px;
-    flex-direction: row;
     max-height: 100%;
     overflow: scroll;
-
-    & footer {
-      padding: 0;
-      margin-bottom: 30px;
-    }
   }
 }

src/components/resultBox/resultBox.css

@@ -23,7 +23,7 @@
   }
 
   & footer {
-    padding: 50px 0 0;
+    padding: 0px;
   }
 
   & p {
@@ -45,10 +45,6 @@
 @media (--small-viewport) {
   .resultBox {
     height: calc(100vh - 58px - 62px); /* stylelint-disable-line */
-
-    & .header {
-      height: 60px;
-    }
   }
 
   .icon {

src/components/resultBox/resultBox.js

@@ -15,35 +15,37 @@ class ResultBox extends React.Component {
   render() {
     return (
       <div className={`${styles.resultBox} boxPadding`}>
-        <article>
-          <div className={styles.header}>
-            {this.props.success
-              ? <img src={check} className={styles.icon}/>
-              : <FontIcon value='error' className={styles.icon}/>
-            }
-          </div>
+        <div></div>
+
+        <div>
           <header>
+            <div className={styles.header}>
+              {this.props.success
+                ? <img src={check} className={styles.icon}/>
+                : <FontIcon value='error' className={styles.icon}/>
+              }
+            </div>
             <h2>{this.props.title}</h2>
           </header>
+
           <p className='result-box-message'>
             {this.props.body}
           </p>
-
           {this.props.copy ?
             <CopyToClipboard value={this.props.copy.value}
               text={this.props.copy.title}
               className={`${styles.copy}`} /> :
             null
           }
+        </div>
 
-          <footer>
-            <Button className={`okay-button ${styles.okButton}`}
-              onClick={() => { this.props.finalCallback(); this.props.reset(); } }>
-              {this.props.t('Okay')}
-            </Button>
-            <div className='subTitle'>{this.props.subTitle}</div>
-          </footer>
-        </article>
+        <footer>
+          <Button className={`okay-button ${styles.okButton}`}
+            onClick={() => { this.props.finalCallback(); this.props.reset(); } }>
+            {this.props.t('Okay')}
+          </Button>
+          <div className='subTitle'>{this.props.subTitle}</div>
+        </footer>
       </div>
 
     );

src/components/searchBar/searchBar.css

@@ -13,6 +13,7 @@
   position: relative;
   width: var(--search-box-width);
   margin-right: 50px;
+  max-width: 500px;
 
   & .icon {
     position: absolute;

src/components/send/index.js

@@ -10,7 +10,7 @@ import SendReadable from './../sendReadable';
 import PassphraseSteps from './../passphraseSteps';
 import { parseSearchParams } from './../../utils/searchParams';
 import breakpoints from './../../constants/breakpoints';
-import styles from './styles.css';
+import styles from './send.css';
 
 class Send extends React.Component {
   constructor(props) {

src/components/send/index.test.js

@@ -4,7 +4,7 @@ import { expect } from 'chai';
 import { mountWithContext } from '../../../test/utils/mountHelpers';
 import MultiStep from '../multiStep';
 import Send from './index';
-import styles from './styles.css';
+import styles from './send.css';
 
 describe('Send', () => {
   let wrapper;

src/components/send/styles.css → src/components/send/send.css

@@ -20,6 +20,10 @@
 
     &.isActive {
       top: var(--m-top-bar-height);
+
+      & .wrapper {
+        padding-bottom: 100px;
+      }
     }
   }
 
@@ -57,6 +61,10 @@
 
     &.isActive {
       top: var(--s-top-bar-height);
+
+      & .wrapper {
+        padding-bottom: 50px;
+      }
     }
   }
 

src/components/sendReadable/send.js

@@ -5,7 +5,7 @@ import AccountVisual from '../accountVisual';
 import { Button, PrimaryButton } from './../toolbox/buttons/button';
 import Input from '../toolbox/inputs/input';
 import fees from './../../constants/fees';
-import styles from './send.css';
+import styles from './sendReadable.css';
 
 class SendReadable extends React.Component {
   constructor() {

src/components/sendReadable/send.css → src/components/sendReadable/sendReadable.css

@@ -5,7 +5,7 @@
 }
 
 .wrapper {
-  padding: 0px 30px 20px;
+  padding: 0px 30px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -46,7 +46,6 @@ input:read-only {
   text-align: center;
 
   & .header {
-    height: 270px;
     position: relative;
   }
 
@@ -83,7 +82,6 @@ input:read-only {
   }
 
   & h2 {
-    font-weight: var(--font-weight-bold);
     margin-bottom: 0;
     font-size: 2em;
   }
@@ -111,10 +109,6 @@ input:read-only {
   width: 100%;
 }
 
-.header {
-  height: 300px;
-}
-
 .accountVisual {
   margin: 13px 0px;
 }

src/components/sendWritable/send.js

@@ -5,7 +5,7 @@ import { authStatePrefill } from '../../utils/form';
 import AccountVisual from '../accountVisual';
 import Input from '../toolbox/inputs/input';
 import fees from './../../constants/fees';
-import styles from './send.css';
+import styles from './sendWritable.css';
 import regex from './../../utils/regex';
 import inputTheme from './input.css';
 

src/components/sendWritable/send.css → src/components/sendWritable/sendWritable.css

@@ -103,10 +103,6 @@ input:read-only {
   .headerWrapper {
     display: none;
   }
-
-  .header {
-    height: 50px;
-  }
 }
 
 @media (--xSmall-viewport) {