✨ Feature(custom): optimize ui of several buttons

src/renderer/manage/pages/BucketPage.vue

@@ -188,11 +188,13 @@
           <!-- Sort Dropdown -->
           <div class="relative">
             <button
-              class="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-bg-secondary px-3 py-2 text-sm font-medium text-main hover:border-accent hover:bg-accent/10"
+              class="flex cursor-pointer items-center gap-2 rounded-md border border-border bg-bg-secondary px-3 py-2 text-sm font-medium text-secondary hover:border-accent hover:bg-accent/10"
               @click="sortDropdownOpen = !sortDropdownOpen"
             >
               <ArrowUpDownIcon class="action-icon" />
-              {{ t(`pages.manage.bucket.sort.${currentSortType}`) }}
+              <span class="text-sm font-medium text-secondary">
+                {{ t(`pages.manage.bucket.sort.${currentSortType}`) }}</span
+              >
               <ChevronDownIcon class="action-icon" />
             </button>
             <div
@@ -251,7 +253,7 @@
               <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
                 <ChevronRightIcon v-if="index !== 0" class="h-[16px] w-[15px] shrink-0 text-accent" />
                 <button
-                  class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary hover:bg-accent/10 hover:text-main"
+                  class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary last:bg-accent/10 hover:bg-accent/10 hover:text-main"
                   @click="handleBreadcrumbClick(Number(index))"
                 >
                   {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}

src/renderer/manage/pages/LogInPage.vue

@@ -101,7 +101,7 @@
 
                   <div class="relative">
                     <button
-                      class="flex cursor-pointer items-center gap-2 rounded-xl border-none bg-accent/5 p-2 text-sm text-secondary hover:text-main"
+                      class="flex cursor-pointer items-center gap-2 rounded-xl border-none bg-accent/5 p-2 text-xs font-semibold text-secondary hover:bg-accent/30 hover:text-white"
                       @click="toggleConfigDetails(item.alias)"
                     >
                       <InfoIcon :size="14" />
@@ -198,14 +198,14 @@
                     </div>
                     <div class="grid grid-cols-2 gap-1.5 transition-all duration-fast ease-apple">
                       <button
-                        class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-accent/30 text-secondary transition-all duration-fast ease-standard hover:scale-105 hover:border-accent hover:text-accent"
+                        class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-accent/30 text-accent transition-all duration-fast ease-standard hover:scale-105 hover:bg-accent/30 hover:text-white"
                         :title="t('pages.uploaderConfig.edit')"
                         @click.stop="openEditPage(item.alias)"
                       >
                         <Pencil :size="14" />
                       </button>
                       <button
-                        class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-border bg-danger/10 text-danger transition-all duration-fast ease-standard hover:scale-105 hover:border-danger hover:text-danger"
+                        class="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-md border border-border bg-danger/10 text-danger transition-all duration-fast ease-standard hover:scale-105 hover:bg-danger hover:text-white"
                         :title="t('pages.uploaderConfig.delete')"
                         @click.stop="() => handleConfigRemove(item.alias)"
                       >

src/renderer/manage/pages/ManageMain.vue

@@ -144,7 +144,7 @@
           <div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
             <!-- Back to main card -->
             <div
-              class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-success/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple"
+              class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-success/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple hover:border-accent"
               @click="switchPicBed('main')"
             >
               <div class="mb-3 flex h-[40px] w-[40px] items-center justify-center">
@@ -161,7 +161,7 @@
             <div
               v-for="(config, alias) in allPicBedConfigure"
               :key="String(alias)"
-              class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-border/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple [.active]:border-accent"
+              class="relative flex cursor-pointer flex-col items-center rounded-lg border-2 border-border/80 bg-bg-secondary p-6 transition-all duration-fast ease-apple hover:border-accent [.active]:border-accent"
               :class="{ active: String(alias) === currentAlias }"
               @click="switchPicBed(String(alias))"
             >

src/renderer/manage/pages/css/BucketPage.css

@@ -51,9 +51,9 @@
 }
 
 .file-action-button {
-  @apply flex justify-center items-center border-none rounded-sm p-1.5 w-[32px] h-[32px] text-secondary bg-bg-secondary transition-all duration-fast ease-apple cursor-pointer;
+  @apply flex justify-center items-center border-none rounded-sm p-1.5 w-[26px] h-[26px] text-secondary bg-bg-secondary transition-all duration-fast ease-apple cursor-pointer;
-  @apply hover:bg-accent/10 hover:text-main hover:-translate-y-px;
+  @apply hover:bg-accent/50 hover:text-white hover:-translate-y-px;
-  @apply hover:[.danger]:text-error hover:[.danger]:bg-error/10;
+  @apply hover:[.danger]:text-white hover:[.danger]:bg-error/50;
 }
 
 .action-icon {

src/renderer/pages/css/Gallery.css

@@ -35,9 +35,9 @@
 .icon-button {
   @apply flex items-center justify-center border-none rounded-md w-[25px] h-[25px] text-secondary transition-all duration-fast ease-apple cursor-pointer;
   @apply hover:text-main hover:-translate-y-px;
-  @apply [.copy-icon]:hover:text-warning [.copy-icon]:hover:bg-warning/10;
+  @apply [.copy-icon]:hover:text-white [.copy-icon]:hover:bg-warning/50;
-  @apply [.edit-icon]:hover:text-success [.edit-icon]:hover:bg-success/10;
+  @apply [.edit-icon]:hover:text-white [.edit-icon]:hover:bg-success/50;
-  @apply [.delete-icon]:hover:text-error [.delete-icon]:hover:bg-error/10;
+  @apply [.delete-icon]:hover:text-white [.delete-icon]:hover:bg-error/50;
 }
 
 .form-input {

src/renderer/pages/css/UploaderConfigPage.css

@@ -3,5 +3,5 @@
 @import "../../assets/css/utilities.css" reference;
 
 .action-btn {
-  @apply flex justify-center items-center border border-border-secondary/80 rounded-md text-secondary transition-all duration-fast ease-standard w-[30px] h-[30px] cursor-pointer hover:border-accent hover:text-accent hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:[.danger]:border-danger hover:not-disabled:[.danger]:text-danger;
+  @apply flex justify-center items-center border border-border-secondary/80 rounded-md text-secondary transition-all duration-fast ease-standard w-[30px] h-[30px] cursor-pointer hover:bg-accent/30 hover:text-white hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:[.danger]:border-danger hover:not-disabled:[.danger]:bg-danger;
 }