wip

src/components/BaseButton.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import Tooltip from "@/components/base/Tooltip.vue";
+import Tooltip from '@/components/base/Tooltip.vue'
 
 interface IProps {
-  keyboard?: string,
+  keyboard?: string
   active?: boolean
   disabled?: boolean
   loading?: boolean
-  size?: 'small' | 'normal' | 'large',
+  size?: 'small' | 'normal' | 'large'
   type?: 'primary' | 'link' | 'info' | 'orange'
 }
 
@@ -16,33 +16,45 @@ withDefaults(defineProps<IProps>(), {
 })
 
 defineEmits(['click'])
-
 </script>
 
 <template>
   <Tooltip :disabled="!keyboard" :title="`${keyboard}`">
-    <div class="base-button"
-         v-bind="$attrs"
-         @click="e => (!disabled && !loading) && $emit('click',e)"
-         :class="[
-             active && 'active',
-             size,
-             type,
-             (disabled||loading) && 'disabled',
-         ]">
-      <span :style="{opacity:loading?0:1}"><slot></slot></span>
+    <div
+      class="base-button"
+      v-bind="$attrs"
+      @click="e => !disabled && !loading && $emit('click', e)"
+      :class="[active && 'active', size, type, (disabled || loading) && 'disabled']"
+    >
+      <span :style="{ opacity: loading ? 0 : 1 }"><slot></slot></span>
       <IconEosIconsLoading
-          v-if="loading"
-          class="loading"
-          width="18"
-          :color="type === 'info'?'#000000':'#ffffff'"
+        v-if="loading"
+        class="loading"
+        width="18"
+        :color="type === 'info' ? '#000000' : '#ffffff'"
       />
     </div>
   </Tooltip>
 </template>
 
-<style scoped lang="scss">
+<style>
+:root {
+  --btn-primary: rgb(75, 85, 99);
+  --btn-primary-disabled: #90969e;
+  --btn-primary-hover: rgb(105, 121, 143);
+  --btn-info: white;
+  --btn-info-hover: #eaeaea;
+  --btn-orange: #facc15;
+  --btn-orange-hover: #fbe27e;
+}
 
+html.dark {
+  --btn-info: #1b1b1b;
+  --btn-info-hover: #3a3a3a;
+}
+</style>
+
+<style scoped lang="scss">
 .base-button {
   cursor: pointer;
   box-sizing: border-box;
@@ -51,13 +63,13 @@ defineEmits(['click'])
   justify-content: center;
   outline: none;
   text-align: center;
-  transition: all .3s;
+  transition: all 0.3s;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   padding: 0 0.9rem;
-  font-size: .9rem;
+  font-size: 0.9rem;
   height: 2rem;
   color: white;
 
@@ -65,28 +77,29 @@ defineEmits(['click'])
     margin-left: 1rem;
   }
 
-  .loading {
-    position: absolute;
-  }
-
   &.disabled {
-    opacity: .6;
+    opacity: 0.6;
     cursor: not-allowed;
     user-select: none;
+    color: rgba(#fff, 0.4);
+  }
+
+  .loading {
+    position: absolute;
   }
 
   &.small {
     border-radius: 0.3rem;
     padding: 0 0.6rem;
     height: 1.6rem;
-    font-size: .8rem;
+    font-size: 0.8rem;
   }
 
   &.large {
     padding: 0 1.3rem;
     height: 2.4rem;
     font-size: 0.9rem;
-    border-radius: .5rem;
+    border-radius: 0.5rem;
   }
 
   & > span {
@@ -101,8 +114,13 @@ defineEmits(['click'])
   &.primary {
     background: var(--btn-primary);
 
+    &.disabled {
+      opacity: 1;
+      background: var(--btn-primary-disabled);
+    }
+
     &:hover:not(.disabled) {
-      opacity: 0.6;
+      background: var(--btn-primary-hover);
     }
   }
 
@@ -126,17 +144,17 @@ defineEmits(['click'])
   }
 
   &.orange {
-    background: #FACC15;
+    background: var(--btn-orange);
     color: black;
 
     &:hover:not(.disabled) {
-      background: #fbe27e;
+      background: var(--btn-orange-hover);
       color: rgba(0, 0, 0, 0.6);
     }
   }
 
   &.active {
-    opacity: .4;
+    opacity: 0.4;
   }
 }
 </style>

src/components/base/OptionButton.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="w-full flex box-border cp color-white">
+  <div class="flex box-border cp color-white">
     <div class="option-wrap">
       <slot></slot>
     </div>
     <div class="relative group">
       <div
-        class="w-10 rounded-r-lg h-full center bg-[var(--btn-primary)] hover:bg-gray border-solid border-1 border-l-gray/50 border-transparent box-border transition-all duration-300"
+        class="more w-10 rounded-r-lg h-full center border-solid border-1 border-l-gray/50 border-transparent box-border transition-all duration-300"
       >
         <IconFluentChevronDown20Regular />
       </div>
@@ -26,8 +26,28 @@
   display: flex;
   :deep(.base-button) {
     width: 100%;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+}
+
+.primary-btn {
+  .more {
+    background: var(--btn-primary);
+    &:hover {
+      background: var(--btn-primary-hover);
+    }
+  }
+}
+
+.orange-btn {
+  .more {
+    background: var(--btn-orange);
+    color: black;
+    border-left-color: black;
+    &:hover {
+      background: var(--btn-orange-hover);
+    }
   }
 }
 </style>

src/components/base/Textarea.vue

@@ -87,7 +87,7 @@ watch(innerValue, () => {
 }, {immediate: true})
 
 </script>
-<style>
+<style scoped lang="scss">
 .disabled {
   opacity: 0.5;