From da0e0c8b181f3b86c6a6e1d556e4fb73279d058c Mon Sep 17 00:00:00 2001
From: Monochromish <chillygamer7@gmail.com>
Date: Sat, 2 Jul 2022 10:52:14 +1000
Subject: [PATCH 1/4] Add color to search button background

---
 src/renderer/less/pages.less                |  4 +++-
 src/renderer/style.css                      |  4 +++-
 src/renderer/views/pages/cider-playlist.ejs | 11 ++++-------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 245e454d..5d031d88 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -825,9 +825,11 @@
           width: 32px;
           align-items: center;
           margin-right: 1rem;
-          background: transparent;
+          background: rgba(100, 100, 100, 0.5);
           border: none;
           cursor: pointer;
+          border-radius: 100vmax;
+          box-shadow: var(--ciderShadow-Generic);
 
           > ._svg-icon {
             width: 18px;
diff --git a/src/renderer/style.css b/src/renderer/style.css
index cbeee3c8..a34c79b2 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -13640,9 +13640,11 @@ input[type=checkbox][switch]:checked:active::before {
   width: 32px;
   align-items: center;
   margin-right: 1rem;
-  background: transparent;
+  background: rgba(100, 100, 100, 0.5);
   border: none;
   cursor: pointer;
+  border-radius: 100vmax;
+  box-shadow: var(--ciderShadow-Generic);
 }
 .playlist-page .playlist-display .playlistInfo .playlist-info .search-btn > ._svg-icon {
   width: 18px;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index e1f1e2d7..fc7f79dc 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -108,15 +108,12 @@
                                     {{app.getLz('term.confirm')}}
                                 </button>
                                 <div style="display: flex; float: right;">
-                                    <button :class="['search-btn', showSearch ? 'active' : '']"
-                                            @click="toggleSearch()"
-                                            :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
-                                        <svg-icon :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
-                                                  :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
+                                    <button :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }" :class="['search-btn', showSearch ? 'active' : '']" @click="toggleSearch()" :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
+                                        <svg-icon :style="{ 'width': '15px', 'background-color': '#' + hasHeroObject()?.bgColor ?? '' }" :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
                                         </svg-icon>
                                     </button>
-                                    <button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
-                                        <div class="svg-icon"></div>
+                                    <button :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }" class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
+                                        <div :style="{ 'background-color': '#' + hasHeroObject()?.bgColor ?? '' }" class="svg-icon"></div>
                                     </button>
                                 </div>
                             </div>

From ade7412ab05a2d8e6ac8c3bdbb38cd5cfe1f0703 Mon Sep 17 00:00:00 2001
From: Monochromish <chillygamer7@gmail.com>
Date: Sat, 2 Jul 2022 11:09:07 +1000
Subject: [PATCH 2/4] Add shadow to follow button

---
 src/renderer/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/style.css b/src/renderer/style.css
index a34c79b2..d35ab918 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -12240,6 +12240,7 @@ input[type=checkbox][switch]:checked:active::before {
   font-size: 12px;
   cursor: pointer;
   flex: 0 0 32px;
+  box-shadow: var(--ciderShadow-Generic);
 }
 .artist-chip .artist-chip__follow:hover {
   background: var(--selected);

From 0dc210d40b6d6f67c90b4169db4a64b2af2dea1b Mon Sep 17 00:00:00 2001
From: Monochromish <chillygamer7@gmail.com>
Date: Sat, 2 Jul 2022 11:11:19 +1000
Subject: [PATCH 3/4] im dumb sorry

---
 src/renderer/less/elements.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 9341a783..2ff30cd4 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -2064,6 +2064,7 @@ input[type=checkbox][switch]:checked:active::before {
     font-size: 12px;
     cursor: pointer;
     flex: 0 0 32px;
+    box-shadow: var(--ciderShadow-Generic);
 
     &:hover {
       background: var(--selected);

From efd3ce8f6795ed046e8bd40bf40af727329a241d Mon Sep 17 00:00:00 2001
From: Monochromish <chillygamer7@gmail.com>
Date: Sat, 2 Jul 2022 11:18:38 +1000
Subject: [PATCH 4/4] Add brightness effect of search button

---
 src/renderer/less/pages.less | 4 ++++
 src/renderer/style.css       | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 5d031d88..c1c057d3 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -842,6 +842,10 @@
           animation: enlarge 0.5s ease-in-out;
         }
 
+        .search-btn:hover {
+          filter: brightness(125%);
+        }
+
         @keyframes enlarge {
           0% {
             transform: scale(1);
diff --git a/src/renderer/style.css b/src/renderer/style.css
index d35ab918..0f561b2a 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -13655,6 +13655,9 @@ input[type=checkbox][switch]:checked:active::before {
 .playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active {
   animation: enlarge 0.5s ease-in-out;
 }
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn:hover {
+  filter: brightness(125%);
+}
 @keyframes enlarge {
   0% {
     transform: scale(1);