From 5ee5eac35ab665ea426e6b86d59199cc42faa63a Mon Sep 17 00:00:00 2001
From: Monochromish <chillygamer7@gmail.com>
Date: Mon, 2 May 2022 06:52:07 +1000
Subject: [PATCH] Fixed the weird merging of heart and explicit icons and made
 a few changes.

In this PR:
* The Explicit and Love icon(s) don't merge and are of same size
* Added Display of unlove icon as well in case song is not loved

Screenshots:
---
 src/renderer/assets/feather/heart-fill.svg    |  2 +-
 src/renderer/assets/feather/heart.svg         |  2 +-
 src/renderer/less/elements.css                | 19 ++++++++++++++---
 src/renderer/less/elements.less               | 21 +++++++++++++++----
 .../views/components/mediaitem-list-item.ejs  |  5 +++--
 5 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/renderer/assets/feather/heart-fill.svg b/src/renderer/assets/feather/heart-fill.svg
index 1f790aad..4daaa2c8 100644
--- a/src/renderer/assets/feather/heart-fill.svg
+++ b/src/renderer/assets/feather/heart-fill.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/feather/heart.svg b/src/renderer/assets/feather/heart.svg
index a083b7e2..973edba4 100644
--- a/src/renderer/assets/feather/heart.svg
+++ b/src/renderer/assets/feather/heart.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
\ No newline at end of file
diff --git a/src/renderer/less/elements.css b/src/renderer/less/elements.css
index 20323ac9..0c54721e 100644
--- a/src/renderer/less/elements.css
+++ b/src/renderer/less/elements.css
@@ -364,6 +364,21 @@
   align-items: center;
   justify-content: center;
 }
+.cd-mediaitem-list-item .heart-unfilled {
+  background-image: url("assets/feather/heart.svg");
+  height: 12px;
+  width: 36px;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
+
+.cd-mediaitem-list-item .heart-filled {
+  background-image: url("assets/feather/heart-fill.svg");
+  height: 12px;
+  width: 36px;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
 .cd-mediaitem-list-item .explicit-icon {
   background-image: url("assets/explicit.svg");
   height: 12px;
@@ -372,9 +387,7 @@
   background-repeat: no-repeat;
 }
 .heart-icon {
-  position: absolute;
-  filter: contrast(0);
-  background-repeat: no-repeat;
+  display: flex
 }
 @keyframes load-bar {
   10% {
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index b2ee7753..27418eca 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -448,6 +448,22 @@
     justify-content: center;
   }
 
+  .heart-unfilled {
+    background-image: url("assets/feather/heart.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+  }
+
+  .heart-filled {
+    background-image: url("assets/feather/heart-fill.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+  }
+
   .explicit-icon {
     background-image: url("./assets/explicit.svg");
     height: 12px;
@@ -457,10 +473,7 @@
   }
 
   .heart-icon {
-    position: absolute;
-    right:0;
-    filter: contrast(0);
-    background-repeat: no-repeat;
+    display: flex
   }
 
   /* CSS.gg
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index c77a50f8..a5ae3ce9 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -65,8 +65,9 @@
                     </template>
                 </div>
             </div>
-            <div class="heart-icon" v-if="isLoved">
-                <div class="svg-icon" :style="{'--url': 'url(./assets/feather/heart-fill.svg)'}"></div>
+            <div class="heart-icon">
+                <div class="heart-unfilled" v-if="isLoved == false" :style="{'--url': 'url(./assets/feather/heart.svg)'}" />
+                <div class="heart-filled" v-if="isLoved == true" :style="{'--url': 'url(./assets/feather/heart-fill.svg)'}" />
             </div>
             <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"></div>
             <template v-if="showMetaData == true" @dblclick="route()">