From 334ccac643d9eca867755b0ba6b357f219544d88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Deluan=20Quint=C3=A3o?= <deluan@navidrome.org>
Date: Sun, 27 Nov 2022 12:13:00 -0500
Subject: [PATCH] Spotify-ish Improvement (#2012)

* spotify-improvement

* fixing the issue of applying styles to filter fields too

* Remove scrollbar styling.

Maybe we should simulate macOS's scrollbar behaviour, with something like this: https://gist.github.com/spemer/a0e218bbb45433bd611e68446523a00b

Co-authored-by: Rishabh Malhotra <rishabhmalhotraa01@gmail.com>
---
 ui/src/themes/spotify.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/ui/src/themes/spotify.js b/ui/src/themes/spotify.js
index ad438a10d..8efd49b67 100644
--- a/ui/src/themes/spotify.js
+++ b/ui/src/themes/spotify.js
@@ -292,6 +292,38 @@ export default {
       input: {
         paddingLeft: '.9rem',
         border: 0,
+        '& .MuiInputBase-root': {
+          backgroundColor: 'white !important',
+          borderRadius: '20px !important',
+          color: 'black',
+          border: '0px',
+          '& fieldset': {
+            borderColor: 'white',
+          },
+          '&:hover fieldset': {
+            borderColor: 'white',
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: 'white',
+          },
+          '& svg': {
+            color: 'black !important',
+          },
+
+          '& .MuiOutlinedInput-input:-webkit-autofill': {
+            borderRadius: '20px 0px 0px 20px',
+            '-webkit-box-shadow': '0 0 0 100px #c2c1c2 inset',
+            '-webkit-text-fill-color': 'black',
+          },
+        },
+      },
+    },
+    RaFilter: {
+      form: {
+        '& .MuiOutlinedInput-input:-webkit-autofill': {
+          '-webkit-box-shadow': '0 0 0 100px #28282b inset',
+          '-webkit-text-fill-color': 'white',
+        },
       },
     },
     RaFilterButton: {