From 69e7dfda7ecc1879246b1a3afe8e8a75a0354d1c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Thu, 25 Jul 2024 11:17:35 +0800
Subject: [PATCH] feat(settings): adjust the style of the upload wallpaper
 component

---
 .../Settings/components/ChangeWallpaper.vue   | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/components/Settings/components/ChangeWallpaper.vue b/src/components/Settings/components/ChangeWallpaper.vue
index a0437ad6..d939d48b 100644
--- a/src/components/Settings/components/ChangeWallpaper.vue
+++ b/src/components/Settings/components/ChangeWallpaper.vue
@@ -138,19 +138,36 @@ function handleRemoveCustomWallpaper() {
             <div i-tabler:photo-off text="3xl $bew-text-3" />
           </picture>
 
-          <!-- Upload wallpaper input -->
-          <input
-            ref="uploadWallpaperRef" type="file" accept="image/*" hidden
-            @change="handleUploadWallpaper"
-          >
+          <Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
+            <picture
+              aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
+              un-border="4 transparent" w-full
+              :class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === item.url : settings.searchPageWallpaper === item.url }"
+              @click="changeWallpaper(item.url)"
+            >
+              <img
+                :src="item.thumbnail || item.url"
+                :alt="item.name"
+                w-full h-full object-cover
+                class="img-no-error"
+              >
+            </picture>
+          </Tooltip>
 
           <Tooltip placement="top" :content="settings.locallyUploadedWallpaper?.name || ''" aspect-video>
+            <!-- Upload wallpaper input -->
+            <input
+              ref="uploadWallpaperRef" type="file" accept="image/*"
+              hidden
+              @change="handleUploadWallpaper"
+            >
+
             <picture
               class="group"
               :class="{ 'selected-wallpaper': isGlobal
                 ? settings.wallpaper === settings.locallyUploadedWallpaper?.url
                 : settings.searchPageWallpaper === settings.locallyUploadedWallpaper?.url }"
-              aspect-video bg="$bew-theme-color-20" rounded="$bew-radius" overflow-hidden
+              aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
               un-border="4 transparent" w-full
               flex="~ items-center justify-center"
               @click="changeWallpaper(settings.locallyUploadedWallpaper?.url || '')"
@@ -184,7 +201,7 @@ function handleRemoveCustomWallpaper() {
               >
                 <div
                   i-tabler:photo-up
-                  text="3xl $bew-theme-color"
+                  text="3xl $bew-text-3"
                 />
               </div>
               <img
@@ -195,22 +212,6 @@ function handleRemoveCustomWallpaper() {
               >
             </picture>
           </Tooltip>
-
-          <Tooltip v-for="item in WALLPAPERS" :key="item.url" placement="top" :content="item.name" aspect-video>
-            <picture
-              aspect-video bg="$bew-fill-1" rounded="$bew-radius" overflow-hidden
-              un-border="4 transparent" w-full
-              :class="{ 'selected-wallpaper': isGlobal ? settings.wallpaper === item.url : settings.searchPageWallpaper === item.url }"
-              @click="changeWallpaper(item.url)"
-            >
-              <img
-                :src="item.thumbnail || item.url"
-                :alt="item.name"
-                w-full h-full object-cover
-                class="img-no-error"
-              >
-            </picture>
-          </Tooltip>
         </div>
       </SettingsItem>
       <SettingsItem v-else :title="$t('settings.image_url')" next-line>