added styling on theme selector

package.json

@@ -8,7 +8,8 @@
     "compile": "tsc && npm run sass-and-copy",
     "watch": "tsc-watch --onSuccess \"npm run sass-and-copy\"",
     "copy-files": "copyfiles -u 1 --exclude './src/**/*.ts' --exclude './src/**/*.scss' \"./src/**/*\" ts-dist",
-    "sass-and-copy": "npm run sass && npm run copy-files",
+    "copy-themes-dev": "copyfiles -u 1 \"./themes/*\" node_modules/electron/dist/resources",
+    "sass-and-copy": "npm run sass && npm run copy-files && npm run copy-themes-dev",
     "build": "npm run builder -- -c ./build/electron-builder.yml",
     "build-deb": "npm run builder -- -c ./build/electron-builder.deb.yml",
     "build-unpacked": "npm run builder -- -c ./build/electron-builder.unpacked.yml",

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;
+  }
+}