Create Wallet page update

MyEtherWallet · Aug 15, 2018 · 7dcae45 · 7dcae45 · mew-bot · Aug 15, 2018
1 parent 5147c0d
commit 7dcae45
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 76 deletions.
diff --git a/src/components/PopOver/PopOver.scss b/src/components/PopOver/PopOver.scss
@@ -3,10 +3,14 @@
 .col {
   margin: 0;
   padding: 0;
-  margin-left: 7px;
+  margin-left: 10px;
+  width: 16px;
+  height: 16px;
+  position: relative;
 }
 
 .popover-button {
+  position: absolute;
   background-color: white;
   border: 0;
   margin: 0;
@@ -17,8 +21,8 @@
   }
 
   img {
-    width: 15px;
-    height: 15px;
+    width: 16px;
+    height: 16px;
     margin: 0;
     padding: 0;
     display: block;

diff --git a/src/containers/ByJsonFileContainer/ByJsonFileContainer.scss b/src/containers/ByJsonFileContainer/ByJsonFileContainer.scss
@@ -48,7 +48,7 @@
         cursor: pointer;
         display: block;
         margin: 0 auto;
-        max-width: 300px;
+        width: 280px;
         text-decoration: none;
         text-align: center;
 

diff --git a/src/containers/ByMnemonicContainer/ByMnemonicContainer.scss b/src/containers/ByMnemonicContainer/ByMnemonicContainer.scss
@@ -22,10 +22,12 @@
       min-height: 500px;
       padding: 50px;
 
-      h3 {
+      .title-popover {
+        display: flex;
+        align-items: center;
         margin-bottom: 40px;
-        text-align: center;
-      }
+        justify-content: center;
+      } // .title-popover
 
       .contents {
         margin-bottom: 120px;
@@ -75,55 +77,22 @@
                 color: $text--mnemonic-phrase-key-color;
                 margin-left: 10px;
               }
-            }
-          }
-        }
-
-      }
+            } // li
+          } // ul
+        } // .phrases
+      } // .contents
 
       .user-input {
         margin-bottom: 25px;
-
-        input {
-          background-color: $background-color-1;
-          border: 0;
-          font-size: 14px;
-          margin-bottom: 40px;
-          padding: 20px;
-          width: 100%;
-        }
-
-        .next-button {
-          display: block;
-          margin: 0 auto;
-          max-width: 300px;
-          padding: 20px 0;
-          text-align: center;
-
-          img {
-            margin-left: 5px;
-            width: 20px;
-          }
-        }
-      }
-
-      .footer-text {
         display: flex;
+        align-items: center;
+        justify-content: center;
 
-        p {
-          font-size: 13px;
-          margin: 0 auto;
-
-          .tooltip-icon {
-            margin-left: 5px;
-          }
-
-          .icon {
-            height: 25px;
-            margin-right: 5px;
-          }
+        .icon {
+          height: 30px;
+          margin-left: 20px;
         }
-      }
-    }
-  }
-}
+      } // .user-input
+    } // .tab-pane
+  } // .nav-tab-user-input-box
+} // .wrap
diff --git a/src/containers/ByMnemonicContainer/ByMnemonicContainer.vue b/src/containers/ByMnemonicContainer/ByMnemonicContainer.vue
@@ -8,12 +8,10 @@
           <b-tabs>
             <div class="progress-bar"></div>
             <b-tab title="By Mnemonic Phrase" active>
-              <h3>
-                {{ $t("createWallet.byMnemonicWriteDown") }}
-                <span class="tooltip-icon">
-                  <b-btn v-b-tooltip.hover :title="$t('common.toolTip1')">?</b-btn>
-                </span>
-              </h3>
+              <div class="title-popover">
+                <h3>{{ $t("createWallet.byMnemonicWriteDown") }}</h3>
+                <popover :popcontent="$t('popover.whatIsMessageContent')" />
+              </div>
               <div class="contents">
                 <div class="tools">
                   <div class="value-switch noselect">
@@ -47,18 +45,11 @@
                 <div v-on:click="mnemonicVerificationModalOpen" class="next-button large-round-button-green-filled clickable">
                   {{ $t("createWallet.byMnemonicAlreadyWritten") }}
                 </div>
+                <router-link to="/">
+                  <img class="icon" src="~@/assets/images/icons/printer.svg">
+                </router-link>
               </div>
-              <div class="footer-text">
-                <p>
-                  <router-link to="/">
-                    <img class="icon" src="~@/assets/images/icons/printer.svg">
-                    {{ $t("common.printWallet") }}
-                  </router-link>
-                  <span class="tooltip-icon">
-                    <b-btn v-b-tooltip.hover :title="$t('common.toolTip2')">?</b-btn>
-                  </span>
-                </p>
-              </div>
+              <input-footer />
             </b-tab>
           </b-tabs>
         </div>
@@ -68,6 +59,7 @@
 </template>
 
 <script>
+import CreateWalletInputFooter from '@/layouts/CreateWalletLayout/components/CreateWalletInputFooter'
 import FinishModal from './components/FinishModal'
 import VerificationModal from './components/VerificationModal'
 // Mnemonic code for generating deterministic keys
@@ -76,7 +68,8 @@ let bip39 = require('bip39')
 export default {
   components: {
     'finish-modal': FinishModal,
-    'verification-modal': VerificationModal
+    'verification-modal': VerificationModal,
+    'input-footer': CreateWalletInputFooter
   },
   data () {
     return {

diff --git a/src/layouts/CreateWalletLayout/CreateWalletLayout.scss b/src/layouts/CreateWalletLayout/CreateWalletLayout.scss
@@ -13,6 +13,7 @@
   .title-popover {
     margin: 0 auto;
     display: flex;
+    align-items: center;
   }
 }
 

diff --git a/src/layouts/CreateWalletLayout/components/CreateWalletInput/CreateWalletInput.vue b/src/layouts/CreateWalletLayout/components/CreateWalletInput/CreateWalletInput.vue
@@ -20,7 +20,7 @@
       </div>
 
       <p class="passwd-strength" v-show="value.length > 0">
-        Password strength: <span :class="strengthClass">{{ strength }}</span>
+        Password strength:<span :class="strengthClass">{{ strength }}</span>
       </p>
     </div>
     <!--=== MEW custom form ========================================-->

diff --git a/src/scss/CustomForms.scss b/src/scss/CustomForms.scss
@@ -40,6 +40,10 @@
   }
 
 
+  input {
+    padding-right: 50px;
+  }
+
   input.very-weak {
     border: 1px solid $very-weak;
   }
@@ -53,8 +57,14 @@
   }
 
   .passwd-strength {
-    margin-top: 5px;
+    margin-top: 10px;
     margin-left: 10px;
+    color: $text-color-3;
+
+    span {
+      font-weight: 600;
+      margin-left: 10px;
+    }
 
     .very-weak {
       color: $very-weak;

diff --git a/src/scss/GlobalVariables.scss b/src/scss/GlobalVariables.scss
@@ -56,6 +56,7 @@ $dark-yellow: #dadd98;
 $red-1: #f00;
 $red-2: #ff2f49;
 $red-3: #b92b3f;
+$red-4: #ff3c3c;
 
 $light-red-1: #fbe0e3;
 
@@ -83,7 +84,7 @@ $dark-blue-6: #003945;
 $dark-blue-7: #0c5876;
 $dark-blue-8: #485f7e;
 $dark-blue-9: #354858;
-$dark-blue-10: #00438c;
+$dark-blue-10: #1d89ff;
 
 $dark-green-1: #008000;
 $dark-green-2: #00927d;
@@ -259,9 +260,9 @@ $css-toggle-button--slider--active--background-color: $background-color-2;
 
 $disabled: $light-grey-3;
 
-$very-weak: $red-1;
+$very-weak: $red-4;
 $weak: $dark-blue-10;
-$strong: $dark-green-3;
+$strong: $mew-green;
 $very-strong: $dark-green-1;