From b66afb56929c973d26e0d7f6e8c591e7795ba7eb Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Tue, 30 Apr 2024 16:04:30 -0400
Subject: [PATCH] Change colour of date header to white

---
 .../boat/BoatScheduleTableComponent.vue           |  7 ++++++-
 .../scheduling/boat/CalendarHeaderComponent.vue   | 15 ++++++++-------
 src/stores/sampledata/schedule.ts                 |  6 +++---
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/scheduling/boat/BoatScheduleTableComponent.vue b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
index b8fda5e..4a50b09 100644
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -165,7 +165,10 @@ interface DayBodyScope {
 
 function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
   // TODO: Disable blocks before today with updateDisabled and/or comparison
-  selectedBlock.value = block;
+  selectedBlock.value === block
+    ? (selectedBlock.value = null)
+    : (selectedBlock.value = block);
+
   emit('updateBoatTime', block);
 }
 
@@ -199,6 +202,7 @@ const disabledBefore = computed(() => {
   position: absolute
   justify-content: center
   align-items: center
+  text-align: center
   width: 100%
   opacity: 1
   margin: 0px
@@ -212,6 +216,7 @@ const disabledBefore = computed(() => {
   display: flex
   position: absolute
   justify-content: center
+  text-align: center
   align-items: center
   width: 100%
   opacity: 0.5
diff --git a/src/components/scheduling/boat/CalendarHeaderComponent.vue b/src/components/scheduling/boat/CalendarHeaderComponent.vue
index 05b0e98..9f1daad 100644
--- a/src/components/scheduling/boat/CalendarHeaderComponent.vue
+++ b/src/components/scheduling/boat/CalendarHeaderComponent.vue
@@ -155,7 +155,7 @@ function dayFormatterFunc() {
   position: relative
   width: 100%
   height: 70px
-  background: $primary
+  background: white
    display: flex
    flex-direction: row
    flex: 1 0 100%
@@ -164,6 +164,7 @@ function dayFormatterFunc() {
   overflow: hidden
   border-radius: 3px
   user-select: none
+  margin: 2px 0px 2px
 
 .dates-holder
   position: relative
@@ -186,8 +187,8 @@ function dayFormatterFunc() {
   user-select: none
 
 .direction-button
-  background: $primary
-  color: white
+  background: white
+  color: $primary
   width: 40px
   max-width: 50px !important
 
@@ -212,8 +213,8 @@ function dayFormatterFunc() {
     font-size: 3em
 
 .date-button
-  color: white
-  background: $primary
+  color: $primary
+  background: white
   z-index: 2
   height: 100%
   outline: 0
@@ -236,6 +237,6 @@ function dayFormatterFunc() {
   user-select: none
 
 .selected-date-button
-  color: #3f51b5 !important
-  background: white !important
+  color: white !important
+  background: $primary !important
 </style>
diff --git a/src/stores/sampledata/schedule.ts b/src/stores/sampledata/schedule.ts
index 82afbb8..ac0ec3e 100644
--- a/src/stores/sampledata/schedule.ts
+++ b/src/stores/sampledata/schedule.ts
@@ -82,9 +82,9 @@ export function getSampleReservations(): Reservation[] {
     {
       id: 3,
       user: 'Peter Parker',
-      start: '9:00',
-      end: '12:00',
-      boat: '2',
+      start: '7:00',
+      end: '13:00',
+      boat: '4',
       status: 'tentative',
     },
     {