From 46ee6f9edd80a382e2b62f73ced2fe5bdbd7d962 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 8 Jul 2024 14:27:15 +0200
Subject: [PATCH] Add style for tags

---
 client/src/pages/StyleGuidePage.vue |  7 +++++++
 client/tailwind.css                 | 17 +++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index 25ff5db5..24f03a87 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -403,6 +403,13 @@ function log(data: any) {
       </button>
     </div>
 
+    <h2 class="mb-8 mt-8">Tags</h2>
+
+    <div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
+      <button class="tag-active">Active</button>
+      <button class="tag-inactive">Inactive</button>
+    </div>
+
     <h2 class="mb-8 mt-8">Dropdown (Work-in-progress)</h2>
 
     <ItDropdownSelect
diff --git a/client/tailwind.css b/client/tailwind.css
index 2417d110..89d3646f 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -117,8 +117,7 @@ textarea {
   }
 
   .filter-blue-900 {
-    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%)
-      contrast(105%);
+    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%) contrast(105%);
   }
 }
 
@@ -167,6 +166,14 @@ textarea {
     top: 1rem;
     transform: translateY(-50%);
   }
+
+  .tag-inactive {
+    @apply rounded-full border-2 border-blue-900 px-4 py-2 text-blue-900 font-semibold;
+  }
+
+  .tag-active {
+    @apply rounded-full bg-blue-900 px-4 py-2 font-semibold text-white;
+  }
 }
 
 @layer utilities {
@@ -181,7 +188,9 @@ textarea {
   }
 
   .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
   }
 }