Improve the look of cards in list view

app/static/css/tailwind.css

@@ -682,6 +682,11 @@ video {
   margin-right: auto;
 }
 
+.mx-0\.5 {
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+}
+
 .-mb-px {
   margin-bottom: -1px;
 }
@@ -774,6 +779,18 @@ video {
   margin-top: 2rem;
 }
 
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -839,6 +856,10 @@ video {
   height: 0.5rem;
 }
 
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -875,6 +896,10 @@ video {
   width: 5rem;
 }
 
+.w-3\.5 {
+  width: 0.875rem;
+}
+
 .min-w-\[300px\] {
   min-width: 300px;
 }
@@ -939,6 +964,10 @@ video {
   align-items: center;
 }
 
+.items-baseline {
+  align-items: baseline;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -971,6 +1000,10 @@ video {
   gap: 2.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1381,6 +1414,10 @@ video {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .font-sans {
   font-family: Inter, sans-serif;
 }
@@ -1446,6 +1483,10 @@ video {
   font-weight: 800;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -1542,6 +1583,11 @@ video {
   color: rgb(153 246 228 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+}
+
 .no-underline {
   text-decoration-line: none;
 }
@@ -1754,6 +1800,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));

app/templates/dashboard.html

@@ -101,46 +101,44 @@
         </div>
 
         <!-- List -->
-        <div x-show="activeView === 'list'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div x-show="activeView === 'list'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
             {% for reading in readings %}
             <a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
-                class="bg-white shadow-md rounded-xl p-4 flex flex-col justify-between relative hover:shadow-lg transition-shadow">
+                class="bg-white shadow-sm hover:shadow-md rounded-xl p-3 flex justify-between items-center border border-gray-100 transition-all">
-                <!-- Timestamp -->
-                <div class="absolute top-2 right-2 flex items-center text-gray-400 text-xs">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
-                        stroke="currentColor" stroke-width="1.5">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M12 8v4l3 3m9-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
-                    </svg>
-                    <span title="{{ reading.local_timestamp.strftime('%d %b %Y, %I:%M %p') }}">
-                        {{ reading.relative_timestamp }}
-                    </span>
-                </div>
 
-                <!-- Blood Pressure -->
+                <!-- Left side: Timestamp & BP -->
-                <div class="text-sm text-gray-600 mb-2">
+                <div>
-                    <span class="block text-lg font-semibold text-gray-800">Blood Pressure</span>
+                    <div class="flex items-center text-gray-400 text-xs mb-1">
-                    <span class="text-2xl font-bold text-primary-600">{{ reading.systolic }}</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 mr-1" fill="none" viewBox="0 0 24 24"
-                    <span class="text-lg text-gray-500">/</span>
+                            stroke="currentColor" stroke-width="2">
-                    <span class="text-xl font-bold text-red-600">{{ reading.diastolic }}</span>
-                    <span class="text-sm text-gray-500">mmHg</span>
-                </div>
-
-                <!-- Heart Rate and Arrow -->
-                <div class="flex justify-between items-center mt-4 relative">
-                    <div class="text-sm text-gray-600">
-                        <span class="block text-lg font-semibold text-gray-800">Heart Rate</span>
-                        <span class="text-2xl font-bold text-green-600">{{ reading.heart_rate }}</span>
-                        <span class="text-sm text-gray-500">bpm</span>
-                    </div>
-                    <!-- Arrow Icon -->
-                    <div class="absolute bottom-0 right-0 text-gray-400 hover:text-gray-600">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" class="h-5 w-5">
                             <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+                                d="M12 8v4l3 3m9-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
                         </svg>
+                        <span title="{{ reading.local_timestamp.strftime('%d %b %Y, %I:%M %p') }}">
+                            {{ reading.relative_timestamp }}
+                        </span>
+                    </div>
+                    <div class="flex items-baseline">
+                        <span class="text-xl font-bold text-gray-800">{{ reading.systolic }}<span
+                                class="text-gray-400 font-normal mx-0.5">/</span>{{ reading.diastolic }}</span>
+                        <span class="text-xs text-gray-500 ml-1">mmHg</span>
+                    </div>
+                </div>
 
+                <!-- Right side: Heart Rate & Icon -->
+                <div class="flex items-center space-x-4">
+                    <div class="text-right">
+                        <span class="text-xs text-gray-500 block mb-0.5">HR</span>
+                        <div class="flex items-baseline justify-end">
+                            <span class="text-lg font-bold text-gray-700">{{ reading.heart_rate }}</span>
+                            <span class="text-xs text-gray-400 ml-1">bpm</span>
+                        </div>
+                    </div>
+                    <div class="text-gray-300">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                            stroke="currentColor" class="h-4 w-4">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                        </svg>
                     </div>
                 </div>
             </a>