From 24d45d5967297f3fd1a58f5d00c7f1972936f812 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Thu, 22 Jan 2026 21:50:28 +0900
Subject: [PATCH] improve color picker UI

---
 src/components/PresetColorPicker.vue          |  4 +--
 src/localization/en.json                      | 11 +++++++-
 .../components/Tabs/AppearanceTab.vue         | 28 +++++++++++++------
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/PresetColorPicker.vue b/src/components/PresetColorPicker.vue
index 0bcc5f2b..de30a8eb 100644
--- a/src/components/PresetColorPicker.vue
+++ b/src/components/PresetColorPicker.vue
@@ -59,8 +59,8 @@
     <Popover>
         <PopoverTrigger as-child>
             <Button variant="outline" size="sm" class="flex items-center gap-2 px-2" :disabled="disabled">
-                <span class="h-4 w-4 rounded border" :style="{ backgroundColor: safeValue }" />
-                <span class="font-mono text-xs opacity-80">
+                <span class="h-4 w-4 rounded" :style="{ backgroundColor: safeValue }" />
+                <span class="text-xs opacity-80">
                     {{ displayText }}
                 </span>
 
diff --git a/src/localization/en.json b/src/localization/en.json
index 40735bee..426406d3 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -656,7 +656,16 @@
                 },
                 "user_colors": {
                     "header": "User Colors",
-                    "random_colors_from_user_id": "Random Colors from User ID"
+                    "random_colors_from_user_id": "Random Colors from User ID",
+                    "trust_levels": {
+                        "visitor": "Visitor",
+                        "new_user": "New User",
+                        "user": "User",
+                        "known_user": "Known User",
+                        "trusted_user": "Trusted User",
+                        "vrchat_team": "VRChat Team",
+                        "nuisance": "Nuisance"
+                    }
                 },
                 "friend_log": {
                     "header": "Friend Log",
diff --git a/src/views/Settings/components/Tabs/AppearanceTab.vue b/src/views/Settings/components/Tabs/AppearanceTab.vue
index c47ab27f..6789bb88 100644
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -369,51 +369,63 @@
                 :label="t('view.settings.appearance.user_colors.random_colors_from_user_id')"
                 :value="randomUserColours"
                 @change="updateTrustColor('', '', true)"></simple-switch>
-            <div>
+            <div class="flex flex-col gap-1">
                 <div>
-                    <span class="text-[18px] align-top x-tag-untrusted">Visitor</span>
+                    <span class="x-tag-untrusted">{{
+                        t('view.settings.appearance.user_colors.trust_levels.visitor')
+                    }}</span>
                     <PresetColorPicker
                         :model-value="trustColor.untrusted"
                         :presets="['#CCCCCC']"
                         @change="updateTrustColor('untrusted', $event)" />
                 </div>
                 <div>
-                    <span class="text-[18px] align-top x-tag-basic">New User</span>
+                    <span class="x-tag-basic">{{
+                        t('view.settings.appearance.user_colors.trust_levels.new_user')
+                    }}</span>
                     <PresetColorPicker
                         :model-value="trustColor.basic"
                         :presets="['#1778ff']"
                         @change="updateTrustColor('basic', $event)" />
                 </div>
                 <div>
-                    <span class="text-[18px] align-top x-tag-known">User</span>
+                    <span class="x-tag-known">{{ t('view.settings.appearance.user_colors.trust_levels.user') }}</span>
                     <PresetColorPicker
                         :model-value="trustColor.known"
                         :presets="['#2bcf5c']"
                         @change="updateTrustColor('known', $event)" />
                 </div>
                 <div>
-                    <span class="text-[18px] align-top x-tag-trusted">Known User</span>
+                    <span class="x-tag-trusted">{{
+                        t('view.settings.appearance.user_colors.trust_levels.known_user')
+                    }}</span>
                     <PresetColorPicker
                         :model-value="trustColor.trusted"
                         :presets="['#ff7b42']"
                         @change="updateTrustColor('trusted', $event)" />
                 </div>
                 <div>
-                    <span class="text-[18px] align-top x-tag-veteran">Trusted User</span>
+                    <span class="x-tag-veteran">{{
+                        t('view.settings.appearance.user_colors.trust_levels.trusted_user')
+                    }}</span>
                     <PresetColorPicker
                         :model-value="trustColor.veteran"
                         :presets="['#b18fff', '#8143e6', '#ff69b4', '#b52626', '#ffd000', '#abcdef']"
                         @change="updateTrustColor('veteran', $event)" />
                 </div>
                 <div>
-                    <span class="text-[18px] align-top x-tag-vip">VRChat Team</span>
+                    <span class="x-tag-vip">{{
+                        t('view.settings.appearance.user_colors.trust_levels.vrchat_team')
+                    }}</span>
                     <PresetColorPicker
                         :model-value="trustColor.vip"
                         :presets="['#ff2626']"
                         @change="updateTrustColor('vip', $event)" />
                 </div>
                 <div>
-                    <span class="text-[18px] align-top x-tag-troll">Nuisance</span>
+                    <span class="x-tag-troll">{{
+                        t('view.settings.appearance.user_colors.trust_levels.nuisance')
+                    }}</span>
                     <PresetColorPicker
                         :model-value="trustColor.troll"
                         :presets="['#782f2f']"