From d7d461c75a793695fbb1162eb36c2b99eb4bbdd1 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 2 Apr 2025 00:41:54 +0300
Subject: [PATCH] update settings page.

---
 ui/components/Settings.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/ui/components/Settings.vue b/ui/components/Settings.vue
index df693c93..bb70948a 100644
--- a/ui/components/Settings.vue
+++ b/ui/components/Settings.vue
@@ -25,7 +25,10 @@
                 Dark
               </label>
             </div>
-            <p class="help">Select the color scheme for the WebUI.</p>
+            <p class="help">
+              <span class="icon"><i class="fa-solid fa-info" /></span>
+              <span>Select the color scheme for the WebUI.</span>
+            </p>
           </div>
 
           <div class="field">
@@ -34,7 +37,10 @@
               <input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
               <label for="random_bg" class="is-unselectable">&nbsp;Enable</label>
             </div>
-            <p class="help">Use random background image from your media backends.</p>
+            <p class="help">
+              <span class="icon"><i class="fa-solid fa-info" /></span>
+              <span>Use random background image.</span>
+            </p>
           </div>
 
           <div class="field">
@@ -45,7 +51,10 @@
               <input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50" max="1.00"
                 step="0.05">
             </div>
-            <p class="help">How visible the background image should be.</p>
+            <p class="help">
+              <span class="icon"><i class="fa-solid fa-info" /></span>
+              <span>How visible the background image should be.</span>
+            </p>
           </div>
 
           <div class="field" v-if="bg_enable">
@@ -61,7 +70,10 @@
                 </span>
               </button>
             </div>
-            <p class="help">Change the displayed picture.</p>
+            <p class="help">
+              <span class="icon"><i class="fa-solid fa-info" /></span>
+              <span>Change the displayed picture.</span>
+            </p>
           </div>
         </div>
       </div>