Refactor UI components for improved styling and consistency

Author: Ayideyia

frontend/src/assets/styles/theme.less

@@ -88,7 +88,6 @@
 
   // Menu
   --menu-bg: ~'var(--menu-bg-@{theme})';
-  --menu-item-hover: ~'var(--menu-item-hover-@{theme})';
 
   // Table
   --table-tr-odd-bg: ~'var(--table-tr-odd-bg-@{theme})';

frontend/src/assets/styles/utilities/display.less

@@ -29,3 +29,7 @@
 .\!hidden {
   display: none !important;
 }
+
+.invisible {
+  visibility: hidden;
+}

frontend/src/assets/styles/utilities/flex.less

@@ -53,7 +53,9 @@
 .justify-evenly {
   justify-content: space-evenly;
 }
-
+.shrink-0 {
+  flex-shrink: 0;
+}
 .flex-1 {
   flex: 1 1 0%;
 }

frontend/src/assets/styles/utilities/others.less

@@ -38,6 +38,10 @@
   z-index: 999;
 }
 
+.z-9999 {
+  z-index: 9999;
+}
+
 .top-0 {
   top: 0;
 }
@@ -102,6 +106,10 @@
   cursor: pointer;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -118,10 +126,34 @@
   transition-property: all;
 }
 
+.duration-100 {
+  transition-duration: 0.1s;
+}
+
 .duration-200 {
   transition-duration: 0.2s;
 }
 
 .duration-400 {
   transition-duration: 0.4s;
 }
+
+.shadow {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.outline-none {
+  outline: none;
+}
+
+.border-0 {
+  border: none;
+}
+
+.bg-transparent {
+  background: transparent;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}

frontend/src/assets/styles/utilities/rounded.less

@@ -1,4 +1,4 @@
-@radius-values: 0, 2, 4, 8, 16, 32, 9999;
+@radius-values: 0, 2, 4, 6, 8, 16, 32, 9999;
 
 .generate-rounded(@i: 1) when (@i <= length(@radius-values)) {
   @r: extract(@radius-values, @i);

frontend/src/assets/styles/utilities/size.less

@@ -1,4 +1,4 @@
-@size-values: 0, 8, 12, 16, 24, 32, 64, 128, 256;
+@size-values: 0, 8, 10, 12, 16, 18, 24, 32, 64, 128, 256;
 @percent-values: 25, 50, 60, 75, 90, 100;
 
 .generate-size(@i: 1) when (@i <= length(@size-values)) {
@@ -27,6 +27,18 @@
   .h-\[@{p}\%\] {
     height: ~'@{p}%';
   }
+  .min-w-\[@{p}\%\] {
+    min-width: ~'@{p}%';
+  }
+  .min-h-\[@{p}\%\] {
+    min-height: ~'@{p}%';
+  }
+  .max-w-\[@{p}\%\] {
+    max-width: ~'@{p}%';
+  }
+  .max-h-\[@{p}\%\] {
+    max-height: ~'@{p}%';
+  }
   .generate-percent(@i + 1);
 }
 .generate-percent();

frontend/src/assets/styles/utilities/text.less

@@ -18,6 +18,9 @@
 .text-right {
   text-align: right;
 }
+.align-middle {
+  vertical-align: middle;
+}
 
 .line-clamp-1 {
   display: -webkit-box;
@@ -43,6 +46,30 @@
   text-wrap: nowrap;
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.break-keep {
+  word-break: keep-all;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .font-bold {
   font-weight: bold;
 }

frontend/src/assets/styles/variables.less

@@ -100,8 +100,8 @@
   --progress-inner-bg-dark: var(--primary-color);
 
   // Dropdown
-  --dropdown-bg-light: #fff;
-  --dropdown-bg-dark: #343434;
+  --dropdown-bg-light: rgba(255, 255, 255, 0.8);
+  --dropdown-bg-dark: rgba(62, 62, 62, 0.8);
 
   // Modal
   --modal-bg-light: #f6f6f6;
@@ -143,10 +143,8 @@
   --toast-bg-dark: #343434;
 
   // Menu
-  --menu-bg-light: #fff;
-  --menu-item-hover-light: #e9e9e9;
-  --menu-bg-dark: rgba(52, 52, 52, 1);
-  --menu-item-hover-dark: rgb(91, 91, 91);
+  --menu-bg-light: rgba(255, 255, 255, 0.8);
+  --menu-bg-dark: rgba(62, 62, 62, 0.8);
 
   // Table
   --table-tr-odd-bg-light: rgb(247, 247, 247);

frontend/src/components/Button/index.vue

@@ -20,10 +20,18 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div :class="[type, size, { disabled, loading }]" class="btn">
+  <div
+    :class="[type, size, { 'pointer-events-none': disabled || loading }]"
+    class="gui-button inline-flex items-center justify-center text-center align-middle rounded-6 text-14 cursor-pointer px-12 py-6 duration-200"
+  >
     <Icon v-if="loading" :fill="`var(--btn-${type}-color)`" icon="loading" class="rotation" />
     <template v-else>
-      <Icon v-if="disabled" :fill="`var(--btn-${type}-color)`" icon="forbidden" class="disabled" />
+      <Icon
+        v-if="disabled"
+        :fill="`var(--btn-${type}-color)`"
+        icon="forbidden"
+        class="pointer-events-none"
+      />
       <Icon
         v-if="icon"
         :icon="icon"
@@ -37,24 +45,6 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style lang="less" scoped>
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: 6px;
-  font-size: 14px;
-  cursor: pointer;
-  padding: 6px 12px;
-  transition: all 0.2s;
-}
-
-.disabled,
-.loading {
-  pointer-events: none;
-}
-
 .normal {
   color: var(--btn-normal-color);
   background-color: var(--btn-normal-bg);

frontend/src/components/Card/index.vue

@@ -20,7 +20,7 @@ const hasTitle = computed(() => {
 </script>
 
 <template>
-  <div class="card rounded-8 relative flex flex-col">
+  <div class="gui-card rounded-8 relative flex flex-col">
     <div v-if="hasTitle" class="card-header flex items-center p-8">
       <slot name="title-prefix"></slot>
       <div v-if="title" v-tips="title" class="card-header_title line-clamp-1 text-16 font-bold">
@@ -53,7 +53,7 @@ const hasTitle = computed(() => {
 </template>
 
 <style lang="less" scoped>
-.card {
+.gui-card {
   color: var(--card-color);
   background-color: var(--card-bg);
   transition: