Merge pull request #1395 from kkukelka/feat/colored-buy-button

1311 change label text and set color to green

Author: yangwao

components/rmrk/Gallery/Search/SearchBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="card mb-3 mt-5">
-    <div class="card-content ">
+    <div class="card-content">
       <div class="columns">
         <b-field class="column is-6 mb-0">
           <b-input
@@ -24,18 +24,17 @@
         <slot />
       </div>
 
-      <transition  name="fade">
+      <transition name="fade">
         <div v-if="isVisible" class="columns">
           <Sort class="column is-4 mb-0" :value="sortBy" @input="updateSortBy" />
-          <BasicSwitch class="column is-4" v-model="vListed" label="sort.listed" size="is-medium" />
+          <BasicSwitch class="column is-4" v-model="vListed" label="sort.listed" size="is-medium" labelColor="is-success" />
         </div>
       </transition>
-
     </div>
   </div>
 </template>
 
-<script lang="ts" >
+<script lang="ts">
 import { Component, Prop, Vue, Emit } from 'nuxt-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
 import shouldUpdate from '@/utils/shouldUpdate'
@@ -72,7 +71,6 @@ export default class SearchBar extends Vue {
     this.updateListed(listed)
   }
 
-
   get searchQuery(): string {
     return this.search
   }

components/rmrk/Gallery/Search/SearchBarCollection.vue

@@ -21,6 +21,7 @@
         v-model="vListed"
         label="sort.listed"
         size="is-medium"
+        labelColor="is-success"
       />
       <slot />
     </b-field>

components/shared/form/BasicSwitch.vue

@@ -4,6 +4,7 @@
       v-model="isSwitched"
       :rounded="false"
       :size="size"
+      :class="labelColor"
     >
       {{ properLabel }}
     </b-switch>
@@ -20,6 +21,7 @@ export default class BasicSwitch extends Vue {
   @Prop({ type: String, required: true }) label!: string;
   @Prop({ type: String }) offLabel!: string;
   @Prop({ type: String }) size!: string;
+  @Prop({ type: String }) labelColor!: string;
 
   get properLabel(): TranslateResult {
     const offLabel = this.offLabel || this.label

langDir/en.json

@@ -187,7 +187,7 @@
     "UPDATED_AT_ASC": "Long time no interaction",
     "PRICE_DESC": "From most expensive",
     "PRICE_ASC": "From cheaper",
-    "listed": "YOLO"
+    "listed": "Buy now"
   },
   "mint": {
     "submit": "Click to create NFT(s)",

styles/derived-variables.scss

@@ -3,7 +3,7 @@
 $primary: #ff149366;
 
 // $info: $cyan;
-// $success: $green;
+$success: $green;
 // $warning: $yellow;
 // $danger: $red;
 

styles/global.scss

@@ -70,6 +70,12 @@ body {
         font-size: calc(1rem * 0.75);
     }
 
+    .switch {
+        &.is-success {
+            color: $success;
+        }
+    }
+
     .text {
         &__stroked {
             color: $primary;

styles/initial-variables.scss

@@ -17,6 +17,7 @@ $white:        hsl(0, 0%, 100%);
 
 // $orange:       hsl(14,  100%, 53%);
 // $yellow:       hsl(48,  100%, 67%);
+$green:        hsl(111, 34%, 55%);
 // $green:        hsl(141, 53%,  53%);
 // $turquoise:    hsl(171, 100%, 41%);
 // $cyan:         hsl(204, 71%,  53%);