From 783aebcf7eb071aae0a720c70142922145398da6 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Wed, 26 Feb 2025 13:54:34 +0100
Subject: [PATCH] Add new task tags design [SCI-11566]

---
 app/assets/javascripts/experiments/show.js           |  2 +-
 app/assets/javascripts/my_modules.js                 |  2 +-
 app/assets/stylesheets/application.tailwind.css      |  1 +
 app/assets/stylesheets/reports.scss                  | 10 +++++++---
 app/assets/stylesheets/shared/dropdown_selector.scss |  1 -
 app/assets/stylesheets/tailwind/tags.css             |  5 +++++
 6 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/stylesheets/tailwind/tags.css

diff --git a/app/assets/javascripts/experiments/show.js b/app/assets/javascripts/experiments/show.js
index 26e18c699..5c27ba08f 100644
--- a/app/assets/javascripts/experiments/show.js
+++ b/app/assets/javascripts/experiments/show.js
@@ -104,7 +104,7 @@
 
         dropdownSelector.init($(myModuleTagsSelector), {
           closeOnSelect: true,
-          tagClass: 'my-module-white-tags',
+          tagClass: 'my-module-white-tags sci-tag',
           tagStyle: (data) => {
             return `background: ${data.params.color}`;
           },
diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js
index 36acbb10f..8c661fee9 100644
--- a/app/assets/javascripts/my_modules.js
+++ b/app/assets/javascripts/my_modules.js
@@ -103,7 +103,7 @@
 
     dropdownSelector.init($(myModuleTagsSelector), {
       closeOnSelect: true,
-      tagClass: 'my-module-white-tags',
+      tagClass: 'my-module-white-tags sci-tag',
       labelHTML: true,
       tagStyle: (data) => {
         return `background: ${data.params.color}`;
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 9e83df130..babe0439f 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -4,6 +4,7 @@
 @import "tailwind/flyouts";
 @import "tailwind/radio";
 @import "tailwind/loader.css";
+@import "tailwind/tags.css";
 
 @tailwind base;
 @tailwind components;
diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss
index e4652bfe6..f4b730cee 100644
--- a/app/assets/stylesheets/reports.scss
+++ b/app/assets/stylesheets/reports.scss
@@ -358,10 +358,14 @@ label {
       }
 
       .module-tag {
-        margin-left: 5px;
-        border-radius: 4px;
-        padding: 2px 4px;
+        align-items: center;
+        border-radius: 10px;
         color: $color-white;
+        display: flex;
+        height: 20px;
+        margin-left: 5px;
+        padding: 2px 8px;
+
         white-space: nowrap;
       }
     }
diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss
index 21c9ff9e8..a272ab601 100644
--- a/app/assets/stylesheets/shared/dropdown_selector.scss
+++ b/app/assets/stylesheets/shared/dropdown_selector.scss
@@ -81,7 +81,6 @@
       border-radius: $border-radius-tag;
       display: flex;
       flex-shrink: 0;
-      line-height: 13px;
       margin: 2px 3px;
       max-height: 24px;
       max-width: calc(100% - 11px);
diff --git a/app/assets/stylesheets/tailwind/tags.css b/app/assets/stylesheets/tailwind/tags.css
new file mode 100644
index 000000000..516f1b323
--- /dev/null
+++ b/app/assets/stylesheets/tailwind/tags.css
@@ -0,0 +1,5 @@
+@layer components {
+  .sci-tag {
+    @apply text-xs !rounded-full !pl-3 !pr-1 !py-0.5 flex items-center gap-1;
+  }
+}