Change colour and small fixes

src/app/config.py

@@ -5,15 +5,56 @@ from app.models import MediaTypes, Sources, Status
 
 # --- Color Constants ---
 COLORS = {
-    "emerald": {"text": "text-emerald-400", "hex": "#10b981"},
-    "purple": {"text": "text-purple-400", "hex": "#a855f7"},
-    "indigo": {"text": "text-indigo-400", "hex": "#6366f1"},
-    "orange": {"text": "text-orange-400", "hex": "#f97316"},
-    "blue": {"text": "text-blue-400", "hex": "#3b82f6"},
-    "red": {"text": "text-red-400", "hex": "#ef4444"},
-    "yellow": {"text": "text-yellow-400", "hex": "#eab308"},
-    "fuchsia": {"text": "text-fuchsia-400", "hex": "#d946ef"},
-    "cyan": {"text": "text-cyan-400", "hex": "#06b6d4"},
+    "emerald": {
+        "text": "text-emerald-400",
+        "background": "bg-emerald-400",
+        "hex": "#10b981",
+    },
+    "purple": {
+        "text": "text-purple-400",
+        "background": "bg-purple-400",
+        "hex": "#a855f7",
+    },
+    "indigo": {
+        "text": "text-indigo-400",
+        "background": "bg-indigo-400",
+        "hex": "#6366f1",
+    },
+    "orange": {
+        "text": "text-orange-400",
+        "background": "bg-orange-400",
+        "hex": "#f97316",
+    },
+    "blue": {
+        "text": "text-blue-400",
+        "background": "bg-blue-400",
+        "hex": "#3b82f6",
+    },
+    "red": {
+        "text": "text-red-400",
+        "background": "bg-red-400",
+        "hex": "#ef4444",
+    },
+    "yellow": {
+        "text": "text-yellow-400",
+        "background": "bg-yellow-400",
+        "hex": "#eab308",
+    },
+    "fuchsia": {
+        "text": "text-fuchsia-400",
+        "background": "bg-fuchsia-400",
+        "hex": "#d946ef",
+    },
+    "cyan": {
+        "text": "text-cyan-400",
+        "background": "bg-cyan-400",
+        "hex": "#06b6d4",
+    },
+    "sky": {
+        "text": "text-sky-400",
+        "background": "bg-sky-400",
+        "hex": "#87ceeb",
+    },
 }
 
 # --- Central Configuration Dictionary ---
@@ -162,22 +203,27 @@ STATUS_CONFIG = {
     Status.COMPLETED.value: {
         "text_color": COLORS["emerald"]["text"],
         "stats_color": COLORS["emerald"]["hex"],
+        "background_color": COLORS["emerald"]["background"],
     },
     Status.IN_PROGRESS.value: {
         "text_color": COLORS["indigo"]["text"],
         "stats_color": COLORS["indigo"]["hex"],
+        "background_color": COLORS["indigo"]["background"],
     },
     Status.PAUSED.value: {
         "text_color": COLORS["orange"]["text"],
         "stats_color": COLORS["orange"]["hex"],
+        "background_color": COLORS["orange"]["background"],
     },
     Status.PLANNING.value: {
-        "text_color": COLORS["blue"]["text"],
-        "stats_color": COLORS["blue"]["hex"],
+        "text_color": COLORS["sky"]["text"],
+        "stats_color": COLORS["sky"]["hex"],
+        "background_color": COLORS["sky"]["background"],
     },
     Status.DROPPED.value: {
         "text_color": COLORS["red"]["text"],
         "stats_color": COLORS["red"]["hex"],
+        "background_color": COLORS["red"]["background"],
     },
 }
 
@@ -287,3 +333,7 @@ def get_status_text_color(status):
 def get_status_stats_color(status):
     """Get the stats color for a status."""
     return get_status_property(status, "stats_color")
+
+def get_status_background_color(status):
+    """Get the background color for a status."""
+    return get_status_property(status, "background_color")

src/app/templatetags/app_tags.py

@@ -227,6 +227,11 @@ def status_color(status):
     """Return the color associated with the status."""
     return config.get_status_text_color(status)
 
+@register.filter
+def status_background_color(status):
+    """Return the background color associated with the status."""
+    return config.get_status_background_color(status)
+
 
 @register.filter
 def natural_day(datetime, user):

src/static/css/main.css

@@ -43,6 +43,7 @@
     --color-fuchsia-400: oklch(74% 0.238 322.16);
     --color-fuchsia-600: oklch(59.1% 0.293 322.896);
     --color-fuchsia-700: oklch(51.8% 0.253 323.949);
+    --color-sky-400: oklch(0.746 0.16 232.661);
     --color-slate-200: oklch(92.9% 0.013 255.508);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -1237,6 +1238,8 @@
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
+  }.bg-blue-400 {
+    background-color: var(--color-blue-400);
   }
   .bg-blue-400\/10 {
     background-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 10%, transparent);
@@ -1244,6 +1247,12 @@
       background-color: color-mix(in oklab, var(--color-blue-400) 10%, transparent);
     }
   }
+  .bg-cyan-400 {
+    background-color: var(--color-cyan-400);
+  }
+  .bg-emerald-400 {
+    background-color: var(--color-emerald-400);
+  }
   .bg-emerald-400\/10 {
     background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1259,6 +1268,9 @@
       background-color: color-mix(in oklab, var(--color-emerald-600) 20%, transparent);
     }
   }
+  .bg-fuchsia-400 {
+    background-color: var(--color-fuchsia-400);
+  }
   .bg-fuchsia-600 {
     background-color: var(--color-fuchsia-600);
   }
@@ -1313,6 +1325,15 @@
   .bg-indigo-700 {
     background-color: var(--color-indigo-700);
   }
+  .bg-orange-400 {
+    background-color: var(--color-orange-400);
+  }
+  .bg-purple-400 {
+    background-color: var(--color-purple-400);
+  }
+  .bg-red-400 {
+    background-color: var(--color-red-400);
+  }
   .bg-red-400\/10 {
     background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1349,12 +1370,18 @@
       background-color: color-mix(in oklab, var(--color-red-900) 60%, transparent);
     }
   }
+  .bg-sky-400 {
+    background-color: var(--color-sky-400);
+  }
   .bg-violet-600 {
     background-color: var(--color-violet-600);
   }
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-400 {
+    background-color: var(--color-yellow-400);
+  }
   .bg-yellow-400\/10 {
     background-color: color-mix(in srgb, oklch(85.2% 0.199 91.936) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1656,6 +1683,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-sky-400 {
+    color: var(--color-sky-400);
+  }
   .text-slate-200 {
     color: var(--color-slate-200);
   }

src/templates/app/components/progress_bar.html

@@ -1,21 +1,17 @@
-{% if user.progress_bar %}
+{% load app_tags %}
+
+{% if media.status and user.progress_bar %}
    <div>
    {% if media.status == 'In progress' %}
       {% if media.max_progress and media.max_progress > 0%}
          {% widthratio media.progress media.max_progress 100 as progress_width %}
-         <div style="background-color: {% if progress_width == '100' %} purple {% else %} blue {% endif %}; height: 5px; width: {{ progress_width }}%;"></div>
+         <div class="{{ media.status|status_background_color }}" style="height: 5px; width: {{ progress_width }}%;"></div>
       {% else %}
-         <div style="border: none; border-top: 5px dotted blue; height: 5px; width: 100%;"></div>
+         <div class="{{ media.status|status_background_color }}" style="height: 5px; width: 100%;"></div>
       {% endif %}
-   {% elif media.status == 'Completed' %}
-      <div style="background-color: green; height: 5px; width: 100%;"></div>
-   {% elif media.status == 'Paused' %}
-      <div style="background-color: yellow; height: 5px; width: 100%;"></div>
-   {% elif media.status == 'Dropped' %}
-      <div style="background-color: red; height: 5px; width: 100%;"></div>
-   {% elif media.status == 'Planning' %}
-      <div style="background-color: white; height: 5px; width: 100%;"></div>
+   {% else %}
+      <div class="{{ media.status|status_background_color }}" style="height: 5px; width: 100%;"></div>
    {% endif %}
    
    </div>
-{% endif %}
+{% endif %}