From 4091402cfc3d64201ed4bdab60acacd55a76a050 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 21 Jun 2023 03:05:29 -0700
Subject: [PATCH] Add text to filters button on small screens

The FilterBar showed a left aligned filter icon on mobile for months and it was driving me insane
---
 components/FilterBar/index.scss | 17 +++++++++++++++++
 components/FilterBar/index.tsx  |  1 +
 public/locales/en/common.json   |  1 +
 public/locales/ja/common.json   |  1 +
 4 files changed, 20 insertions(+)

diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss
index 5cfb852f..3bb8821e 100644
--- a/components/FilterBar/index.scss
+++ b/components/FilterBar/index.scss
@@ -102,6 +102,23 @@
     }
   }
 
+  .Filter.Button {
+    justify-content: center;
+
+    .Text {
+      display: none;
+      width: auto;
+
+      @include breakpoint(tablet) {
+        display: block;
+      }
+
+      @include breakpoint(phone) {
+        display: block;
+      }
+    }
+  }
+
   .UserInfo {
     align-items: center;
     display: flex;
diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
index 5d94deb9..9d69cca8 100644
--- a/components/FilterBar/index.tsx
+++ b/components/FilterBar/index.tsx
@@ -181,6 +181,7 @@ const FilterBar = (props: Props) => {
             className={filterButtonClasses}
             blended={true}
             leftAccessoryIcon={<FilterIcon />}
+            text={t('filters.name')}
             onClick={() => setFilterModalOpen(true)}
           />
         </div>
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 29acc26f..2d23f711 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -93,6 +93,7 @@
     "unauthorized": "You don't have permission to perform that action"
   },
   "filters": {
+    "name": "Filter",
     "labels": {
       "element": "Element",
       "series": "Series",
diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json
index 7391a5b4..f4351ccd 100644
--- a/public/locales/ja/common.json
+++ b/public/locales/ja/common.json
@@ -93,6 +93,7 @@
     "unauthorized": "行ったアクションを実行する権限がありません"
   },
   "filters": {
+    "name": "フィルター",
     "labels": {
       "element": "属性",
       "series": "シリーズ",