added styling on theme selector

src/pages/settings/preload.ts

@@ -27,9 +27,13 @@ let adBlock: HTMLInputElement,
 
 function getThemeFiles() {
   const selectElement = document.getElementById("themesList") as HTMLSelectElement;
-  const fileNames = fs.readdirSync(process.resourcesPath).filter((file) => file.endsWith(".css"));
+  const fileNames = fs
+    .readdirSync(process.resourcesPath)
+    .filter((file) => file.endsWith(".css"))
+    .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+
   const options = fileNames.map((name) => {
-    return new Option(name, name);
+    return new Option(name.replace(".css", ""), name);
   });
 
   // empty old options

src/pages/settings/settings.html

@@ -291,7 +291,7 @@
                 <p>
                   Select a theme below or "Tidal - Default" to return to the original Tidal look.
                 </p>
-                <select id="themesList" name="themesList">
+                <select class="select-input" id="themesList" name="themesList">
 
                 </select>
               </div>

src/pages/settings/settings.scss

@@ -230,8 +230,6 @@ html {
         border-color: $tidal-blue;
         color: $white;
       }
-
-      // --- Switch slider component ---
     }
   }
 }
@@ -415,3 +413,26 @@ html {
     outline: none;
   }
 }
+
+.select-input {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 5px 0;
+  transition: 0.2s;
+  border: 0;
+  border-bottom: solid 1px $grey-333;
+  outline: none;
+  background: transparent;
+  color: $tidal-grey;
+  font-size: 14px;
+
+  &:focus {
+    border-color: $tidal-blue;
+    color: $white;
+  }
+
+  option {
+    background-color: $tidal-grey-darkest;
+  }
+}