From d786b19dc0674e8ac353a697d2a1331954c9e3b3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 23 Jun 2023 19:15:23 -0700
Subject: [PATCH] Fix filter bar styles

---
 components/FilterBar/index.module.scss | 4 ++--
 components/FilterBar/index.tsx         | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/FilterBar/index.module.scss b/components/FilterBar/index.module.scss
index 148094e9..7bdfce2e 100644
--- a/components/FilterBar/index.module.scss
+++ b/components/FilterBar/index.module.scss
@@ -1,4 +1,4 @@
-.FilterBar {
+.filterBar {
   align-items: center;
   background: var(--bar-bg);
   border-radius: $card-corner;
@@ -26,7 +26,7 @@
     min-height: auto;
   }
 
-  .Filters {
+  .filters {
     display: flex;
     box-sizing: border-box;
     flex-direction: row;
diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
index ccd444f7..a11af40c 100644
--- a/components/FilterBar/index.tsx
+++ b/components/FilterBar/index.tsx
@@ -41,8 +41,8 @@ const FilterBar = (props: Props) => {
   const [matchesDefaultFilters, setMatchesDefaultFilters] = useState(false)
   // Set up classes object for showing shadow on scroll
   const classes = classNames({
-    FilterBar: true,
-    shadow: props.scrolled,
+    [styles.filterBar]: true,
+    [styles.shadow]: props.scrolled,
   })
 
   const filterButtonClasses = classNames({
@@ -126,7 +126,7 @@ const FilterBar = (props: Props) => {
     <>
       <div className={classes}>
         {props.children}
-        <div className="Filters">
+        <div className={styles.filters}>
           <Select
             value={`${props.element}`}
             overlayVisible={false}