bug/top-nav-issue

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Bug
 
+- Fix front interface bugs [#344](https://github.com/MyEtherWallet/MyEtherWallet/pull/344)
+- Hide header on getting start [#341](https://github.com/MyEtherWallet/MyEtherWallet/pull/341)
 - Only show security button on specific pages [#334](https://github.com/MyEtherWallet/MyEtherWallet/pull/334)
 - Fix/replace apple qr code [#323](https://github.com/MyEtherWallet/MyEtherWallet/pull/323)
 - Fix ENS resolver/error placement [#324](https://github.com/MyEtherWallet/MyEtherWallet/pull/324)

src/builds/web/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <header-container />
+    <header-container v-show="$route.fullPath !== '/getting-started'" />
     <router-view />
     <footer-container />
     <confirmation-container v-if="wallet !== null" />

src/components/ScrollUpButton/ScrollUpButton.vue

@@ -7,13 +7,15 @@
 </template>
 
 <script>
+import Misc from '@/helpers/misc';
+
 export default {
   data() {
     return {};
   },
   methods: {
     scrollToTop: function() {
-      window.scrollTo(0, 0);
+      Misc.scrollToTop(500);
     }
   }
 };

src/components/UserReminderButton/UserReminderButton.scss

@@ -9,6 +9,7 @@
 }
 
 .popup-box {
+  display: none;
   position: absolute;
   left: -3px;
   top: -29px;
@@ -18,6 +19,10 @@
   border-radius: 4px;
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.18);
 
+  &:hover {
+    display: block;
+  }
+
   &::after {
     border-color: $white transparent transparent transparent;
     content: '';

src/containers/AboutContainer/AboutContainer-desktop.scss

@@ -15,11 +15,6 @@
       background-position: right top;
       background-repeat: no-repeat;
       background-size: 55%;
-
-      @media all and (max-width: $tablet-width) {
-        background-position: center 300px;
-        background-size: 140%;
-      }
     }
 
     .content {

src/containers/AboutContainer/AboutContainer-mobile.scss

@@ -12,9 +12,9 @@
 
     .star-background {
       background-image: url('~@/assets/images/home/stars.svg');
-      background-position: right top;
+      background-position: center;
       background-repeat: no-repeat;
-      background-size: 55%;
+      background-size: 100%;
     }
 
     .content {

src/containers/AboutContainer/AboutContainer-tablet.scss

@@ -12,14 +12,9 @@
 
     .star-background {
       background-image: url('~@/assets/images/home/stars.svg');
-      background-position: right top;
+      background-position: center;
       background-repeat: no-repeat;
-      background-size: 55%;
-
-      @media all and (max-width: $tablet-width) {
-        background-position: center 300px;
-        background-size: 140%;
-      }
+      background-size: 100%;
     }
 
     .content {

src/containers/ConfirmationContainer/components/SuccessModal/SuccessModal.scss

@@ -10,3 +10,12 @@
     padding: 25px;
   }
 }
+
+.modal-content-block {
+  padding: 40px 0;
+}
+
+.button-container {
+  margin-bottom: 0 !important;
+  margin-top: 20px;
+}

src/containers/ConfirmationContainer/components/SuccessModal/SuccessModal.vue

@@ -4,21 +4,24 @@
     centered
     hide-footer
     hide-header
-    class="bootstrap-modal"
+    class="bootstrap-modal no-padding"
   >
-    <div class="d-block text-center">
-      <i class="check-icon fa fa-check" aria-hidden="true" />
-      <h2 class="title">{{ $t('confirmation.success') }}</h2>
-      <p>{{ message }}</p>
-    </div>
-    <div class="button-container">
-      <b-btn
-        class="mid-round-button-green-filled close-button"
-        @click="hideModal"
-      >
-        {{ linkMessage === '' ? 'Ok' : linkMessage }}
-      </b-btn>
+    <div class="modal-content-block">
+      <div class="d-block text-center">
+        <i class="check-icon fa fa-check" aria-hidden="true" />
+        <h2 class="title">{{ $t('confirmation.success') }}</h2>
+        <p>{{ message }}</p>
+      </div>
+      <div class="button-container">
+        <div
+          class="mid-round-button-green-filled close-button"
+          @click="hideModal"
+        >
+          {{ linkMessage === '' ? 'Ok' : linkMessage }}
+        </div>
+      </div>
     </div>
+    <!-- .modal-content-block -->
   </b-modal>
 </template>
 

src/containers/HeaderContainer/HeaderContainer.scss

@@ -7,6 +7,12 @@
   }
 }
 
+.page-container {
+  @media all and (max-width: $tablet-width) {
+    padding: 0;
+  }
+}
+
 .scrollup-container {
   opacity: 0;
   pointer-events: none;

src/containers/HeaderContainer/HeaderContainer.vue

@@ -52,9 +52,13 @@
             }}</a>
           </li>
           <li>
-            <a href="/#faqs" @click="isMobileMenuOpen = false">{{
-              $t('common.faqs')
-            }}</a>
+            <a
+              href="https://kb.myetherwallet.com"
+              target="_blank"
+              @click="isMobileMenuOpen = false"
+            >
+              Help Center
+            </a>
           </li>
           <li>
             <div class="mobile-language-menu-container">

src/helpers/misc.js

@@ -61,6 +61,23 @@ const sanitizeHex = hex => {
   return '0x' + padLeftEven(hex);
 };
 
+const scrollToTop = (scrollDuration) => {
+  const scrollHeight = window.scrollY,
+    scrollStep = Math.PI / (scrollDuration / 15),
+    cosParameter = scrollHeight / 2;
+
+  let scrollCount = 0;
+  let scrollMargin;
+  const scrollInterval = setInterval(function() {
+    if (window.scrollY != 0) {
+      scrollCount = scrollCount + 1;
+      scrollMargin =
+        cosParameter - cosParameter * Math.cos(scrollCount * scrollStep);
+      window.scrollTo(0, scrollHeight - scrollMargin);
+    } else clearInterval(scrollInterval);
+  }, 15);
+}
+
 const validateHexString = str => {
   if (str == '') return true;
   str =
@@ -79,5 +96,6 @@ export default {
   isValidENSAddress,
   isValidETHAddress,
   sanitizeHex,
-  validateHexString
+  validateHexString,
+  scrollToTop
 };

src/layouts/CreateWalletLayout/CreateWalletLayout-mobile.scss

@@ -36,7 +36,7 @@
         text-align: center;
         margin-bottom: 13px;
         img {
-          height: 30px;
+          height: 38px;
           margin: 0 3px;
         }
       }
@@ -58,7 +58,7 @@
         width: 78%;
       }
     }
-  }
+  } // .mew-connect-block
 
   .nav-tab-user-input-box {
     background-color: $background-color-white;

src/layouts/CreateWalletLayout/CreateWalletLayout-tablet.scss

@@ -7,13 +7,20 @@
 
   .title-block {
     margin-bottom: 40px;
-    display: flex;
+    display: block;
+
+    p {
+      text-align: center;
+    }
 
     .title-popover {
       margin: 0 auto;
       display: flex;
       align-items: center;
       text-align: center;
+      margin-bottom: 10px;
+      justify-content: center;
+
       h3 {
         max-width: 320px;
         line-height: 28px;
@@ -27,9 +34,9 @@
     .appstores {
       .icons {
         text-align: center;
-        margin-bottom: 25px;
+        margin-bottom: 13px;
         img {
-          height: 40px;
+          height: 38px;
           margin: 0 3px;
         }
       }
@@ -48,10 +55,10 @@
       margin-top: 50px;
       text-align: center;
       img {
-        width: 60%;
+        width: 78%;
       }
     }
-  }
+  } // .mew-connect-block
 
   .nav-tab-user-input-box {
     background-color: $background-color-white;
@@ -73,8 +80,8 @@
     }
 
     .tab-pane {
-      min-height: 500px;
-      padding: 50px;
+      min-height: 420px;
+      padding: 35px 25px;
     }
   }
 

src/layouts/CreateWalletLayout/CreateWalletLayout.vue

@@ -106,6 +106,7 @@ import CreateWalletInputFooter from './components/CreateWalletInputFooter';
 import PageFooter from './components/PageFooter';
 import PageTitle from './components/PageTitle';
 import store from 'store';
+import Misc from '@/helpers/misc';
 
 export default {
   components: {
@@ -137,6 +138,7 @@ export default {
   },
   methods: {
     switcher(by) {
+      Misc.scrollToTop(1000);
       if (by === 'Json') {
         this.byJson = true;
         this.byMnemonic = false;

src/layouts/CreateWalletLayout/components/CreateWalletInput/CreateWalletInput.vue

@@ -40,7 +40,7 @@
     <!-- === MEW custom form ======================================== -->
     <button
       :class="[
-        param === 'Json' && (errors.has('password') || value.length === 0)
+        param === 'Json' && (errors.has('password') || value.length === 0 || strengthClass !== 'strong')
           ? 'disabled'
           : '',
         'large-round-button-green-filled next-button'
@@ -95,8 +95,8 @@ export default {
           this.strengthClass = 'weak';
           break;
         case 3:
-          this.strength = 'Weak';
-          this.strengthClass = 'weak';
+          this.strength = 'Good';
+          this.strengthClass = 'strong';
           break;
         case 4:
           this.strength = 'Strong';

src/layouts/CreateWalletLayout/components/CreateWalletInputFooter/CreateWalletInputFooter.scss

@@ -1,6 +1,7 @@
 @import '~@/scss/GlobalVariables';
 
 .footer-text {
+  text-align: center;
   p {
     span {
       color: $text-color-5;

src/layouts/CreateWalletLayout/containers/ByJsonFileContainer/ByJsonFileContainer-mobile.scss

@@ -51,7 +51,6 @@
           cursor: pointer;
           display: block;
           margin: 0 auto;
-          width: 280px;
           text-decoration: none;
           text-align: center;
         }

src/layouts/CreateWalletLayout/containers/ByJsonFileContainer/ByJsonFileContainer-tablet.scss

@@ -51,7 +51,7 @@
           cursor: pointer;
           display: block;
           margin: 0 auto;
-          width: 280px;
+          min-width: 200px;
           text-decoration: none;
           text-align: center;
         }

src/layouts/CreateWalletLayout/containers/ByJsonFileContainer/ByJsonFileContainer.vue

@@ -33,7 +33,8 @@
                     :class="[
                       { disable: !downloadable },
                       'next-button',
-                      'large-round-button-green-filled'
+                      'large-round-button-green-filled',
+                      'nopadding'
                     ]"
                     :download="name"
                     @click="downloadDone()"

src/layouts/CreateWalletLayout/containers/ByMnemonicContainer/ByMnemonicContainer-mobile.scss

@@ -74,7 +74,7 @@
               display: grid;
               grid-column-gap: 20px;
               grid-row-gap: 20px;
-              grid-template-columns: 1fr 1fr 1fr;
+              grid-template-columns: 1fr 1fr;
               margin-bottom: 20px;
 
               li {

src/layouts/CreateWalletLayout/containers/ByMnemonicContainer/components/FinishModal/FinishModal.scss

@@ -10,3 +10,12 @@
     padding: 25px;
   }
 }
+
+.modal-container-block {
+  padding: 30px;
+}
+
+.button-container {
+  margin-bottom: 0 !important;
+  margin-top: 30px;
+}