refactor: new wallet selection styles and ui (#1006)

ArkEcosystem · Jan 21, 2019 · 3437a81 · 3437a81
1 parent e1e7eba
commit 3437a81
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 23 deletions.
diff --git a/src/renderer/pages/Wallet/WalletNew.vue b/src/renderer/pages/Wallet/WalletNew.vue
@@ -70,29 +70,39 @@
             </div>
 
             <TransitionGroup
-              class="list-reset"
+              class="WalletNew__wallets list-reset"
               name="WalletNew__wallets"
               tag="ul"
             >
               <li
-                v-for="(passphrase, address) in wallets"
+                v-for="(passphrase, address, index) in wallets"
                 :key="address"
-                class="flex items-center py-4 w-full border-b border-dashed border-theme-line-separator truncate"
+                :class="[
+                  isSelected(address) ? 'WalletNew__wallets--selected' : 'WalletNew__wallets--unselected',
+                  index !== Object.keys(wallets).length - 1 ? 'border-b border-dashed border-theme-line-separator' : ''
+                ]"
+                class="flex items-center py-4 w-full truncate cursor-pointer"
+                @click="selectWallet(address, passphrase)"
               >
-                <WalletIdenticon
-                  :value="address"
-                  :size="35"
-                  class="flex-no-shrink"
-                />
-                <a
-                  :class="{ 'WalletNew__wallets--selected': schema.address === address }"
-                  class="WalletNew__wallets--address text-theme-wallet-new-unselected ml-2 cursor-pointer flex-no-shrink"
-                  @click="selectWallet(address, passphrase)"
-                >
-                  <span class="font-semibold text-sm">
-                    {{ address }}
+                <div class="relative">
+                  <WalletIdenticon
+                    :value="address"
+                    :size="35"
+                    class="flex-no-shrink identicon"
+                  />
+                  <span
+                    v-if="isSelected(address)"
+                    class="WalletNew_wallets__check absolute rounded-full flex items-center justify-center -mb-1 w-5 h-5 bg-green border-2 border-theme-feature text-white"
+                  >
+                    <SvgIcon
+                      name="checkmark"
+                      view-box="0 0 10 9"
+                    />
                   </span>
-                </a>
+                </div>
+                <span class="WalletNew__wallets--address text-theme-wallet-new-unselected ml-2 flex-no-shrink font-semibold text-sm">
+                  {{ address }}
+                </span>
               </li>
             </TransitionGroup>
           </MenuStepItem>
@@ -258,6 +268,7 @@ import { InputField, InputPassword, InputSwitch, InputText } from '@/components/
 import { MenuStep, MenuStepItem } from '@/components/Menu'
 import { ModalLoader } from '@/components/Modal'
 import { PassphraseVerification, PassphraseWords } from '@/components/Passphrase'
+import { SvgIcon } from '@/components/SvgIcon'
 import WalletIdenticon from '@/components/Wallet/WalletIdenticon'
 import WalletService from '@/services/wallet'
 import Wallet from '@/models/wallet'
@@ -277,6 +288,7 @@ export default {
     ModalLoader,
     PassphraseVerification,
     PassphraseWords,
+    SvgIcon,
     WalletIdenticon
   },
 
@@ -447,6 +459,10 @@ export default {
 
         this.isRefreshing = false
       }, 300)
+    },
+
+    isSelected (address) {
+      return this.schema.address === address
     }
   },
 
@@ -533,18 +549,29 @@ export default {
   opacity: 0
 }
 
-.WalletNew__wallets--selected {
-  @apply .text-theme-wallet-new-selected .font-bold
-}
-
-.WalletNew__wallets--address {
+.WalletNew__wallets .identicon {
+  font-size: 0;
+  opacity: 0.5;
   transition: all 0.5s;
 }
-.WalletNew__wallets--address:hover {
+.WalletNew__wallets--unselected:hover .identicon {
+  opacity: 1;
+}
+.WalletNew__wallets--unselected:hover .WalletNew__wallets--address {
   transition: all 0.5s;
   @apply .text-theme-wallet-new-selected .no-underline
 }
 
+.WalletNew__wallets--selected .identicon {
+  opacity: 1;
+}
+.WalletNew__wallets--selected .WalletNew__wallets--address {
+  @apply .text-theme-wallet-new-selected;
+}
+.WalletNew__wallets--address {
+  transition: all 0.5s;
+}
+
 .WalletNew__ButtonReload-colorClass {
   @apply .text-grey-dark .bg-theme-button;
 }
@@ -554,4 +581,9 @@ export default {
   box-shadow: 0 5px 15px rgba(9, 100, 228, 0.34);
   transition: all .1s ease-in
 }
+
+.WalletNew_wallets__check {
+  left: 42%;
+  top: 52%;
+}
 </style>
diff --git a/src/renderer/styles/_theme.css b/src/renderer/styles/_theme.css
@@ -138,7 +138,7 @@
   --theme-transaction-detail-arrow: #4d536c;
 
   --theme-wallet-new-selected: #787fa3;
-  --theme-wallet-new-unselected: #404457;
+  --theme-wallet-new-unselected: #585c6f;
   --theme-wallet-sign-verify-message-text: #585c6f;
 
   --theme-feature: #2d2f38;