From bab47b96ce002ea8b049e9e4af06c611a090376d Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Mon, 19 Feb 2018 18:48:51 +0100
Subject: [PATCH 1/4] Add an overlaying textarea to fix the issue of spaces

---
 src/components/passphrase/safekeeping/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/passphrase/safekeeping/index.js b/src/components/passphrase/safekeeping/index.js
index b47b062a1c..d397606c6a 100644
--- a/src/components/passphrase/safekeeping/index.js
+++ b/src/components/passphrase/safekeeping/index.js
@@ -89,6 +89,9 @@ class SafeKeeping extends React.Component {
                 }}/>
             </TransitionWrapper>
             <p className={`${styles.input} ${styles.textarea} passphrase`}>
+              <textarea type='text' autoFocus={true} readOnly
+                className={`${styles.hiddenInput}`}
+                defaultValue={passphrase}></textarea>
               {
                 passphrase.split(' ').map(word => <span className={styles.word} key={`wrapper-${word}`}>{ word } </span>)
               }

From 2e432d8358aad0688e9310651e2562d168433c5c Mon Sep 17 00:00:00 2001
From: reyraa <ali@lightcurve.io>
Date: Mon, 19 Feb 2018 18:49:22 +0100
Subject: [PATCH 2/4] Update the styling to work witht he included textarea

---
 .../passphrase/safekeeping/safekeeping.css    | 63 ++++++++++++++-----
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/passphrase/safekeeping/safekeeping.css b/src/components/passphrase/safekeeping/safekeeping.css
index 61efea7426..b806598b80 100644
--- 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,

From 46aa7f2c55734f04968a650b4865d16e1f28f71e Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 19 Feb 2018 20:12:24 +0100
Subject: [PATCH 3/4] Fix class to pass login e2e test

---
 src/components/passphrase/safekeeping/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/passphrase/safekeeping/index.js b/src/components/passphrase/safekeeping/index.js
index d397606c6a..b7a60461db 100644
--- a/src/components/passphrase/safekeeping/index.js
+++ b/src/components/passphrase/safekeeping/index.js
@@ -88,9 +88,9 @@ class SafeKeeping extends React.Component {
                   value: 'revealing-step',
                 }}/>
             </TransitionWrapper>
-            <p className={`${styles.input} ${styles.textarea} passphrase`}>
+            <p className={`${styles.input} ${styles.textarea}`}>
               <textarea type='text' autoFocus={true} readOnly
-                className={`${styles.hiddenInput}`}
+                className={`${styles.hiddenInput} passphrase`}
                 defaultValue={passphrase}></textarea>
               {
                 passphrase.split(' ').map(word => <span className={styles.word} key={`wrapper-${word}`}>{ word } </span>)

From 968c336356ece194a2bae5ca69f0034ed5c10ec1 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 19 Feb 2018 20:47:13 +0100
Subject: [PATCH 4/4] Fix unit tests of passphrase safekeeping

---
 src/components/passphrase/safekeeping/index.js      | 2 +-
 src/components/passphrase/safekeeping/index.test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/passphrase/safekeeping/index.js b/src/components/passphrase/safekeeping/index.js
index b7a60461db..58bfad4016 100644
--- a/src/components/passphrase/safekeeping/index.js
+++ b/src/components/passphrase/safekeeping/index.js
@@ -88,7 +88,7 @@ class SafeKeeping extends React.Component {
                   value: 'revealing-step',
                 }}/>
             </TransitionWrapper>
-            <p className={`${styles.input} ${styles.textarea}`}>
+            <p className={`${styles.input} ${styles.textarea} passphrase-wrapper`}>
               <textarea type='text' autoFocus={true} readOnly
                 className={`${styles.hiddenInput} passphrase`}
                 defaultValue={passphrase}></textarea>
diff --git a/src/components/passphrase/safekeeping/index.test.js b/src/components/passphrase/safekeeping/index.test.js
index 5b78db11ff..2b780a6dde 100644
--- 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', () => {