From 22535c66b7be179d1eeae539712f63f588ad5a7a Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 26 Dec 2024 21:39:36 +1100
Subject: [PATCH] Fix for graph view not highlighted when selected and change
 list card item icon arrow to 3 dots

---
 app/static/css/tailwind.css  | 12 ++++++++++++
 app/templates/dashboard.html | 10 +++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/static/css/tailwind.css b/app/static/css/tailwind.css
index 95b5194..3bc80b1 100644
--- a/app/static/css/tailwind.css
+++ b/app/static/css/tailwind.css
@@ -648,6 +648,18 @@ video {
   top: 1.25rem;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
+.left-0 {
+  left: 0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
 .z-10 {
   z-index: 10;
 }
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 9e30ffb..de28e81 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -82,7 +82,7 @@
         </form>
     </div>
 
-    <div class="max-w-5xl mx-auto" x-data="{ activeView: 'weekly' }">
+    <div class="max-w-5xl mx-auto" x-data="{ activeView: 'list' }">
         <!-- Tabs -->
         <div class="flex border-b mb-4">
             <button @click="activeView = 'list'" :class="{'border-blue-600 text-blue-600': activeView === 'list'}"
@@ -91,7 +91,7 @@
                 class="px-4 py-2 text-sm font-medium border-b-2">Weekly View</button>
             <button @click="activeView = 'monthly'" :class="{'border-blue-600 text-blue-600': activeView === 'monthly'}"
                 class="px-4 py-2 text-sm font-medium border-b-2">Monthly View</button>
-            <button @click="activeView = 'graph'" :class="{'border-blue-600 text-blue-600': activeView === 'monthly'}"
+            <button @click="activeView = 'graph'" :class="{'border-blue-600 text-blue-600': activeView === 'graph'}"
                 class="px-4 py-2 text-sm font-medium border-b-2">Graph View</button>
         </div>
 
@@ -122,14 +122,14 @@
                 </div>
 
                 <!-- Heart Rate and Arrow -->
-                <div class="flex justify-between items-center mt-4">
+                <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="text-gray-400 hover:text-gray-600">
+                    <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"
@@ -235,7 +235,7 @@
         </div>
 
         <!-- Graph Section -->
-        <div x-show="activeView === 'graph'" x-transition.duration.50ms class="space-y-6">
+        <div x-show="activeView === 'graph'" class="space-y-6">
             <!-- Blood Pressure Graph -->
             <div>
                 <h3 class="text-sm font-semibold text-gray-600 mb-2">Blood Pressure (mmHg)</h3>