Add back button to each page

app/static/css/tailwind.css

@@ -640,6 +640,14 @@ video {
   top: 1rem;
 }
 
+.top-6 {
+  top: 1.5rem;
+}
+
+.top-5 {
+  top: 1.25rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -653,6 +661,16 @@ video {
   margin-right: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -774,6 +792,18 @@ video {
   height: 0.75rem;
 }
 
+.h-28 {
+  height: 7rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.h-44 {
+  height: 11rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -806,6 +836,18 @@ video {
   width: 0.75rem;
 }
 
+.w-28 {
+  width: 7rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1178,6 +1220,10 @@ video {
   padding-top: 1.5rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }

app/templates/add_reading.html

@@ -1,6 +1,15 @@
 {% extends "_layout.html" %}
 {% block content %}
-<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
+<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md relative">
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <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="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
     <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Add Reading</h1>
     <form method="POST" action="{{ url_for('main.add_reading') }}" novalidate class="space-y-6">
         {{ form.hidden_tag() }}

app/templates/confirm_delete.html

@@ -1,8 +1,18 @@
 {% extends "_layout.html" %}
 
 {% block content %}
-<div class="max-w-lg mx-auto bg-white p-6 rounded-lg shadow-md mt-10">
+<div class="max-w-lg mx-auto p-4 relative">
-    <h2 class="text-lg font-bold text-gray-800">Confirm Deletion</h2>
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <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="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
+    <h2 class="text-2xl font-bold mb-4 text-center">Confirm Deletion</h2>
+    <div class="bg-white p-8 rounded-lg shadow-md">
         <p class="text-sm text-gray-600 mt-2">Are you sure you want to delete the following reading?</p>
 
         <!-- Reading Details -->
@@ -15,7 +25,8 @@
 
         <!-- Confirmation Buttons -->
         <div class="mt-6 flex justify-end space-x-2">
-        <a href="{{ url_for('main.dashboard') }}" class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
+            <a href="{{ url_for('main.dashboard') }}"
+                class="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400">
                 Cancel
             </a>
             <form method="POST" action="{{ url_for('main.confirm_delete', reading_id=reading.id) }}">
@@ -24,5 +35,6 @@
                 </button>
             </form>
         </div>
+    </div>
 </div>
 {% endblock %}

app/templates/dashboard.html

@@ -288,7 +288,7 @@
                 <!-- Days of the Month -->
                 {% for day in range(1, days_in_month + 1) %}
                 {% set current_day = current_date.replace(day=day) %}
-                <div class="border p-1 md:p-4 rounded-lg bg-gray-50 relative">
+                <div class="border p-1 md:p-4 bg-gray-50 relative">
                     <!-- Day Label -->
                     <div class="text-sm font-bold text-gray-500 text-left">{{ current_day.day }}</div>
 

app/templates/data.html

@@ -1,8 +1,17 @@
 {% extends "_layout.html" %}
 
 {% block content %}
-<div class="max-w-4xl mx-auto p-4">
+<div class="max-w-4xl mx-auto p-4 relative">
-    <h1 class="text-2xl font-bold mb-4">Import/Export Data</h1>
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <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="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
+    <h1 class="text-2xl font-bold mb-4 text-center">Import/Export Data</h1>
 
     <!-- Import Data Section -->
     <div class="bg-white p-6 rounded-lg shadow-md mb-6">

app/templates/edit_reading.html

@@ -1,9 +1,9 @@
 {% extends "_layout.html" %}
 {% block content %}
-<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md relative">
+<div class="max-w-lg mx-auto p-4 relative">
     <!-- Cancel Button (Top-Left) -->
-    <a href="{{ url_for('main.dashboard') }}"
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
-        class="absolute top-4 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
         <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="2">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
@@ -22,8 +22,9 @@
 
     </a>
 
-    <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Edit Reading</h1>
+    <h1 class="text-2xl font-bold mb-4 text-center">Edit Reading</h1>
-    <form method="POST" action="{{ url_for('main.edit_reading', reading_id=reading.id) }}" novalidate>
+    <form method="POST" action="{{ url_for('main.edit_reading', reading_id=reading.id) }}" novalidate
+        class="bg-white p-8 rounded-lg shadow-md">
         {{ form.hidden_tag() }}
 
         <!-- Timestamp Field -->

app/templates/profile.html

@@ -1,15 +1,26 @@
 {% extends "_layout.html" %}
 {% block content %}
-<div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-md">
+<div class="max-w-4xl mx-auto p-4 relative">
-    <h1 class="text-2xl font-bold text-center mb-6">Profile Settings</h1>
+    <!-- Cancel Button (Top-Left) -->
+    <a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
+        class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
+        <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="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+        </svg>
+        <span>Back</span>
+    </a>
+    <h1 class="text-2xl font-bold mb-4 text-center">Profile Settings</h1>
+
+    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
 
         <div class="flex items-center justify-center mb-4">
             {% if profile.profile_pic %}
             <img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
-            class="w-24 h-24 rounded-full border">
+                class="w-44 h-44 rounded-full border">
             {% else %}
             <img src="{{ url_for('static', filename='default.png') }}" alt="Default Profile Picture"
-            class="w-24 h-24 rounded-full border">
+                class="w-44 h-44 rounded-full border">
             {% endif %}
         </div>
 
@@ -29,7 +40,8 @@
 
             <div class="mb-4">
                 {{ form.profile_pic.label(class="block text-sm font-medium text-gray-700") }}
-            {{ form.profile_pic(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500")
+                {{ form.profile_pic(class="w-full p-2 border rounded focus:outline-none focus:ring-2
+                focus:ring-blue-500")
                 }}
             </div>
 
@@ -54,5 +66,6 @@
                 {{ form.submit(class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700") }}
             </div>
         </form>
+    </div>
 </div>
 {% endblock %}