feat: components redesign (#780)

Author: lukasvinclav

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

@@ -1,3 +1,4 @@
-<button {% if submit %}type="submit"{% endif%} {% if name %}name="{{ name }}"{% endif %} class="bg-primary-600 border border-transparent font-medium px-3 py-2 rounded-md text-sm text-white">
-    {{ children }}
-</button>
+<{% if href %}a href="{{ href }}"{% else %}button{% endif%} {% if submit %}type="submit"{% endif%} {% if name %}name="{{ name }}"{% endif %}
+class="border font-medium px-3 py-2 rounded-md text-center whitespace-nowrap {% if variant == "default" %}bg-white dark:border-gray-700 dark:bg-transparent dark:text-white{% else %}bg-primary-600 border-transparent text-white{% endif %}{% if class %} {{ class }}{% endif %}">
+{{ children }}
+</{% if href %}a{% else %}button{% endif%}>

src/unfold/templates/unfold/components/button.html

@@ -1,4 +1,4 @@
-<div class="border flex flex-col flex-grow overflow-hidden p-6 relative rounded-md shadow-sm dark:border-gray-800{% if class %} {{ class }}{% endif %}">
+<div class="border flex flex-col flex-grow overflow-hidden p-6 relative rounded-md shadow-sm dark:border-gray-800 {% if class %} {{ class }}{% endif %}">
     {% if title %}
         <h2 class="border-b font-semibold mb-6 -mt-2 -mx-6 pb-4 px-6 text-font-important-light dark:text-font-important-dark dark:border-gray-800">
             {{ title }}

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

@@ -1,21 +1,21 @@
 <div class="{% if class %}{{ class }}{% endif %}">
-    <div class="flex flex-row mb-2.5 text-sm">
-        {% if title %}
-            <h3 class="text-sm">
-                {{ title }}
-            </h3>
+    <div class="overflow-hidden relative px-2 py-1 text-sm">
+        {% if value %}
+            <div class="absolute bottom-0 left-0 rounded top-0 bg-primary-100 z-10 dark:bg-primary-500/20" style="width: {{ value }}%"></div>
         {% endif %}
 
-        {% if description %}
-            <strong class="font-semibold ml-auto">
-                {{ description }}
-            </strong>
-        {% endif %}
-    </div>
+        <div class="flex flex-row relative z-20">
+            {% if title %}
+                <h3 class="text-font-default-light dark:text-font-default-dark text-sm">
+                    {{ title }}
+                </h3>
+            {% endif %}
 
-    <div class="bg-gray-200 flex flex-row h-1 rounded overflow-hidden dark:bg-white/10">
-        {% if value %}
-            <div class="bg-primary-500 h-1 rounded-full" style="width: {{ value }}%"></div>
-        {% endif %}
+            {% if description %}
+                <strong class="font-semibold text-font-important-light ml-auto dark:text-font-important-dark">
+                    {{ description }}
+                </strong>
+            {% endif %}
+        </div>
     </div>
 </div>

src/unfold/templates/unfold/components/progress.html

@@ -1 +1 @@
-<div class="bg-gray-200 dark:bg-gray-800 dark:border-gray-800 {% if vertical == 1 %}mx-8 w-px{% else%}h-px my-8{% endif %}{% if class %} {{ class }}{% endif %}"></div>
+<div class="bg-gray-200 dark:bg-gray-800 dark:border-gray-800 {% if vertical == 1 %}mx-6 w-px{% else%}h-px my-6{% endif %}{% if class %} {{ class }}{% endif %}"></div>