event filter styling, add toggler button styling

web/src/components/events/EventFilter.tsx

@@ -55,11 +55,10 @@ export const EventFilter = ({
               .map((category) => (
                 <li
                   key={category.slug}
-                  className={
-                    activeCategory === category.slug ? styles.active : ""
-                  }
                 >
                   <button
+                    className="button toggler"
+                    data-active={activeCategory === category.slug}
                     onClick={() =>
                       setCategory(
                         activeCategory === category.slug ? null : category.slug

web/src/components/events/eventFilter.module.scss

@@ -32,15 +32,6 @@
 
   button {
     margin-bottom: 0;
-    background: var(--color-goldenBeige);
-    color: var(--color-deepBrick);
-  }
-
-  .active {
-    button {
-      background: var(--color-deepBrick);
-      color: var(--color-goldenBeige);
-    }
   }
 
   &[data-show=true] {
@@ -54,4 +45,8 @@
       opacity: 1;
     }
   }
+}
+
+.eventFilterExplained {
+  padding: var(--spacing-sitepadding-block) 0;
 }