feat: boolean flag redesign (#1488)

Author: lukasvinclav

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

@@ -1,15 +1,15 @@
 {% load i18n %}
 
-<div class="flex items-center ">
-    <div class="block mr-3 outline rounded-full ml-1 h-1 w-1 {% if value == '' or value == None %}bg-base-500 outline-gray-500/20{% elif value %}bg-green-500 outline-green-200 dark:outline-green-500/20{% else %}bg-red-500 outline-red-200 dark:outline-red-500/20{% endif %}"></div>
+<div class="inline-flex font-semibold items-center justify-center leading-normal h-6 w-6 rounded-full uppercase whitespace-nowrap {% if value == '' or value == None %}bg-base-100 text-base-700 dark:bg-base-500/20 dark:text-base-200{% elif value %}bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400{% else %}bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400{% endif %}"
+     title="{% if value == '' or value == None %}{% trans "Unknown" %}{% elif value %}{% trans "True" %}{% else %}{% trans "False" %}{% endif %}">
 
-    <span>
+    <span class="material-symbols-outlined">
         {% if value == '' or value == None %}
-            {% trans 'Unknown' %}
+            question_mark
         {% elif value %}
-            {% trans 'True' %}
+            check_small
         {% else %}
-            {% trans 'False' %}
+            close_small
         {% endif %}
     </span>
 </div>

src/unfold/templates/unfold/helpers/boolean.html

@@ -1,4 +1,4 @@
-<span class="inline-block font-semibold leading-normal px-2 py-1 rounded-default text-[11px] uppercase whitespace-nowrap
+<span class="inline-block font-semibold h-6 leading-6 px-2 rounded-default text-[11px] uppercase whitespace-nowrap
              {% if type == 'info' %}
                  bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400
              {% elif type == 'danger' %}