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] {
@@ -55,3 +46,7 @@
     }
   }
 }
+
+.eventFilterExplained {
+  padding: var(--spacing-sitepadding-block) 0;
+}

web/src/css/button.scss

@@ -4,8 +4,8 @@ button,
   align-items: center;
   gap: var(--spacing-s);
   border-radius: 10rem;
-  background: var(--color-cta-background);
+  background: var(--color-button-bg);
-  color: var(--color-cta-text);
+  color: var(--color-button-fg);
   border: none;
   padding: var(--spacing-xs) var(--spacing-s);
   margin: 0 0 var(--spacing-xs);
@@ -31,8 +31,8 @@ button,
   }
 
   &.secondary {
-    color: var(--color-deepBrick);
+    --color-button-bg: var(--color-goldenBeige);
-    background: var(--color-goldenBeige);
+    --color-button-fg: var(--color-deepBrick);
   }
 
   &.tertiary {
@@ -41,4 +41,48 @@ button,
     border: 2px solid currentColor;
     padding: .25rem .75rem;
   }
+
+  &.toggler {
+    --color-button-bg: var(--color-chateauBlue);
+    --color-button-fg: var(--color-chateauBlue);
+    background: transparent;
+    border: 2px solid var(--color-button-bg);
+    padding: .25rem .5rem .25rem .75rem;
+    position: relative;
+
+    &:after {
+      content: "";
+      width: 1rem;
+      height: 1rem;
+      border-radius: 1rem;
+      background: var(--color-white);
+      border: 2px solid var(--color-button-bg);
+    }
+
+    &[data-active=true] {
+      --color-button-bg: var(--color-chateauBlue);
+      --color-button-fg: var(--color-white);
+      background: var(--color-button-bg);
+
+      &:after {
+        content: "";
+        width: 1rem;
+        height: 1rem;
+        border-radius: 1rem;
+        background: var(--color-white);
+        border: 2px solid var(--color-button-bg);
+      }
+
+      &:before {
+        content: "";
+        width: .4rem;
+        height: .2rem;
+        border-bottom: 3px solid var(--color-button-bg);
+        border-left: 3px solid var(--color-button-bg);
+        position: absolute;
+        right: .8rem;
+        transform: rotate(-45deg);
+      }
+    }
+  }
 }

web/src/css/variables.scss

@@ -39,8 +39,8 @@
   --color-text: var(--color-chateauBlue);
   --color-background: var(--color-betongGray);
   --color-background-secondary: var(--color-betongGray-darkened);
-  --color-cta-background: var(--color-goldenOrange);
+  --color-button-bg: var(--color-goldenOrange);
-  --color-cta-text: var(--color-black);
+  --color-button-fg: var(--color-black);
   --color-placeholder: var(--color-neufPink);
   --color-menu-text: var(--color-deepBrick);
   --color-menu-background: var(--color-goldenBeige);