Merge pull request #10 from liquality/fix-qa-changes

Fix qa changes

Author: bradleySuira

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "liquality-wallet",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "private": true,
   "license": "MIT",
   "author": "Liquality <info@liquality.io>",

package.json

@@ -19,6 +19,7 @@ $font-size-tiny:              0.75rem;
 $lead-font-size:              1rem;
 $small-font-size:             $font-size-sm;
 $text-muted: $color-text-muted;
+$font-size-xs:                0.625rem;
 
 $font-family-base: 'Montserrat', sans-serif;
 $headings-font-weight: 600;

src/assets/icons/qr.svg

@@ -164,17 +164,23 @@ textarea {
     line-height: $input-font-size + 4px;
     margin-bottom: 0;
   }
+  .confirm-address {
+    font-size: 14px;
+    line-height: 18px;
+    margin-bottom: 0;
+  }
   .form-control-address {
     font-size: $font-size-lg;
   }
   .swap-rate {
     &_base,
     &_term {
       color: $color-text-muted;
+      font-size: $font-size-tiny;
     }
 
     &_value {
-      font-size: 18px;
+      font-size: $font-size-tiny;
     }
 
     margin-bottom: 0;
@@ -284,3 +290,45 @@ textarea {
   border-radius: 26px;
 }
 
+.btn-option {
+  height: 20px;
+  font-weight: 300 !important;
+  font-size: $font-size-tiny !important;
+  border: 1px solid #D9DFE5;
+  padding: 0.05rem 0.5rem;
+  border-radius: 26px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: $color-text-primary;
+
+  &.active {
+      font-weight: $font-weight-base !important;
+      background-color: $dark;
+      color: #1D1E21;
+  }
+}
+
+.btn-option-lg {
+  height: 26px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mt-40 {
+  margin-top: 40px;
+}
+
+.details-text {
+  color: $color-text-muted;
+  font-size: $font-size-tiny;
+}
+
+.sub-form-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+

src/assets/scss/_overrides.scss

@@ -42,7 +42,7 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     align-content: space-between;
-    font-size: $font-size-tiny;
+    font-size: $font-size-xs;
 
     svg {
       height: 5px;
@@ -56,7 +56,7 @@ export default {
       font-weight: bold;
       text-transform: uppercase;
       padding-right: 0.5em;
-      font-size: $font-size-tiny;
+      font-size: $font-size-sm;
     }
   }
 
@@ -73,11 +73,12 @@ export default {
         align-items: center;
         justify-content: left;
         border: none;
-        font-size: $font-size-tiny;
+        font-size: $font-size-xs;
         padding-left: 20px;
 
         label {
           float: left;
+          font-size: $font-size-xs !important;
         }
       }
     }

src/assets/scss/style.scss

@@ -1,6 +1,6 @@
 <template>
   <div class="fee-selector btn-group btn-group-toggle" data-toggle="buttons">
-    <label class="btn btn-light btn-outline-dark btn-sm"
+    <label class="btn btn-option btn-option-lg"
         v-for="name in ['slow', 'average', 'fast']" :key="name"
         :class="{ active: (name === value)}"
         v-tooltip="{content: getTooltip(name)}"

src/components/DetailsContainer.vue

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "version": "0.8.4",
+  "version": "0.8.5",
   "name": "Liquality Wallet",
   "description": "Secure multi-crypto wallet with built-in Atomic Swaps!",
   "homepage_url": "https://liquality.io",

src/components/FeeSelector.vue

@@ -2,7 +2,7 @@
   <div class="head">
     <router-link to="/wallet"><LogoIcon class="head_logo" /></router-link>
     <div class="head_network" @click.stop="showNetworks = !showNetworks">
-      {{activeNetwork}}
+      {{ activeNetwork }}
       <ChevronUpIcon v-if="showNetworks" />
       <ChevronDownIcon v-else />
     </div>

src/manifest.json

@@ -45,24 +45,24 @@
               >{{ amountError }}</small
             >
           </div>
-          <div class="form-group">
-            <span class="label-sub float-left"
+          <div class="sub-form-group">
+            <div class="label-sub"
               ><span class="text-muted">Available</span> {{ available }}
-              {{ asset }}</span
+              {{ asset }}</div
             >
             <div
-              class="float-right btn-group btn-group-toggle"
+              class="btn-group btn-group-toggle"
               data-toggle="buttons"
             >
-              <label
-                class="btn btn-light btn-outline-dark btn-sm"
+              <button
+                class="btn btn-option"
                 @click="setMaxAmount"
               >
-                <input type="radio" name="maxAmount" autocomplete="off" /> Max
-              </label>
+                Max
+              </button>
             </div>
           </div>
-          <div class="form-group">
+          <div class="form-group mt-40">
             <label for="address">Send to</label>
             <div class="input-group">
               <input
@@ -129,46 +129,24 @@
       <div class="wrapper_top form">
         <div class="form-group">
           <label>
-            Send <span v-if="includeFees" class="text-muted">(INCL FEES)</span>
+            Send
           </label>
           <p class="confirm-value" :style="getAssetColorStyle(asset)">
             {{ amountToSend }} {{ asset }}
           </p>
-          <p v-if="!includeFees">~{{ totalFee }} ETH FEES</p>
-          <p class="text-muted">${{ amountToSendInFiat }}</p>
+          <p class="mb-0 details-text">
+            FEES:&nbsp; {{ totalFee }} {{ feeType }} / ${{
+                    totalFeeInFiat
+                  }}
+          </p>
+          <p class="details-text">TOTAL: ${{ amountToSendInFiat }}</p>
         </div>
-        <div class="form-group">
+        <div class="form-group mt-20">
           <label>Send To</label>
-          <p class="confirm-value">{{ shortenAddress(this.address) }}</p>
+          <p class="confirm-address">{{ shortenAddress(this.address) }}</p>
         </div>
       </div>
       <div class="wrapper_bottom">
-        <DetailsContainer>
-          <template v-slot:header>
-            <span class="details-title">Details</span>
-          </template>
-          <template v-slot:content>
-            <ul class="items">
-               <li>
-                 <label>Send</label>
-              </li>
-              <li>
-                <span class="text-muted">
-                  AMOUNT:&nbsp;{{ amountToSend }} {{ asset }} / ${{
-                    amountToSendInFiat
-                  }}</span
-                >
-              </li>
-              <li>
-                <span class="text-muted"
-                  >NETWORK FEES:&nbsp; {{ totalFee }} {{ feeType }} / ${{
-                    totalFeeInFiat
-                  }}
-                </span>
-              </li>
-            </ul>
-          </template>
-        </DetailsContainer>
         <div class="button-group">
           <button
             class="btn btn-light btn-outline-primary btn-lg"