From 44ed286848e3cdf4c52f29a867fe09964adffd78 Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Fri, 1 Dec 2023 18:38:58 +0800
Subject: [PATCH] ! Fix clear text button style

---
 src/renderer/components/ft-input/ft-input.css      | 8 ++++++++
 src/renderer/components/ft-input/ft-input.js       | 6 +++++-
 src/renderer/components/ft-input/ft-input.vue      | 3 ++-
 src/renderer/views/UserPlaylists/UserPlaylists.vue | 1 +
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 8a26d5824..cbe199a10 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -51,15 +51,23 @@
   inset-inline-start: 0;
   /* To be higher than `.inputWrapper` */
   z-index: 1;
+
   margin-block: 0;
   margin-inline: 3px;
   padding: 10px;
   border-radius: 100%;
+
   color: var(--primary-text-color);
   opacity: 0;
+
   transition: background 0.2s ease-in;
 }
 
+.clearInputTextButton.verticallyCentered {
+  inset-block: 0;
+  margin-block: auto;
+}
+
 .clearInputTextButton.visible:hover {
   background-color: var(--side-nav-hover-color);
   color: var(--side-nav-hover-text-color);
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index fb0cb9cd7..c8374f2db 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -38,6 +38,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    clearInputTextButtonVerticallyCentered: {
+      type: Boolean,
+      default: false
+    },
     showLabel: {
       type: Boolean,
       default: false
@@ -61,7 +65,7 @@ export default defineComponent({
     tooltip: {
       type: String,
       default: ''
-    }
+    },
   },
   data: function () {
     let actionIcon = ['fas', 'search']
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index c9a7c8523..99c72f63f 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -29,7 +29,8 @@
       :icon="['fas', 'times-circle']"
       class="clearInputTextButton"
       :class="{
-        visible: inputDataPresent
+        visible: inputDataPresent,
+        verticallyCentered: clearInputTextButtonVerticallyCentered,
       }"
       tabindex="0"
       role="button"
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index b4dedbb6c..642191399 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -24,6 +24,7 @@
           ref="searchBar"
           :placeholder="$t('User Playlists.Search bar placeholder')"
           :show-clear-text-button="true"
+          :clear-input-text-button-vertically-centered="true"
           :show-action-button="false"
           @input="(input) => query = input"
           @clear="query = ''"