Fee selector button group styles

liquality · Sep 7, 2020 · ad60338 · ad60338
1 parent 62dda9c
commit ad60338
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 13 deletions.
diff --git a/src/assets/scss/_overrides.scss b/src/assets/scss/_overrides.scss
@@ -6,6 +6,7 @@ $color-secondary: #2CD2CF;
 
 $danger:        #F12274;
 $light:         #F8FAFF;
+$dark:          #F0F7F9;
 
 $color-text-primary: #1D1E21;
 $color-text-secondary: #FFFFFF;

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
@@ -75,6 +75,13 @@ svg {
   }
 }
 
+.btn-group {
+  .btn-outline-dark.btn-light {
+    border-color: #d6d6d6 !important;
+    color: $color-text-primary;
+  }
+}
+
 .form {
   label {
     font-size: $font-size-sm;

diff --git a/src/components/FeeSelector.vue b/src/components/FeeSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="fee-selector btn-group btn-group-toggle" data-toggle="buttons">
-    <label class="btn btn-light btn-outline-primary btn-sm"
+    <label class="btn btn-light btn-outline-dark btn-sm"
         v-for="name in ['slow', 'average', 'fast']" :key="name"
         :class="name == value ? 'active' : ''"
         v-tooltip="{content: getTooltip(name)}"

diff --git a/src/views/Receive.vue b/src/views/Receive.vue
@@ -12,7 +12,7 @@
     <div class="wrapper_bottom">
       <Warning />
       <div class="button-group">
-        <button class="btn btn-light btn-outline-primary btn-lg" @click="$router.go(-1)">Cancel</button>
+        <button class="btn btn-light btn-outline-primary btn-lg" @click="$router.go(-1)">Done</button>
         <button class="btn btn-primary btn-lg btn-icon" @click="copy">
           <template v-if="copied"><TickIcon /> Copied!</template>
           <template v-else><CopyIcon /> Copy Address</template>

diff --git a/src/views/Send.vue b/src/views/Send.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="send wrapper form">
-    <div class="wrapper_top form">
+    <div class="wrapper_top">
       <div class="form-group send_asset">
         <label for="amount">
           Amount
@@ -22,15 +22,16 @@
         </div>
         <small v-if="sendAddress && addressError" class="text-danger form-text text-right">{{ addressError }}</small>
       </div>
+    </div>
+
+    <div class="wrapper_bottom">
       <div class="form-group" v-if="feesAvailable">
         <label>Network Speed/Fee</label>
-        <div>
+        <div class="send_fees">
+          {{ assetChain }}
           <FeeSelector :asset="asset" v-model="selectedFee" v-bind:fees="assetFees" />
         </div>
       </div>
-    </div>
-
-    <div class="wrapper_bottom">
       <div class="button-group">
         <button class="btn btn-light btn-outline-primary btn-lg" @click="$router.go(-1)">Cancel</button>
         <button class="btn btn-primary btn-lg" @click="send" :disabled="!canSend">Continue</button>
@@ -127,5 +128,14 @@ export default {
       margin-left: 12px;
     }
   }
+  &_fees {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    margin: 6px 0;
+    .fee-selector {
+      margin-left: 6px;
+    }
+  }
 }
 </style>
diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="swap wrapper">
-    <div class="wrapper_top form">
+  <div class="swap wrapper form">
+    <div class="wrapper_top">
       <div class="text-center"><small class="text-danger" v-if="ethRequired">An ETH balance is required to swap.</small></div>
       <div class="form-group">
         <label for="amount">Send
@@ -48,7 +48,8 @@
           </div>
         </div>
       </div>
-
+    </div>
+    <div class="wrapper_bottom">
       <div class="swap_rate form-group">
         <label>Rate</label>
         <p><span class="swap-rate_base">1 {{asset}} =</span><span class="swap-rate_value">&nbsp;{{bestRateBasedOnAmount}}</span><span class="swap-rate_term">&nbsp;{{toAsset}}</span></p>
@@ -61,8 +62,6 @@
           <FeeSelector :asset="asset" v-model="selectedFee[asset]" v-bind:fees="getAssetFees(asset)" />
         </div>
       </div>
-    </div>
-    <div class="wrapper_bottom">
       <div class="button-group">
         <button class="btn btn-light btn-outline-primary btn-lg" @click="$router.go(-1)">Cancel</button>
         <button class="btn btn-primary btn-lg" @click="swap" :disabled="!bestMarketBasedOnAmount || !canSwap">Review Terms</button>
@@ -242,8 +241,14 @@ export default {
 
   &_fees {
     &_asset {
+      display: flex;
+      align-items: center;
       font-weight: bold;
-      margin-bottom: 6px;
+      margin: 6px 0;
+
+      .fee-selector {
+        margin-left: 6px;
+      }
     }
   }
 }