Change clear filter button from text to icon (FreeTubeApp#8205)

* change clear filter button text to icon

* wrap icon in button elem

* add hover css

* refactor css

* Update src/renderer/components/FtSearchFilters/FtSearchFilters.vue

Co-authored-by: PikachuEXE <[email protected]>

* Update src/renderer/components/FtSearchFilters/FtSearchFilters.css

Co-authored-by: absidue <[email protected]>

* Apply suggestion from @PikachuEXE

* Apply suggestion from @PikachuEXE

---------

Co-authored-by: PikachuEXE <[email protected]>
Co-authored-by: absidue <[email protected]>

Author: 3 people

src/renderer/components/FtSearchFilters/FtSearchFilters.css

@@ -1,5 +1,5 @@
 .center {
-  margin-block: 5px 10px;
+  margin-block-start: 10px;
   text-align: center;
   user-select: none;
 }
@@ -18,6 +18,42 @@
   justify-content: center;
 }
 
+.titleContainer {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.5rem;
+  block-size: inherit;
+}
+
+.clearFilterButton {
+  border-radius: 50%;
+  border-style: none;
+  background-color: transparent;
+  color: var(--primary-text-color);
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1em;
+  padding: 10px;
+  transition: background 0.2s ease-out;
+
+  &:hover {
+    background-color: var(--side-nav-hover-color);
+    color: var(--side-nav-hover-text-color);
+    transition: background 0.2s ease-in;
+  }
+
+  &:active {
+    background-color: var(--tertiary-text-color);
+    color: var(--side-nav-active-text-color);
+    transition: background 0.2s ease-in;
+  }
+}
+
+.clearFilterIcon {
+  vertical-align: -0.25em;
+}
+
 @media only screen and (width <= 680px) {
   .searchRadio {
     border-inline-end: 0;

src/renderer/components/FtSearchFilters/FtSearchFilters.vue

@@ -4,12 +4,25 @@
     @click="hideSearchFilters"
   >
     <template #label="{ labelId }">
-      <h2
-        :id="labelId"
-        class="center"
-      >
-        {{ title }}
-      </h2>
+      <div class="titleContainer">
+        <h2
+          :id="labelId"
+          class="center"
+        >
+          {{ title }}
+        </h2>
+        <button
+          class="clearFilterButton"
+          :title="$t('Search Filters.Clear Filters')"
+          :style="{visibility: (searchFilterValueChanged ? 'visible' : 'hidden')}"
+          @click="clearFilters"
+        >
+          <FontAwesomeIcon
+            class="clearFilterIcon"
+            :icon="['fas', 'filter-circle-xmark']"
+          />
+        </button>
+      </div>
     </template>
 
     <FtFlexBox class="radioFlexBox">
@@ -50,12 +63,6 @@
       />
     </FtFlexBox>
     <div class="searchFilterCloseButtonContainer">
-      <FtButton
-        :label="$t('Search Filters.Clear Filters')"
-        background-color="var(--accent-color)"
-        text-color="var(--text-with-accent-color)"
-        @click="clearFilters"
-      />
       <FtButton
         :label="$t('Close')"
         background-color="null"

src/renderer/main.js

@@ -56,6 +56,7 @@ import {
   faFileVideo,
   faFilm,
   faFilter,
+  faFilterCircleXmark,
   faFlask,
   faFire,
   faForward,
@@ -179,6 +180,7 @@ library.add(
   faFileVideo,
   faFilm,
   faFilter,
+  faFilterCircleXmark,
   faFlask,
   faFire,
   faForward,