Change colour of date header to white

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

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>

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',
     },
     {