From ea828a97e96cd532cf95f405a58fc8ab08b4c4af Mon Sep 17 00:00:00 2001
From: Pedro Galhardo <pedromgalhardo@tecnico.ulisboa.pt>
Date: Fri, 1 Jul 2022 10:10:24 +0100
Subject: [PATCH] Make playlist search icon use hero color

---
 src/renderer/assets/search-alt.svg          |  8 ++++----
 src/renderer/less/pages.less                |  5 -----
 src/renderer/style.css                      |  4 ----
 src/renderer/views/pages/cider-playlist.ejs | 12 ++++--------
 4 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/renderer/assets/search-alt.svg b/src/renderer/assets/search-alt.svg
index e9b71e74..d21e9b73 100644
--- a/src/renderer/assets/search-alt.svg
+++ b/src/renderer/assets/search-alt.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#fff" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
-  <path d="M236.475 116.292c-30.447 13.753-37.74 53.708-14.117 77.332 23.624 23.624 63.579 16.33 77.332-14.117 29.331 95.273-88.453 166.118-158.893 95.678s.406-188.224 95.678-158.893z" style="stroke-width:23.8909;fill:#fff"/>
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
+  <path d="M236.475 116.292c-30.447 13.753-37.74 53.708-14.117 77.332 23.624 23.624 63.579 16.33 77.332-14.117 29.331 95.273-88.453 166.118-158.893 95.678s.406-188.224 95.678-158.893z" style="stroke-width:23.8909"/>
+</svg>
diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less
index 00ea28ae..536aa10e 100644
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@@ -833,16 +833,11 @@
             width: 18px;
             height: 18px;
             margin: auto;
-            opacity: 0.5;
           }
         }
 
         .search-btn.active {
           animation: enlarge 0.5s ease-in-out;
-
-          > ._svg-icon {
-            opacity: 1;
-          }
         }
 
         @keyframes enlarge {
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 39de2e15..08ab54c4 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -13648,14 +13648,10 @@ input[type=checkbox][switch]:checked:active::before {
   width: 18px;
   height: 18px;
   margin: auto;
-  opacity: 0.5;
 }
 .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.active > ._svg-icon {
-  opacity: 1;
-}
 @keyframes enlarge {
   0% {
     transform: scale(1);
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index 9a02545b..f752305e 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -111,7 +111,9 @@
                                     <button :class="['search-btn', showSearch ? 'active' : '']"
                                             @click="toggleSearch()"
                                             :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
-                                        <svg-icon :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'"></svg-icon>
+                                        <svg-icon :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
+                                                  :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>
@@ -841,18 +843,12 @@
             },
             toggleSearch() {
                 this.showSearch = !this.showSearch;
+
                 if (!this.showSearch && this.searchQuery != "") {
                     // Clear search query if the search bar becomes hidden
                     this.searchQuery = "";
                     this.search();
                 } else if (this.showSearch) {
-                    // Ensure search bar is visible
-                    document.querySelector(".tab-pane.active").scrollTo({
-                        top: 0,
-                        left: 0,
-                        behavior: "smooth"
-                    });
-
                     // Focus search bar
                     this.$nextTick(() => {
                         this.$refs["search-bar"].focus();