From 7025e19a4ebbb3a594b49a9c0dcd99df19e9538f Mon Sep 17 00:00:00 2001
From: Petter Hohle <petter.hohle@gmail.com>
Date: Mon, 2 Dec 2024 15:09:15 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20violet=20background=20to?=
 =?UTF-8?q?=20Tag=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sections/jobs/JobPostingList.tsx          |  4 +++-
 src/components/tag/index.tsx                  | 19 ++++++++++++++++---
 src/components/tag/tag.module.css             | 17 +++++++++++++++++
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/jobs/JobPostingList.tsx b/src/components/sections/jobs/JobPostingList.tsx
index 810afed34..addaa8e6f 100644
--- a/src/components/sections/jobs/JobPostingList.tsx
+++ b/src/components/sections/jobs/JobPostingList.tsx
@@ -57,7 +57,8 @@ export default function JobPostingList({
           active={!locationFilter}
           type="button"
           onClick={() => setLocationFilter(null)}
-          text={"Alle"}
+          text="Alle"
+          background="violet"
         />
         {companyLocations.map((location: CompanyLocation) => (
           <Tag
@@ -66,6 +67,7 @@ export default function JobPostingList({
             onClick={() => setLocationFilter(location)}
             text={location.companyLocationName}
             key={location._id}
+            background="violet"
           />
         ))}
       </div>
diff --git a/src/components/tag/index.tsx b/src/components/tag/index.tsx
index 468d3ae93..f17917ff7 100644
--- a/src/components/tag/index.tsx
+++ b/src/components/tag/index.tsx
@@ -14,9 +14,22 @@ type TagInner =
       href: string;
     } & JSX.IntrinsicElements["link"]);
 
+function getBackgroundClass(backgroundColor: string) {
+  switch (backgroundColor) {
+    case "light":
+      return "";
+    case "dark":
+      return styles["tag--bgDark"];
+    case "violet":
+      return styles["tag--bgViolet"];
+    default:
+      return "";
+  }
+}
+
 type TagProps = {
   active?: boolean;
-  background?: "light" | "dark";
+  background?: "light" | "dark" | "violet";
   text: string;
 } & TagInner;
 
@@ -27,8 +40,8 @@ export const Tag = ({
   ...props
 }: TagProps) => {
   const activeClass = active ? styles["tag--active"] : "";
-  const bgDarkClass = background === "dark" ? styles["tag--bgDark"] : "";
-  const className = `${styles.tag} ${activeClass} ${bgDarkClass}`;
+  const bgClass = getBackgroundClass(background);
+  const className = `${styles.tag} ${activeClass} ${bgClass}`;
   if (props.type === "button") {
     return (
       <button className={className} onClick={props.onClick}>
diff --git a/src/components/tag/tag.module.css b/src/components/tag/tag.module.css
index 31ab01967..e0e4f0f3a 100644
--- a/src/components/tag/tag.module.css
+++ b/src/components/tag/tag.module.css
@@ -38,6 +38,19 @@
   --_tag-background: transparent;
 }
 
+.tag--bgViolet {
+  --_tag-borderColor: var(--text-primary-light);
+  --_tag-color: var(--text-primary-light);
+}
+.tag--bgViolet:active {
+  --_tag-background: var(--text-primary-light);
+  --_tag-color: var(--text-primary);
+}
+.tag--bgViolet:hover {
+  --_tag-color: var(--text-primary-light);
+  --_tag-background: transparent;
+}
+
 .tag--active {
   --_tag-background: var(--background-bg-dark);
   --_tag-color: var(--text-primary-light);
@@ -49,3 +62,7 @@
   --_tag-background: var(--background-bg-light-primary);
   --_tag-color: var(--text-primary);
 }
+.tag--active.tag--bgViolet {
+  --_tag-background: var(--text-primary-light);
+  --_tag-color: var(--text-primary);
+}