update html formatting

client/pages/config/index.vue

@@ -1,23 +1,21 @@
 <template>
   <div>
-    <!-- <div class="h-0.5 bg-primary bg-opacity-50 w-full" /> -->
-    
-    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8" style="background-color: ">
-    <div class="" style="background-color: ">
-      <h1 class="text-xl mb-2">Settings</h1>
+    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-2">
+      <div class="mb-2">
+        <h1 class="text-xl">Settings</h1>
       </div>
 
       <div class="sm:flex">
-      <div id="firstcolumn" class="flex-1" style="background-color: ">
-        <div class="">
+        <div id="firstcolumn" class="flex-1">
+          <div>
             <h2 class="font-semibold">General</h2>
           </div>
-          <div class="flex items-center py-2">
+          <div class="flex items-end py-2">
             <ui-toggle-switch v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
             <ui-tooltip :text="tooltips.storeCoverWithItem">
               <p class="pl-4">
                 Store covers with item
-                <span class="material-icons icon-text">info_outlined</span>
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -27,7 +25,7 @@
             <ui-tooltip :text="tooltips.storeMetadataWithItem">
               <p class="pl-4">
                 Store metadata with item
-                <span class="material-icons icon-text">info_outlined</span>
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -37,7 +35,7 @@
             <ui-tooltip :text="tooltips.sortingIgnorePrefix">
               <p class="pl-4">
                 Ignore prefixes when sorting title and series
-                <span class="material-icons icon-text">info_outlined</span>
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -47,7 +45,7 @@
 
           <div class="flex items-center py-2">
             <ui-toggle-switch v-model="newServerSettings.chromecastEnabled" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('chromecastEnabled', val)" />
-            <p class="pl-4">Enable Chromecast</p>
+            <p class="pl-4">Chromecast support</p>
           </div>
 
           <div class="mt-4">
@@ -58,8 +56,8 @@
             <ui-toggle-switch v-model="useSquareBookCovers" :disabled="updatingServerSettings" @input="updateBookCoverAspectRatio" />
             <ui-tooltip :text="tooltips.coverAspectRatio">
               <p class="pl-4">
-              Use square book covers
-              <span class="material-icons icon-text">info_outlined</span>
+                Square book covers
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -68,8 +66,8 @@
             <ui-toggle-switch v-model="useAlternativeBookshelfView" :disabled="updatingServerSettings" @input="updateAlternativeBookshelfView" />
             <ui-tooltip :text="tooltips.bookshelfView">
               <p class="pl-4">
-              Use alternative bookshelf view
-              <span class="material-icons icon-text">info_outlined</span>
+                Alternative bookshelf view
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -80,8 +78,8 @@
           </div>
         </div>
 
-      <div id="secondcolumn" class="flex-1" style="background-color: ">
-        <div class="">
+        <div id="secondcolumn" class="flex-1">
+          <div>
             <h2 class="font-semibold">Scanner</h2>
           </div>
 
@@ -89,8 +87,8 @@
             <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerParseSubtitle', val)" />
             <ui-tooltip :text="tooltips.scannerParseSubtitle">
               <p class="pl-4">
-              Scanner parse subtitles
-              <span class="material-icons icon-text">info_outlined</span>
+                Parse subtitles
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -99,8 +97,8 @@
             <ui-toggle-switch v-model="newServerSettings.scannerFindCovers" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerFindCovers', val)" />
             <ui-tooltip :text="tooltips.scannerFindCovers">
               <p class="pl-4">
-              Scanner find covers
-              <span class="material-icons icon-text">info_outlined</span>
+                Find covers
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
             <div class="flex-grow" />
@@ -113,8 +111,8 @@
             <ui-toggle-switch v-model="newServerSettings.scannerPreferAudioMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferAudioMetadata', val)" />
             <ui-tooltip :text="tooltips.scannerPreferAudioMetadata">
               <p class="pl-4">
-              Scanner prefer audio metadata
-              <span class="material-icons icon-text">info_outlined</span>
+                Prefer audio metadata
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -123,8 +121,8 @@
             <ui-toggle-switch v-model="newServerSettings.scannerPreferOverdriveMediaMarker" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOverdriveMediaMarker', val)" />
             <ui-tooltip :text="tooltips.scannerPreferOverdriveMediaMarker">
               <p class="pl-4">
-              Scanner prefer Overdrive Media Markers for chapters
-              <span class="material-icons icon-text">info_outlined</span>
+                Prefer Overdrive Media Markers for chapters
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -133,8 +131,8 @@
             <ui-toggle-switch v-model="newServerSettings.scannerPreferOpfMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferOpfMetadata', val)" />
             <ui-tooltip :text="tooltips.scannerPreferOpfMetadata">
               <p class="pl-4">
-              Scanner prefer OPF metadata
-              <span class="material-icons icon-text">info_outlined</span>
+                Prefer OPF metadata
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -143,8 +141,8 @@
             <ui-toggle-switch v-model="newServerSettings.scannerPreferMatchedMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferMatchedMetadata', val)" />
             <ui-tooltip :text="tooltips.scannerPreferMatchedMetadata">
               <p class="pl-4">
-              Scanner prefer matched metadata
-              <span class="material-icons icon-text">info_outlined</span>
+                Prefer matched metadata
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -154,7 +152,7 @@
             <ui-tooltip :text="tooltips.scannerDisableWatcher">
               <p class="pl-4">
                 Disable Watcher
-              <span class="material-icons icon-text">info_outlined</span>
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -163,14 +161,14 @@
             <h2 class="font-semibold">Experimental Features</h2>
           </div>
 
-        <div>
+          <div class="flex items-center py-2">
             <div class="flex items-center">
               <ui-toggle-switch v-model="showExperimentalFeatures" />
               <ui-tooltip :text="tooltips.experimentalFeatures">
                 <p class="pl-4">
                   Experimental Features
                   <a href="https://github.com/advplyr/audiobookshelf/discussions/75" target="_blank">
-                  <span class="material-icons icon-text">info_outlined</span>
+                    <span class="material-icons icon-text text-sm">info_outlined</span>
                   </a>
                 </p>
               </ui-tooltip>
@@ -182,7 +180,7 @@
             <ui-tooltip :text="tooltips.enableEReader">
               <p class="pl-4">
                 Enable e-reader for all users
-              <span class="material-icons icon-text">info_outlined</span>
+                <span class="material-icons icon-text text-sm">info_outlined</span>
               </p>
             </ui-tooltip>
           </div>
@@ -231,7 +229,6 @@
 
     <div class="h-0.5 bg-primary bg-opacity-30 w-full" />
 
-
     <prompt-dialog v-model="showConfirmPurgeCache" :width="675">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
         <p class="text-error  font-semibold">Important Notice!</p>