Network and Address modal fix

MyEtherWallet · Aug 6, 2018 · 2977b2d · 2977b2d · mew-bot · Aug 6, 2018
1 parent c689f8b
commit 2977b2d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/src/layouts/AccessWalletLayout/components/NetworkAndAddressModal/NetworkAndAddressModal.scss b/src/layouts/AccessWalletLayout/components/NetworkAndAddressModal/NetworkAndAddressModal.scss
@@ -1,5 +1,10 @@
 @import '~@/scss/CustomModal';
 
+.modal-body .button-container button {
+  width: 100%;
+}
+
+
 .modal-network-and-address {
   .content-container-1 {
     margin: -20px -40px 0;

diff --git a/src/layouts/AccessWalletLayout/components/NetworkAndAddressModal/NetworkAndAddressModal.vue b/src/layouts/AccessWalletLayout/components/NetworkAndAddressModal/NetworkAndAddressModal.vue
@@ -34,7 +34,7 @@
           <li>2.2233445 ETH</li>
           <li class="user-input-checkbox">
             <label class="checkbox-container checkbox-container-small">
-              <input type="checkbox" />
+              <input v-on:click="unselectAllAddresses" type="checkbox" />
               <span class="checkmark checkmark-small"></span>
             </label>
           </li>
@@ -46,7 +46,7 @@
           <li>2.2233445 ETH</li>
           <li class="user-input-checkbox">
             <label class="checkbox-container checkbox-container-small">
-              <input type="checkbox" />
+              <input v-on:click="unselectAllAddresses" type="checkbox" />
               <span class="checkmark checkmark-small"></span>
             </label>
           </li>
@@ -58,7 +58,7 @@
           <li>2.2233445 ETH</li>
           <li class="user-input-checkbox">
             <label class="checkbox-container checkbox-container-small">
-              <input type="checkbox" />
+              <input v-on:click="unselectAllAddresses" type="checkbox" />
               <span class="checkmark checkmark-small"></span>
             </label>
           </li>
@@ -70,7 +70,7 @@
           <li>2.2233445 ETH</li>
           <li class="user-input-checkbox">
             <label class="checkbox-container checkbox-container-small">
-              <input type="checkbox" />
+              <input v-on:click="unselectAllAddresses" type="checkbox" />
               <span class="checkmark checkmark-small"></span>
             </label>
           </li>
@@ -85,13 +85,13 @@
 
     <div class="accept-terms">
       <label class="checkbox-container">{{ $t("accessWallet.acceptTerms") }} <a href="/">{{ $t("common.terms") }}</a>.
-        <input type="checkbox" />
+        <input v-on:click="accessMyWalletBtnDisabled = !accessMyWalletBtnDisabled" type="checkbox" />
         <span class="checkmark"></span>
       </label>
     </div>
     <div class="button-container">
-      <b-btn class="mid-round-button-green-filled close-button">
-        {{ $t("common.continue") }}
+      <b-btn class="mid-round-button-green-filled close-button" :disabled="accessMyWalletBtnDisabled">
+        {{ $t("common.accessMyWallet") }}
       </b-btn>
     </div>
     <div class="support">
@@ -109,6 +109,15 @@
 export default {
   data () {
     return {
+      accessMyWalletBtnDisabled: true
+    }
+  },
+  methods: {
+    unselectAllAddresses: function (e) {
+      document.querySelectorAll('.user-input-checkbox input').forEach(function (el) {
+        el.checked = false
+      })
+      e.srcElement.checked = true
     }
   }
 }

diff --git a/src/scss/Globals.scss b/src/scss/Globals.scss
@@ -116,6 +116,10 @@ textarea {
   border-radius: 4px;
 }
 
+button {
+  box-shadow: none !important;
+}
+
 
 // *********************************************************************
 // Disable WebKit Spinners
@@ -430,6 +434,24 @@ h6 {
   user-select: none;
 }
 
+.mid-round-button-lightgrey-filled {
+  background-color: $light-grey-5;
+  border: 1px solid $button--border-color-1;
+  border-radius: 6px;
+  color: $button--text-color-1;
+  cursor: initial;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 15px 40px;
+  user-select: none;
+
+  &:hover {
+    background-color: $light-grey-5;
+    border: 1px solid $button--border-color-1;
+    cursor: initial;
+  }
+}
+
 .mid-round-button-green-border {
   background-color: $background-color-white;
   border: 1px solid $button--border-color-2;
@@ -577,6 +599,12 @@ h6 {
   }
 }
 
+.dropdown-toggle::after {
+    position: absolute !important;
+    right: 13px !important;
+    top: 16px !important;
+}
+
 // *********************************************************************
 // [Bootstrap] Dropdown language menu style
 // *********************************************************************