From 6d2b1f3632d7d6e5368b7edcca2282ef1c39f273 Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Tue, 15 Jun 2021 22:53:06 +0800
Subject: [PATCH] Top-Nav: Improve search filter's appearance (#1360)

* Update search filter style to have little transparency & smaller size
---
 .../ft-search-filters/ft-search-filters.css   | 16 ++--
 .../ft-search-filters/ft-search-filters.vue   | 78 ++++++++++---------
 2 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 4867bf25..b9052b30 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -1,10 +1,16 @@
-.searchFilter {
-  background-color: var(--card-bg-color);
-  padding: 20px;
-  padding-bottom: 70px;
+.searchFilterInner {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+
+  padding: 20px 20px 70px 20px;
   max-height: 410px;
   overflow-y: auto;
+
+  background-color: var(--card-bg-color);
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
+
+  opacity: 0.9;
 }
 
 .center {
@@ -22,6 +28,6 @@
 
 @media only screen and (max-width: 600px) {
   .searchRadio {
-    border-right: 0px;
+    border-right: 0;
   }
 }
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.vue b/src/renderer/components/ft-search-filters/ft-search-filters.vue
index 6d6638e2..47ebe622 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.vue
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.vue
@@ -1,42 +1,44 @@
 <template>
-  <div class="searchFilter">
-    <h2 class="center">
-      {{ $t("Search Filters.Search Filters") }}
-    </h2>
-    <ft-flex-box class="radioFlexBox">
-      <ft-radio-button
-        ref="sortByRadio"
-        :title="$t('Search Filters.Sort By.Sort By')"
-        :labels="sortByLabels"
-        :values="sortByValues"
-        class="searchRadio"
-        @change="updateSortBy"
-      />
-      <ft-radio-button
-        ref="timeRadio"
-        :title="$t('Search Filters.Time.Time')"
-        :labels="timeLabels"
-        :values="timeValues"
-        class="searchRadio"
-        @change="updateTime"
-      />
-      <ft-radio-button
-        ref="typeRadio"
-        :title="$t('Search Filters.Type.Type')"
-        :labels="typeLabels"
-        :values="typeValues"
-        class="searchRadio"
-        @change="updateType"
-      />
-      <ft-radio-button
-        ref="durationRadio"
-        :title="$t('Search Filters.Duration.Duration')"
-        :labels="durationLabels"
-        :values="durationValues"
-        class="searchRadio"
-        @change="updateDuration"
-      />
-    </ft-flex-box>
+  <div>
+    <div class="searchFilterInner">
+      <h2 class="center">
+        {{ $t("Search Filters.Search Filters") }}
+      </h2>
+      <ft-flex-box class="radioFlexBox">
+        <ft-radio-button
+          ref="sortByRadio"
+          :title="$t('Search Filters.Sort By.Sort By')"
+          :labels="sortByLabels"
+          :values="sortByValues"
+          class="searchRadio"
+          @change="updateSortBy"
+        />
+        <ft-radio-button
+          ref="timeRadio"
+          :title="$t('Search Filters.Time.Time')"
+          :labels="timeLabels"
+          :values="timeValues"
+          class="searchRadio"
+          @change="updateTime"
+        />
+        <ft-radio-button
+          ref="typeRadio"
+          :title="$t('Search Filters.Type.Type')"
+          :labels="typeLabels"
+          :values="typeValues"
+          class="searchRadio"
+          @change="updateType"
+        />
+        <ft-radio-button
+          ref="durationRadio"
+          :title="$t('Search Filters.Duration.Duration')"
+          :labels="durationLabels"
+          :values="durationValues"
+          class="searchRadio"
+          @change="updateDuration"
+        />
+      </ft-flex-box>
+    </div>
   </div>
 </template>