feat(ui): improved button style

heristop · Jun 29, 2024 · fe6b97e · fe6b97e
1 parent d455200
commit fe6b97e
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 55 deletions.
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
@@ -2,11 +2,11 @@
 
 <template>
   <footer class="footer w-full text-center py-4">
-    <p class="text-gray-900 dark:text-white text-sm flex justify-center items-center gap-2">
+    <p class="text-stone-800 dark:text-white text-sm flex justify-center items-center gap-2">
       <a
         href="https://heristop.github.io/about"
         target="_blank"
-        class="text-gray-700 dark:text-gray-400 hover:text-gray-400 dark:hover:text-gray-500 transition-colors duration-300 font-bold"
+        class="text-stone-700 dark:text-stone-400 hover:text-stone-400 dark:hover:text-stone-500 transition-colors duration-300 font-bold"
       >@heristop</a>
     </p>
   </footer>

diff --git a/app/components/ConfigDrawer.vue b/app/components/ConfigDrawer.vue
@@ -39,11 +39,11 @@ onMounted(() => {
   <transition name="slide-fade">
     <div
       v-if="isPositioned"
-      class="fixed top-0 right-0 bg-opacity-80 bg-neutral-800 text-white rounded-l-md shadow-lg space-y-4 text-sm border-white border-opacity-20 border-2 z-50"
+      class="fixed top-0 right-0 bg-opacity-80 bg-stone-800 text-white rounded-l-md shadow-lg space-y-4 text-sm border-white border-opacity-20 border-2 z-50"
       :style="{ width: drawerMinimized ? '40px' : `${size.width}px`, height: drawerMinimized ? 'auto' : '100vh' }"
     >
       <div
-        class="header flex justify-between items-center rounded-l-md bg-neutral-800 px-2 py-1"
+        class="header flex justify-between items-center rounded-l-md bg-stone-800 px-2 py-1"
       >
         <h2
           v-if="!drawerMinimized"
@@ -86,16 +86,20 @@ onMounted(() => {
           <div class="flex items-center justify-between space-x-2 mb-3">
             <TButton
               :is-active="store.display === 'name'"
+              size="sm"
+              class="w-full"
               @click="setDisplay('name')"
             >
-              name
+              Name
             </TButton>
 
             <TButton
               :is-active="store.display === 'key'"
+              size="sm"
+              class="w-full"
               @click="setDisplay('key')"
             >
-              key
+              Key
             </TButton>
           </div>
         </div>
@@ -126,11 +130,12 @@ onMounted(() => {
           <div class="flex items-center justify-between space-x-2 mb-3">
             <TButton
               :is-active="false"
-              class="border-red-600 bg-red-700 hover:bg-red-600"
+              size="sm"
+              class="w-full"
               aria-label="reset"
               @click="resetConfiguration"
             >
-              reset
+              Reset
             </TButton>
           </div>
         </div>

diff --git a/app/components/StatusManager.vue b/app/components/StatusManager.vue
@@ -67,61 +67,61 @@ function getNextColor() {
   <div
     v-for="(status, index) in statuses"
     :key="index"
-    class="flex items-center space-x-2 space-y-2 align-middle status-item text-neutral-800"
+    class="flex items-center space-x-2 space-y-2 align-middle status-item text-stone-800"
     :draggable="!inputFocused"
     @dragstart="startStatusDrag($event, index)"
     @dragover.prevent
     @drop="dropStatus($event, index)"
   >
-    <div class="text-neutral-400 w-20 text-xs">
+    <div class="text-stone-400 w-20 text-xs">
       {{ index + 1 }}.
     </div>
     <input
       v-model="status.name"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-300 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-300 text-xs"
       placeholder="status"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
     >
     <input
       v-model="status.color"
       :style="{ backgroundColor: isValidColor(status.color) ? status.color : '#FFFFFF', color: isValidColor(status.color) ? getTextColor(status.color) : '#000000' }"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-300 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-300 text-xs"
       placeholder="color"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
     >
     <button
       :disabled="statuses.length <= 1"
-      class="text-neutral-200 font-semibold w-[200px] disabled:text-neutral-500 text-xs"
+      class="text-stone-200 font-semibold w-[200px] disabled:text-stone-500 text-xs"
       @click="removeStatus(index)"
     >
       remove
     </button>
   </div>
 
-  <div class="flex items-center space-x-2 space-y-2 align-middle status-item text-neutral-600 mb-6">
-    <div class="text-neutral-400 w-20 text-sm">
+  <div class="flex items-center space-x-2 space-y-2 align-middle status-item text-stone-600 mb-6">
+    <div class="text-stone-400 w-20 text-sm">
       {{ statuses.length + 1 }}.
     </div>
     <input
       v-model="newStatus.name"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-400 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-400 text-xs"
       placeholder="status"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
     >
     <input
       v-model="newStatus.color"
       :style="{ backgroundColor: isValidColor(newStatus.color) ? newStatus.color : '#FFFFFF', color: isValidColor(newStatus.color) ? getTextColor(newStatus.color) : '#000000' }"
-      class="p-1 font-semibold rounded-sm w-full placeholder:text-neutral-400 text-xs"
+      class="p-1 font-semibold rounded-sm w-full placeholder:text-stone-400 text-xs"
       :placeholder="getNextColor()"
       @focus="disableStatusDrag"
       @blur="enableStatusDrag"
     >
     <button
       :disabled="!newStatus.name || !newStatus.color"
-      class="text-neutral-200 font-semibold w-[200px] disabled:text-neutral-500 text-xs"
+      class="text-stone-200 font-semibold w-[200px] disabled:text-stone-500 text-xs"
       @click="addNewStatus"
     >
       add

diff --git a/app/components/UploadDownload.vue b/app/components/UploadDownload.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import TButton from './ui/TButton.vue'
 import { useConfig } from '~/composables/config'
 import { useStore } from '~/composables/store'
 
@@ -16,19 +17,21 @@ const { fileInput, loadFromFile, saveToFile } = useConfig()
     @change="loadFromFile"
   >
   <div class="flex items-center justify-between space-x-2 mb-3">
-    <button
-      class="flex-1 font-semibold border-2 border-neutral-600 text-white px-2 py-1 rounded-md transition duration-300 bg-neutral-900 hover:bg-neutral-600"
+    <TButton
+      size="sm"
+      class="w-full py-1"
       @click="($refs.fileInput as HTMLInputElement).click()"
     >
-      upload
-    </button>
+      Upload
+    </TButton>
 
-    <button
-      class="flex-1 font-semibold border-2 border-neutral-600 text-white px-2 py-1 disabled:cursor-not-allowed rounded-md transition duration-300 bg-neutral-900 hover:bg-neutral-600"
+    <TButton
+      size="sm"
+      class="w-full py-1"
       :disabled="!store.configLoaded"
       @click="saveToFile"
     >
-      save
-    </button>
+      Save
+    </TButton>
   </div>
 </template>
diff --git a/app/components/ViewportSettings.vue b/app/components/ViewportSettings.vue
@@ -42,10 +42,12 @@ const captureTreeMap = () => {
     <TButton
       :is-active="false"
       :disabled="!store.configLoaded"
+      size="sm"
+      class="w-full"
       @click="captureTreeMap"
     >
       <svg
-        class="w-5 h-5 text-white"
+        class="w-4 h-4 mr-2"
         aria-hidden="true"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
@@ -64,13 +66,13 @@ const captureTreeMap = () => {
           d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
         />
       </svg>
-      <span class="text-sm">capture</span>
+      Capture
     </TButton>
   </div>
 
   <div class="flex items-center space-x-4 mb-4 px-2">
     <div class="flex flex-col items-start space-y-2">
-      <span class="text-xs font-bold">Width</span>
+      <span class="text-xs font-bold text-stone-200">Width</span>
       <input
         v-model="minWidth"
         type="range"
@@ -80,7 +82,7 @@ const captureTreeMap = () => {
       >
     </div>
     <div class="flex flex-col items-start space-y-2">
-      <span class="text-xs font-bold">Height</span>
+      <span class="text-xs font-bold text-stone-200">Height</span>
       <input
         v-model="minHeight"
         type="range"

diff --git a/app/components/ui/TButton.vue b/app/components/ui/TButton.vue
@@ -1,6 +1,10 @@
 <template>
   <button
-    :class="[isActive ? 'bg-neutral-600' : 'bg-neutral-900', 'flex w-full shadow-md items-center justify-center font-semibold border-2 border-neutral-600 text-white px-2 py-1 rounded-md transition duration-300 hover:bg-neutral-600']"
+    :class="[
+      isActive ? 'text-stone-600 bg-stone-300 dark:bg-stone-300' : 'bg-stone-400 dark:bg-stone-100 text-white',
+      size === 'sm' ? 'px-2 py-[0.4rem] text-xs' : size === 'md' ? 'px-4 py-[0.4rem] text-sm' : 'px-6 py-3 text-base',
+      'flex text-sm shadow items-center justify-center font-semibold border-2 border-opacity-45 hover:border-opacity-25 border-stone-300 hover:text-stone-600 dark:text-stone-600 rounded-md transition duration-300 hover:border-stone-400 hover:bg-stone-300 dark:hover:bg-stone-300',
+    ]"
     @click="$emit('click')"
   >
     <slot />
@@ -10,8 +14,10 @@
 <script setup lang="ts">
 withDefaults(defineProps<{
   isActive: boolean
+  size: 'sm' | 'md' | 'lg'
 }>(), {
   isActive: false,
+  size: 'md',
 })
 
 defineEmits(['click'])

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -36,7 +36,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="container"
-    :class="['w-full', useFullHeight ? 'h-full' : 'h-screen', 'bg-neutral-600', 'text-white']"
+    :class="['w-full', useFullHeight ? 'h-full' : 'h-screen', 'bg-stone-600', 'text-white']"
   >
     <slot />
   </div>