feat: labels redesign (#202)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -9,8 +9,8 @@ <h2 class="border-b font-medium mb-6 -mt-2 -mx-6 pb-4 px-6 text-sm text-gray-700
         {{ children }}
 
         {% if label %}
-            <div class="absolute border font-semibold leading-none px-2 py-1 rounded shadow-sm text-xxs uppercase whitespace-nowrap bg-primary-50 border-primary-200 text-primary-500 dark:bg-primary-500/20 dark:border-primary-500/10 right-0 top-0">
-                {{ label }}
+            <div class="absolute right-0 top-0">
+                {% include "unfold/helpers/label.html" with text=label type="primary" %}
             </div>
         {% endif %}
     </div>

src/unfold/templates/unfold/components/card.html

@@ -1,37 +1,9 @@
 {% if label %}
     {% if multiple %}
         {% for item in label %}
-            <span class="border border-gray-200 font-semibold leading-none mr-2 px-2 py-1 rounded shadow-sm text-xxs uppercase whitespace-nowrap last:mr-0
-                {% if label_type == 'info' %}
-                    bg-blue-50 border-blue-200 text-blue-500 dark:bg-blue-500/20 dark:border-blue-500/10
-                {% elif label_type == 'danger' %}
-                    bg-red-50 border-red-200 text-red-500 dark:bg-red-500/20 dark:border-red-500/10
-                {% elif label_type == 'warning' %}
-                    bg-orange-50 border-orange-200 text-orange-500 dark:bg-orange-500/20 dark:border-orange-500/10
-                {% elif label_type == 'success' %}
-                    bg-green-50 border-green-200 text-green-500 dark:bg-green-500/20 dark:border-green-500/10
-                {% else %}
-                    bg-white text-gray-400 dark:bg-white/[.04] dark:border-gray-800 dark:text-gray-400
-                {% endif %}
-        ">
-                {{ item }}
-            </span>
+            {% include "unfold/helpers/label.html" with type=label_type text=item %}
         {% endfor %}
     {% else %}
-        <span class="border border-gray-200 font-semibold leading-none mr-2 px-2 py-1 rounded shadow-sm text-xxs uppercase whitespace-nowrap last:mr-0
-            {% if label_type == 'info' %}
-                bg-blue-50 border-blue-200 text-blue-500 dark:bg-blue-500/20 dark:border-blue-500/10
-            {% elif label_type == 'danger' %}
-                bg-red-50 border-red-200 text-red-500 dark:bg-red-500/20 dark:border-red-500/10
-            {% elif label_type == 'warning' %}
-                bg-orange-50 border-orange-200 text-orange-500 dark:bg-orange-500/20 dark:border-orange-500/10
-            {% elif label_type == 'success' %}
-                bg-green-50 border-green-200 text-green-500 dark:bg-green-500/20 dark:border-green-500/10
-            {% else %}
-                bg-white text-gray-400 dark:bg-white/[.04] dark:border-gray-800 dark:text-gray-400
-            {% endif %}
-    ">
-            {{ label }}
-        </span>
+        {% include "unfold/helpers/label.html" with type=label_type text=label %}
     {% endif %}
 {% endif %}

src/unfold/templates/unfold/helpers/display_label.html

@@ -1,14 +1,16 @@
-<span class="border font-semibold leading-none mr-2 px-2 py-1 rounded shadow-sm text-xxs uppercase whitespace-nowrap last:mr-0
+<span class="inline-block font-semibold leading-normal px-2 py-1 rounded text-xxs uppercase whitespace-nowrap
     {% if type == 'info' %}
-        bg-blue-50 border-blue-200 text-blue-500 dark:bg-blue-500/20 dark:border-blue-500/10
+        bg-blue-100 text-blue-500 dark:bg-blue-500/20
     {% elif type == 'danger' %}
-        bg-red-50 border-red-200 text-red-500 dark:bg-red-500/20 dark:border-red-500/10
+        bg-red-100 text-red-500 dark:bg-red-500/20
     {% elif type == 'warning' %}
-        bg-orange-50 border-orange-200 text-orange-500 dark:bg-orange-500/20 dark:border-orange-500/10
+        bg-orange-100 text-orange-500 dark:bg-orange-500/20
     {% elif type == 'success' %}
-        bg-green-50 border-green-200 text-green-500 dark:bg-green-500/20 dark:border-green-500/10
+        bg-green-100 text-green-500 dark:bg-green-500/20
+    {% elif type == 'primary' %}
+        bg-primary-100 text-primary-500 dark:bg-primary-500/20
     {% else %}
-        bg-white border-gray-200 text-gray-400 dark:bg-white/[.04] dark:border-gray-800 dark:text-gray-400
+        bg-gray-100 text-gray-500 dark:bg-gray-500/20 dark:text-gray-400
     {% endif %}
 ">
     {{ text }}