🐛 sharing buttons touchup + reusability

components/shared/MessageNotify.vue

@@ -13,10 +13,7 @@
           <span class="subtitle is-size-5 subtitle-text-congrats">
             {{ subtitle }}
           </span>
-          <Sharing
-            btn-type="is-primary"
-            :enable-download="enableDownload"
-            is-primary="{true}" />
+          <Sharing btn-type="is-primary" :enable-download="enableDownload" />
         </div>
       </div>
     </b-message>

components/shared/Sharing.vue

@@ -7,7 +7,7 @@
         <b-button
           v-if="enableDownload"
           :type="btnType"
-          class="share-option"
+          :class="btnClass"
           @click="downloadImage()">
           <b-icon pack="fas" icon="download" />
         </b-button>
@@ -16,7 +16,7 @@
       <p class="control">
         <b-button
           v-clipboard:copy="realworldFullPathShare"
-          class="share-option"
+          :class="btnClass"
           :type="btnType"
           @click="toast($t('toast.urlCopy'))">
           <b-icon pack="fas" icon="link" />
@@ -25,7 +25,7 @@
 
       <p class="control">
         <ShowQRModal
-          class="share-option"
+          :class="btnType === 'is-primary' ? 'share-option' : 'qr-basic'"
           :address="realworldFullPath"
           :title="$t(label)"
           :type="btnType" />
@@ -91,7 +91,7 @@
           </ShareNetwork>
         </template>
         <p class="control">
-          <b-button :type="btnType" class="share-option">
+          <b-button :type="btnType" :class="btnClass">
             <b-icon pack="fas" icon="share" />
           </b-button>
         </p>
@@ -115,7 +115,6 @@ export default class Sharing extends Vue {
   @Prop({ default: 'sharing.nft' }) label!: string
   @Prop({ default: () => emptyIframe }) iframe!: IFrame
   @Prop(Boolean) enableDownload!: boolean
-  @Prop({ default: false }) isPrimary?: boolean
   @Prop({ default: '' }) btnType?: string
 
   private active = false
@@ -126,6 +125,10 @@ export default class Sharing extends Vue {
     return this.label
   }
 
+  get btnClass(): string {
+    return this.btnType === 'is-primary' ? 'share-option' : 'is-bordered-light'
+  }
+
   get realworldFullPath(): string {
     return `${window.location.origin}${this.$route.fullPath}`
   }
@@ -236,9 +239,15 @@ export default class Sharing extends Vue {
   }
 }
 
+.qr-basic button {
+  border: none !important;
+  border-top: 1px solid #ff47ac !important;
+  background-color: transparent !important;
+}
+
 .share-option,
 .share-option button {
-  border: none;
+  border: none !important;
   background-color: transparent !important;
 
   .icon svg {

components/shared/modals/ModalWrapper.vue

@@ -1,15 +1,15 @@
 <template>
   <div :id="id">
-    <slot name="trigger" v-bind:handleOpen="handleOpen">
+    <slot name="trigger" :handle-open="handleOpen">
       <b-button
-        :type="buttonType"
+        :type="type"
         :icon-left="icon"
         :expanded="expanded"
-        @click="handleOpen"
         :class="{
           'modal-wrapper-button__right': isRight,
           'is-invisible': isButtonHidden,
-        }">
+        }"
+        @click="handleOpen">
         <template v-if="label">{{ label }}</template>
       </b-button>
     </slot>
@@ -30,25 +30,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'nuxt-property-decorator'
+import { Component, Prop, Vue } from 'nuxt-property-decorator'
 
 @Component
 export default class ModalWrapper extends Vue {
   @Prop(String) public label!: string
   @Prop(String) public title!: string
   @Prop(String) public icon!: string
-  @Prop(String) public type!: string
+  @Prop(String) public type?: string
   @Prop(Boolean) public expanded!: boolean
   @Prop(Boolean) public isRight!: boolean
   @Prop({ default: '' }) public id!: string
   @Prop({ default: false }) public isButtonHidden!: boolean
 
   private isModalActive = false
 
-  get buttonType() {
-    return this.type || 'is-primary'
-  }
-
   protected handleOpen() {
     this.isModalActive = true
   }

components/shared/modals/ShowQRModal.vue

@@ -21,7 +21,7 @@ const components = {
 export default class ShowQRModal extends Vue {
   @Prop({ type: String, required: true }) public address!: string
   @Prop({ type: String }) public title!: string
-  @Prop({ type: String, default: 'is-bordered-light share-button' })
+  @Prop({ type: String, default: 'is-bordered-light' })
   public type?: string
 
   get qrCodePath(): string {