Merge pull request #455 from LiskHQ/454-issues-in-register

Style improvements in Register page - Closes #454
LiskHQ · Feb 26, 2018 · 8ba0ed2 · 8ba0ed2
2 parents 757b750 + 33a04f7
commit 8ba0ed2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/src/components/passphrase/safekeeping/index.js b/src/components/passphrase/safekeeping/index.js
@@ -73,6 +73,14 @@ class SafeKeeping extends React.Component {
         </section>
         <section className={`${styles.revealing} ${styles.table}`}>
           <div className={styles.tableCell}>
+            <p className={`${styles.input} ${styles.textarea} passphrase-wrapper`}>
+              <textarea type='text' autoFocus={true} readOnly
+                className={`${styles.hiddenInput} passphrase`}
+                defaultValue={passphrase}></textarea>
+              {
+                passphrase.split(' ').map(word => <span className={styles.word} key={`wrapper-${word}`}>{ word } </span>)
+              }
+            </p>
             <TransitionWrapper current={this.state.step} step='revealing-step' animationName='fade'>
               <SliderCheckbox
                 label={t('Drag to reveal')}
@@ -88,14 +96,6 @@ class SafeKeeping extends React.Component {
                   value: 'revealing-step',
                 }}/>
             </TransitionWrapper>
-            <p className={`${styles.input} ${styles.textarea} passphrase-wrapper`}>
-              <textarea type='text' autoFocus={true} readOnly
-                className={`${styles.hiddenInput} passphrase`}
-                defaultValue={passphrase}></textarea>
-              {
-                passphrase.split(' ').map(word => <span className={styles.word} key={`wrapper-${word}`}>{ word } </span>)
-              }
-            </p>
             <ActionBar
               className={styles.actionBar}
               secondaryButton={{

diff --git a/src/components/passphrase/safekeeping/safekeeping.css b/src/components/passphrase/safekeeping/safekeeping.css
@@ -31,7 +31,7 @@
 
 .bigSlider {
   position: absolute;
-  top: 100px;
+  margin-top: -40px;
   left: 50%;
   width: 575px !important;
   transform: translateX(-50%) translateY(-50%);
@@ -176,12 +176,14 @@
       outline: none !important;
       transition: all ease 400ms;
       transition-delay: 300ms;
+      overflow: hidden;
     }
 
     & section.actionBar {
       pointer-events: none;
       visibility: hidden;
       text-align: center;
+      margin: 0;
 
       & > div {
         margin: 60px auto 50px;
@@ -310,19 +312,35 @@
         line-height: 48px;
       }
 
-      & div span {
-        font-weight: normal;
-        text-indent: 53px;
+      & div {
+        width: calc(100% - 24px);
+
+        & span {
+          font-weight: normal;
+          text-indent: 53px;
+        }
+
+        &::before {
+          width: calc(100% - 24px);
+        }
       }
     }
 
     & .smallSlider {
       width: 180px !important;
+
+      & div span {
+        font-weight: normal;
+        text-indent: 53px;
+        text-align: center;
+        min-width: 100% !important;
+      }
     }
 
     & .bigSlider {
       width: 330px !important;
-      top: calc(50vh - 48px); /* stylelint-disable-line */
+      top: 50%;
+      margin-top: -200px;
 
       & div > span:first-child {
         display: none;

diff --git a/src/index.html b/src/index.html
@@ -152,6 +152,7 @@
                 top: 50%;
                 margin: 0;
                 transform: translateX(-50%) translateY(-50%);
+                transition: opacity linear 2s;
             }
 
             .splash-screen .logo img {
@@ -232,6 +233,10 @@
                 animation: fadeIn5;
             }
 
+            #app:not(:empty) + .splash-screen .logo {
+                opacity: 0;
+            }
+
             @media (max-width: 1024px) {
                 body {
                     background-color: #f9fbfd;