Merge pull request #442 from LiskHQ/400-spaces-in-passphrase

Fix the spaces between the words of the copied passphrase - Closes #400
LiskHQ · Feb 19, 2018 · 586c72f · 586c72f
2 parents 3ec98d6 + 968c336
commit 586c72f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 19 deletions.
diff --git a/src/components/passphrase/safekeeping/index.js b/src/components/passphrase/safekeeping/index.js
@@ -88,7 +88,10 @@ class SafeKeeping extends React.Component {
                   value: 'revealing-step',
                 }}/>
             </TransitionWrapper>
-            <p className={`${styles.input} ${styles.textarea} passphrase`}>
+            <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>)
               }

diff --git a/src/components/passphrase/safekeeping/index.test.js b/src/components/passphrase/safekeeping/index.test.js
@@ -49,7 +49,7 @@ describe('Passphrase: Safekeeping', () => {
   });
 
   it('renders a 12 .word elements to show the passphrase in', () => {
-    expect(wrapper.find('.passphrase span')).to.have.lengthOf(12);
+    expect(wrapper.find('.passphrase-wrapper span')).to.have.lengthOf(12);
   });
 
   it('renders an ActionBar component', () => {

diff --git a/src/components/passphrase/safekeeping/safekeeping.css b/src/components/passphrase/safekeeping/safekeeping.css
@@ -31,11 +31,11 @@
 
 .bigSlider {
   position: absolute;
-  top: 50%;
+  top: 100px;
   left: 50%;
   width: 575px !important;
-  transform: translateX(-50%) translateY(calc(-50% - 58px));
-  z-index: 2;
+  transform: translateX(-50%) translateY(-50%);
+  z-index: 3;
 
   & label {
     & i:last-child {
@@ -123,17 +123,13 @@
       height: 80px;
       background: transparent;
       padding: 0;
-      text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
-      color: rgba(0, 0, 0, 0);
+      color: transparent;
       font-size: 0;
       line-height: 0;
       border: none;
       text-align: center;
-      resize: none;
-      outline: none !important;
-      transition: all ease 400ms;
-      transition-delay: 300ms;
       counter-reset: section;
+      position: relative;
 
       & .word {
         padding: 0 5px;
@@ -142,6 +138,7 @@
         margin-top: 23px;
         display: inline-block;
         line-height: 30px;
+        user-select: none;
 
         &::after {
           opacity: 0;
@@ -152,12 +149,35 @@
           font-size: 15px;
           counter-increment: section;
           content: counter(section);
+          transform: translateX(-50%);
           transition: all ease 400ms;
           -webkit-user-select: none;
         }
       }
     }
 
+    & .hiddenInput {
+      position: absolute;
+      user-select: none;
+      text-align: center;
+      width: 100%;
+      padding: 25px 0;
+      line-height: 30px;
+      height: 30px;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      resize: none;
+      border: none;
+      background: transparent;
+      font-size: 26px;
+      text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
+      color: rgba(0, 0, 0, 0);
+      outline: none !important;
+      transition: all ease 400ms;
+      transition-delay: 300ms;
+    }
+
     & section.actionBar {
       pointer-events: none;
       visibility: hidden;
@@ -175,14 +195,15 @@
       display: none !important;
     }
 
-    & .textarea {
+    & .hiddenInput {
       background: #f1f1f1;
       color: #000 !important;
       text-shadow: none !important;
+      user-select: auto;
+    }
 
-      & .word::after {
-        opacity: 1;
-      }
+    & .textarea .word::after {
+      opacity: 1;
     }
 
     & section.actionBar {
@@ -192,10 +213,11 @@
   }
 }
 
-@media (--medium-viewport) {
-  .safekeeping {
-    & .word {
-      font-size: 22px !important;
+@media (max-width: 1200px) {
+  .safekeeping .revealing {
+    & .textarea .word,
+    & .hiddenInput {
+      font-size: 20px;
     }
   }
 }
@@ -272,6 +294,13 @@
           top: auto !important;
         }
       }
+
+      & .hiddenInput {
+        height: 100%;
+        word-spacing: 200px;
+        line-height: 60px;
+        padding: 0;
+      }
     }
 
     & .bigSlider,