Improved design

app/templates/index.html

@@ -24,7 +24,7 @@
         <div class="px-3 py-3 lg:px-5 lg:pl-3">
             <div class="flex items-center justify-between">
                 <div class="flex items-center justify-start rtl:justify-end">
-                    <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar"
+                    <!-- <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar"
                         aria-controls="logo-sidebar" type="button"
                         class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
                         <span class="sr-only">Open sidebar</span>
@@ -34,7 +34,7 @@
                                 d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z">
                             </path>
                         </svg>
-                    </button>
+                    </button> -->
                     <a href="#" class="flex ms-2 md:me-24">
                         <span
                             class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">Focal</span>
@@ -58,9 +58,9 @@
     </nav>
 
     <aside id="logo-sidebar"
-        class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-300 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+        class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-gray-50 border-r border-gray-300 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
         aria-label="Sidebar">
-        <div class="flex flex-col justify-between h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+        <div class="flex flex-col justify-between h-full px-3 pb-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
             <ul class="space-y-2 font-medium">
                 {% for category in categorized_articles.keys() %}
                 <li>
@@ -74,9 +74,9 @@
 
             <div class="flex justify-center">
                 <div
-                    class="inline-flex items-center space-x-3 py-2 px-5 bg-white border border-gray-300 rounded-full shadow-sm">
+                    class="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                     {% if update_time == -1 %}
-                    <svg class="animate-spin h-4 w-4 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none"
+                    <svg class="text-blue-600 h-3 w-3 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
                         </circle>
@@ -84,24 +84,28 @@
                             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                         </path>
                     </svg>
-                    <span class="font-medium text-sm text-gray-700">Updating articles...</span>
-                    {% elif update_time < 1 %} <span class="relative flex h-2.5 w-2.5">
+                    <span class="text-xs font-semibold whitespace-nowrap text-gray-700 dark:text-gray-300">Updating
+                        articles...</span>
+                    {% elif update_time < 1 %} <span class="relative flex h-2 w-2">
                         <span
                             class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+                        <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                         </span>
-                        <span class="font-medium text-sm text-gray-700">Updated less than an hour ago</span>
-                        {% elif update_time >= 1 and update_time <= 4 %} <span class="relative flex h-2.5 w-2.5">
-                            <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
+                        <span class="font-semibold text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">Updated
+                            now</span>
+                        {% elif update_time >= 1 and update_time <= 4 %} <span class="relative flex h-2 w-2">
+                            <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
                             </span>
-                            <span class="font-medium text-sm text-gray-700">Updated {{ update_time }} hours
-                                ago</span>
+                            <span
+                                class="font-semibold text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">Updated
+                                {{ update_time }} hour{{ 's' if update_time > 1 else '' }} ago</span>
                             {% else %}
-                            <span class="relative flex h-2.5 w-2.5">
-                                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-gray-400"></span>
+                            <span class="relative flex h-2 w-2">
+                                <span class="relative inline-flex rounded-full h-2 w-2 bg-gray-400"></span>
                             </span>
-                            <span class="font-medium text-sm text-gray-700">Updated {{ update_time }} hours
-                                ago</span>
+                            <span
+                                class="font-semibold text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">Updated
+                                {{ update_time }} hours ago</span>
                             {% endif %}
                 </div>
             </div>
@@ -110,7 +114,8 @@
 
     <div class="p-8 sm:ml-64 mt-14">
         {% for category, articles in categorized_articles.items() %}
-        <div id="{{ category }}" class="block w-full mb-8 rounded-lg border border-gray-300 border-l-4 border-l-blue-500 bg-white p-6">
+        <div id="{{ category }}"
+            class="block w-full mb-8 rounded-lg border border-gray-300 border-l-4 border-l-blue-500 bg-white p-6">
             <h1 class="text-2xl font-semibold tracking-tight text-gray-900">{{ category | capitalize }}</h1>
 
             {% for article in articles %}