feat: color

NaturalSelectionLabs · Oct 14, 2021 · 3735a74 · 3735a74
1 parent 7fa5ae5
commit 3735a74
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/src/components/AccountItem.vue b/src/components/AccountItem.vue
@@ -15,7 +15,7 @@
             @touchstart="isHover = true"
             @touchend="isHover = false"
         />
-        <Tooltip v-if="$props.address" v-show="isHover" :text="$props.address" />
+        <Tooltip v-if="$props.address" v-show="isHover" :text="$props.address" view-option="account" />
         <Button
             v-show="deleteMode"
             size="sm"

diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
@@ -1,7 +1,10 @@
 <template>
     <span
         class="tooltip"
-        :class="[marginLeftClass, widthClass, heightClass, !widthClass && !heightClass ? 'whitespace-nowrap' : '']"
+        :class="{
+            'color-default': viewOption === 'default' || !viewOption,
+            'color-account': viewOption === 'account',
+        }"
         >{{ text }}</span
     >
 </template>
@@ -12,31 +15,39 @@ import { Vue, Options } from 'vue-class-component';
 @Options({
     props: {
         text: String,
-        heightClass: String,
-        widthClass: String,
-        marginLeftClass: String,
+        viewOption: String,
     },
 })
 export default class Tooltip extends Vue {
     text!: String;
-    heightClass!: String;
-    widthClass!: String;
-    marginLeftClass!: String;
 }
 </script>
 
 <style lang="postcss" scoped>
 @layer components {
     .tooltip {
-        @apply absolute rounded-sm px-2 py-1 text-primary-text bg-primary-link font-normal border-link border-primary-link-border z-10;
+        @apply absolute rounded-sm px-2 py-1 font-normal border-link z-10 whitespace-nowrap;
         left: calc(100% + 5px);
         top: calc(50% - 14px);
     }
 
     .tooltip::after {
         content: '';
         @apply absolute bottom-full left-0 -ml-2 top-3 border-solid border-4;
-        border-color: transparent var(--color-sharebutton-border) transparent transparent;
+    }
+
+    .color-default {
+        @apply text-primary-text bg-primary-link border-primary-link-border;
+        &.tooltip::after {
+            border-color: transparent var(--color-sharebutton-border) transparent transparent;
+        }
+    }
+
+    .color-account {
+        @apply text-account-title bg-account-bg shadow-account;
+        &.tooltip::after {
+            border-color: transparent var(--color-account-bg) transparent transparent;
+        }
     }
 }
 </style>