Merge pull request #304 from LiskHQ/171-implement-breakpoints-of-auth…

…entication-inputs Implement breakpoints of authentication inputs - Closes #171
LiskHQ · Feb 12, 2018 · 8e4b3f6 · 8e4b3f6
2 parents 00996e5 + 1f975c8
commit 8e4b3f6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/components/passphraseInput/index.js b/src/components/passphraseInput/index.js
@@ -96,6 +96,12 @@ class PassphraseInput extends React.Component {
         {this.state.isFocused
           ?
           <div className={styles.wrapper}>
+            <div
+              className={`show-passphrase-toggle ${styles.inputTypeToggle}`}
+              onClick={this.toggleInputType.bind(this)}>
+              <FontIcon className={styles.eyeIcon} value={this.state.inputType === 'password' ? 'hide' : 'show'}
+              /> <label>{this.state.inputType === 'password' ? this.props.t('Show passphrase') : this.props.t('Hide passphrase') }</label>
+            </div>
             <div className={grid.row}>
               {[...Array(12)].map((x, i) =>
                 <div className={`${grid[xs]} ${grid[sm]} ${grid[md]}`} key={i}>
@@ -126,12 +132,6 @@ class PassphraseInput extends React.Component {
               )}
             </div>
             <div className={styles.errorMessage}>{this.props.error}</div>
-            <div
-              className={`show-passphrase-toggle ${styles.inputTypeToggle}`}
-              onClick={this.toggleInputType.bind(this)}>
-              <FontIcon className={styles.eyeIcon} value={this.state.inputType === 'password' ? 'hide' : 'show'}
-              /> <label>{this.state.inputType === 'password' ? this.props.t('Show passphrase') : this.props.t('Hide passphrase') }</label>
-            </div>
           </div>
           :
           <Input label={this.props.label}

diff --git a/src/components/passphraseInput/passphraseInput.css b/src/components/passphraseInput/passphraseInput.css
@@ -40,7 +40,7 @@
 
 .errorMessage {
   color: var(--color-error);
-  height: 20px;
+  height: auto;
   font-weight: var(--font-weight-semi-bold);
   padding-top: 10px;
 }
@@ -55,11 +55,18 @@
 
 @media (--small-viewport) {
   .inputTypeToggle {
-    top: -80px;
+    top: 10px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .errorMessage {
+    padding-bottom: 10px;
   }
 
   .wrapper {
-    margin-top: 50px;
+    margin-top: 0;
+    padding-top: 40px;
   }
 }
 

diff --git a/src/components/passphraseSteps/passphraseSteps.css b/src/components/passphraseSteps/passphraseSteps.css
@@ -9,6 +9,11 @@
   overflow-y: hidden;
   box-sizing: border-box;
   height: 100%;
+
+  & footer {
+    width: 100%;
+    padding: 0 0 50px;
+  }
 }
 
 .button {
@@ -17,7 +22,7 @@
 }
 
 .headerWrapper {
-  padding: 20px 0px;
+  padding: 20px 0px 0;
 
   & h2 {
     font-weight: var(--font-weight-semi-bold);
@@ -29,3 +34,17 @@
 .input {
   padding: 5px !important;
 }
+
+@media (--small-viewport) {
+  .wrapper {
+    padding: 0px 30px 80px;
+    flex-direction: row;
+    max-height: 100%;
+    overflow: scroll;
+
+    & footer {
+      padding: 0;
+      margin-bottom: 30px;
+    }
+  }
+}