Redesign page search input area

+ redefine global search input colors
+ redesign settings page
+ move settings text to a strings module
+ add title and description to now playing settings

src/components/SettingsView/Components/Switch.vue

@@ -13,7 +13,7 @@ defineProps<{
 <style lang="scss">
 .switch {
   height: 1.5rem;
-  background-color: $gray;
+  background-color: $gray3;
   width: 2.5rem;
   padding: $smaller;
   position: relative;

src/components/SettingsView/Group.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="settingsgroup">
-    <div v-if="group.name || group.desc">
-      <h4 v-if="group.name">{{ group.name }}</h4>
+    <div v-if="group.title || group.desc" class="info">
+      <h4 v-if="group.title">{{ group.title }}</h4>
       <div class="desc" v-if="group.desc">{{ group.desc }}</div>
     </div>
-    <div class="setting rounded border pad-lg">
+    <div class="setting rounded pad-lg">
       <div
         v-for="(setting, index) in group.settings"
         :key="index"
@@ -39,21 +39,26 @@ defineProps<{
   display: grid;
   gap: $small;
   margin-top: 2rem;
-
+  
   &:first-child {
     margin-top: 0;
   }
 
+  .info {
+    margin-left: $smaller;
+  }
+
   h4 {
     margin: $small auto;
   }
-
+  
   .desc {
     opacity: 0.5;
-    font-size: 0.9rem;
+    font-size: 0.8rem;
   }
 
   .setting {
+    background-color: $gray;
     display: grid;
     gap: 1rem;