From 5f494dc9e9eff6b22f6c8e94aa4235373b287d60 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Sat, 4 Nov 2023 00:19:46 +0100
Subject: [PATCH] [TASK] support dark mode first draft

---
 frontend/scss/components/_btns.scss      |  4 ++--
 frontend/scss/components/_headlines.scss |  4 ++--
 frontend/scss/components/_input.scss     | 22 ++++++++++------------
 frontend/scss/components/_sidebar.scss   |  2 --
 templates/base.html.tera                 |  2 +-
 templates/dynamics/sidebar.html.tera     |  2 +-
 templates/includes/footer.html.tera      |  2 +-
 templates/includes/forms/log.html.tera   | 12 ++++++------
 templates/includes/macros.html.tera      |  4 ++--
 templates/index.html.tera                | 10 +++++-----
 templates/kiosk.html.tera                |  6 +++---
 templates/log.html.tera                  |  6 +++---
 12 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/frontend/scss/components/_btns.scss b/frontend/scss/components/_btns.scss
index 6856169..b7ffb37 100644
--- a/frontend/scss/components/_btns.scss
+++ b/frontend/scss/components/_btns.scss
@@ -6,11 +6,11 @@
   }
 
   &-dark {
-    @apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
+    @apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-950 focus-visible:outline-primary-950;
   }
 
   &-gray {
-    @apply bg-gray-400 hover:bg-gray-500 focus-visible:outline-primary-500;
+    @apply bg-gray-400 hover:bg-gray-500 dark:bg-primary-600 focus-visible:outline-primary-500;
   }
 
   &-attention {
diff --git a/frontend/scss/components/_headlines.scss b/frontend/scss/components/_headlines.scss
index 723d436..cd4fa44 100644
--- a/frontend/scss/components/_headlines.scss
+++ b/frontend/scss/components/_headlines.scss
@@ -1,7 +1,7 @@
 .h1 {
-  @apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
+  @apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900 dark:text-white;
 }
 
 .h2 {
-  @apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 bg-gray-200 bg-opacity-80 text-lg px-3 py-3;
+  @apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-lg px-3 py-3;
 }
\ No newline at end of file
diff --git a/frontend/scss/components/_input.scss b/frontend/scss/components/_input.scss
index 33489c2..e62dc4a 100644
--- a/frontend/scss/components/_input.scss
+++ b/frontend/scss/components/_input.scss
@@ -1,5 +1,5 @@
 .input {
-  @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
+  @apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
 
 select {
@@ -7,7 +7,7 @@ select {
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
-  background-color: white;
+  @apply bg-white dark:bg-black;
   -webkit-appearance: none; 
   appearance: none;
 }
@@ -32,7 +32,7 @@ select {
 }
 .choices.is-disabled .choices__inner,
 .choices.is-disabled .choices__input {
-  background-color: #eaeaea;
+  @apply bg-white dark:bg-black;
   cursor: not-allowed;
   -webkit-user-select: none;
           user-select: none;
@@ -52,8 +52,7 @@ select {
   display: block;
   width: 100%;
   padding: 10px;
-  @apply border-0 ring-1 ring-inset ring-gray-300;
-  background-color: #fff;
+  @apply bg-white dark:bg-black border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
   margin: 0;
 }
 .choices[data-type*=select-one] .choices__button {
@@ -93,7 +92,7 @@ select {
   pointer-events: none;
 }
 .choices[data-type*=select-one].is-open::after {
-  @apply border-0 ring-1 ring-inset ring-gray-300;
+  @apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
   margin-top: -7.5px;
 }
 .choices[data-type*=select-one][dir=rtl]::after {
@@ -135,10 +134,10 @@ select {
 }
 
 .choices__inner {
-  @apply input rounded-md bg-white;
+  @apply input rounded-md bg-white dark:bg-black;
 }
 .is-focused .choices__inner, .is-open .choices__inner {
-  @apply border-0 ring-1 ring-inset ring-gray-300;
+  @apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
 }
 .is-open .choices__inner {
   border-radius: 0;
@@ -190,7 +189,7 @@ select {
   @apply bg-primary-900;
 }
 .is-disabled .choices__list--multiple .choices__item {
-  @apply bg-gray-600;
+  @apply bg-gray-600 dark:bg-primary-900;
 }
 
 .choices__list--dropdown, .choices__list[aria-expanded] {
@@ -198,8 +197,7 @@ select {
   z-index: 1;
   position: absolute;
   width: 100%;
-  background-color: #fff;
-  @apply border;
+  @apply border bg-white dark:bg-black dark:text-white;
   top: 100%;
   margin-top: -1px;
   border-bottom-left-radius: 2.5px;
@@ -212,7 +210,7 @@ select {
   visibility: visible;
 }
 .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
-  @apply border-0 ring-1 ring-inset ring-gray-300;
+  @apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
 }
 .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
   top: auto;
diff --git a/frontend/scss/components/_sidebar.scss b/frontend/scss/components/_sidebar.scss
index a9c12f3..619753f 100644
--- a/frontend/scss/components/_sidebar.scss
+++ b/frontend/scss/components/_sidebar.scss
@@ -3,14 +3,12 @@
   position: fixed;
   overflow-y: scroll;
   top: 0;
-  background: white;
   z-index: 2000;
   width: 0;
   max-width: 0;
   box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
 
   &.open {
-      background-color: rgba(255, 255, 255, 100%);
       display: block;
       height: 100vh;
       right: 0;
diff --git a/templates/base.html.tera b/templates/base.html.tera
index e7ae735..1dff697 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -9,7 +9,7 @@
 		<link rel="icon" type="image/x-icon" href="/public/images/favicon.ico">
 		<title>Ruderassistent - ASKÖ Ruderverein Donau Linz</title>
 	</head>
-	<body class="bg-gray-100">
+	<body class="bg-gray-100 dark:bg-black">
 		{% if loggedin_user %}
 			{{ macros::header(loggedin_user=loggedin_user) }}
 		{% endif %}
diff --git a/templates/dynamics/sidebar.html.tera b/templates/dynamics/sidebar.html.tera
index 59c7041..2f9e7f3 100644
--- a/templates/dynamics/sidebar.html.tera
+++ b/templates/dynamics/sidebar.html.tera
@@ -1,4 +1,4 @@
-<div class="sidebar slide-in from-right" id="sidebar" aria-modal="false">
+<div class="sidebar slide-in from-right bg-white dark:bg-primary-950 dark:text-white" id="sidebar" aria-modal="false">
 	<div class="bg-primary-900 text-white px-2 py-3 flex justify-between sidebar-header">
 		<div>
 			<span class="ps-1 header-js">
diff --git a/templates/includes/footer.html.tera b/templates/includes/footer.html.tera
index bac774b..a1a8522 100644
--- a/templates/includes/footer.html.tera
+++ b/templates/includes/footer.html.tera
@@ -1,4 +1,4 @@
-<footer class="bg-primary-950 text-white w-full flex justify-center p-3">
+<footer class="bg-primary-950 dark:bg-primary-900 text-white w-full flex justify-center p-3">
 	<div class="max-w-screen-xl w-full flex justify-between">
 		<div>
 			<span class="text-[#ff0000]">&hearts;</span>
diff --git a/templates/includes/forms/log.html.tera b/templates/includes/forms/log.html.tera
index b4a1b72..d31c984 100644
--- a/templates/includes/forms/log.html.tera
+++ b/templates/includes/forms/log.html.tera
@@ -32,7 +32,7 @@
 		{{ log::boat_select(only_ones=only_ones) }}
 		{% if not only_ones %}
 			<div class="col-span-4 md:col-span-1">
-				<div class="text-sm text-gray-600">Bootssteuerung</div>
+				<div class="text-sm text-gray-600 dark:text-gray-100">Bootssteuerung</div>
 				<div class="h-10 flex items-center">
 					{{ macros::checkbox(label='handgesteuert', name='shipmaster_only_steering', disabled=true) }}
 				</div>
@@ -46,7 +46,7 @@
 		{{ macros::input(label='Abfahrtszeit', name='departure', type='datetime-local', required=true, wrapper_class='col-span-2') }}
 		{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', wrapper_class='col-span-2') }}
 		<div class="relative col-span-2">
-			<label for="destination" class="text-sm text-gray-600">Ziel</label>
+			<label for="destination" class="text-sm text-gray-600 dark:text-gray-100">Ziel</label>
 			<input class="input rounded-md set-distance-js" type="search" list="destinations" placeholder="Destination" id="destination" name="destination" value="" data-relation="distance_in_km"/>
 			<datalist id="destinations">
 				{% for distance in distances %}<option value="{{ distance.0 }}" distance="{{ distance.1 }}" />
@@ -55,7 +55,7 @@
 		</div>
 		<div class="relative col-span-2">
 			{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" , type="number", min=0, value='', class="rounded-md") }}
-			<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
+			<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-primary-950 rounded-br-md rounded-tr-md">km</span>
 		</div>
 		{{ macros::input(label="Kommentar", name="comments", type="text", wrapper_class="col-span-4") }}
 		{{ macros::select(label="Typ", data=logtypes, name='logtype', default="Normal", wrapper_class="col-span-4") }}
@@ -76,7 +76,7 @@
 {% macro rower_select(id, selected, amount_seats='', class='', init='false', cox_on_boat='', steering_person_id='') %}
 	{#{% if not amount_seats or amount_seats > 1 %}#}
 	<div class="{{ class }}">
-		<label for="{{id}}" class="text-sm text-gray-600 ">Ruderer (inkl. Schiffsführer und Steuerperson)</label>
+		<label for="{{id}}" class="text-sm text-gray-600 dark:text-gray-100">Ruderer (inkl. Schiffsführer und Steuerperson)</label>
 		<select style="width: 100%;" multiple name="rowers[]" id="{{id}}" class="w-full" data-seats="{{amount_seats}}" data-init={{init}}>
 			{% for user in users %}
 				{% set_global sel = false %}
@@ -216,14 +216,14 @@
 		{{ macros::input(label='Ankunftszeit', name='arrival', type='datetime-local', required=true, class="change-id-js rounded-md current-date-time") }}
 
 		<div>
-			<label for="destination" class="text-sm text-gray-600">Ziel</label>
+			<label for="destination" class="text-sm text-gray-600 dark:text-gray-100">Ziel</label>
 
 			<input class="input rounded-md set-distance-js change-id-js" type="search" list="destinations" placeholder="Destination" required="required" id="destination{{ log.id }}" name="destination" value="{{log.destination}}" data-relation="distance_in_km{{log.id}}"/>
 		</div>
 
 		<div class="relative">
 			{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km" ~ log.id , type="number", min=0, value=log.distance_in_km, required=true, class="rounded-md change-id-js") }}
-			<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
+			<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white dark:bg-primary-950 border-0 text-gray-600 dark:text-gray-100 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
 		</div>
 
     {{ macros::input(label="Kommentar", name="comments", id="comments" ~ log.id, type="text", value=log.comments, class="rounded-md change-id-js") }}
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 7d53179..c38f59b 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -128,7 +128,7 @@
 
 {% macro input(label, name, type, required=false, class='rounded-md', value='', min='', hide_label=false, id='', autofocus=false, wrapper_class='') %}
 	<div class="{{wrapper_class}}">
-		<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 {% endif %}">{{ label }}</label>
+		<label for="{{ name }}" class="{% if hide_label %} sr-only {% else %} text-sm text-gray-600 dark:text-gray-100 {% endif %}">{{ label }}</label>
 		<input {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} value="{{ value }}" class="input {{ class }}" placeholder="{% if hide_label %}{{ label }}{% endif %}" {% if min is defined %} min="{{ min }}" {% endif %} {% if autofocus %} autofocus {% endif %}>
 	</div>
 {% endmacro input %}
@@ -142,7 +142,7 @@
 
 {% macro select(label, data, name='trip_type', default='', id='', selected_id='', display='', extras='', class='', wrapper_class='', required=false, show_seats=false) %}
 	<div class="{{wrapper_class}}">
-		<label for="{{ name }}" class="text-sm text-gray-600">{{ label }}</label>
+		<label for="{{ name }}" class="text-sm text-gray-600 dark:text-gray-100">{{ label }}</label>
 		{% if display == '' %}
 			{% set display = ["name"] %}
 		{% endif %}
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 852030c..eae123f 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -23,10 +23,10 @@
 				{% endfor %}
 			{% endif %}
 
-			<div class="bg-white rounded-md flex justify-between flex-col shadow reset-js" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
+			<div class="bg-white dark:bg-primary-900 rounded-md flex justify-between flex-col shadow reset-js" style="min-height: 10rem;" data-trips="{{ amount_trips }}" data-month="{{ day.day| date(format='%m') }}" data-coxneeded="{{ day_cox_needed }}">
 				<div>
-					<h2 class="font-bold uppercase tracking-wide text-center rounded-t-md  {% if day.is_pinned %} text-white bg-primary-950 {% else %} text-primary-950 bg-gray-200 bg-opacity-80 {% endif %} text-lg px-3 py-3 ">{{ day.day| date(format="%d.%m.%Y") }}
-						<small class="inline-block ml-1 text-xs {% if day.is_pinned %} text-gray-200 {% else %} text-gray-500 {% endif %}">{{ day.day | date(format="%A", locale="de_AT") }}</small>
+					<h2 class="font-bold uppercase tracking-wide text-center rounded-t-md  {% if day.is_pinned %} text-white bg-primary-950 {% else %} text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 {% endif %} text-lg px-3 py-3 ">{{ day.day| date(format="%d.%m.%Y") }}
+						<small class="inline-block ml-1 text-xs {% if day.is_pinned %} text-gray-200 {% else %} text-gray-500 dark:text-gray-100 {% endif %}">{{ day.day | date(format="%A", locale="de_AT") }}</small>
 					</h2>
 
 					{% if day.planned_events | length > 0 or  day.trips | length > 0 %}
@@ -269,7 +269,7 @@
 				{% if loggedin_user.is_admin or loggedin_user.is_cox %}
 					<div class="grid {% if loggedin_user.is_admin %} grid-cols-2 {% endif %} text-center">
 						{% if loggedin_user.is_admin %}
-							<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Event</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#addEventForm" class="relative inline-block w-full bg-primary-900 hover:bg-primary-950 focus:bg-primary-950 text-white py-2 rounded-bl-md text-sm font-semibold">
+							<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Event</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#addEventForm" class="relative inline-block w-full bg-primary-900 hover:bg-primary-950 focus:bg-primary-950 dark:bg-primary-950 text-white py-2 rounded-bl-md text-sm font-semibold">
 								<span class="absolute inset-y-0 left-0 flex items-center pl-3">
 									{% include "includes/plus-icon" %}
 								</span>
@@ -278,7 +278,7 @@
 						{% endif %}
 
 						{% if loggedin_user.is_cox%}
-							<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Ausfahrt</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#sidebarForm" class="relative inline-block w-full py-2 text-primary-900 hover:text-primary-950 focus:text-primary-950 text-sm font-semibold bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 {% if loggedin_user.is_admin %} rounded-br-md {% else %} rounded-b-md {% endif %}">
+							<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>Ausfahrt</strong> am {{ day.day| date(format='%d.%m.%Y') }} erstellen" data-day="{{ day.day }}" data-body="#sidebarForm" class="relative inline-block w-full py-2 text-primary-900 hover:text-primary-950 dark:bg-primary-600 dark:text-white dark:hover:bg-primary-500 dark:hover:text-white focus:text-primary-950 text-sm font-semibold bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 {% if loggedin_user.is_admin %} rounded-br-md {% else %} rounded-b-md {% endif %}">
 								<span class="absolute inset-y-0 left-0 flex items-center pl-3">
 									{% include "includes/plus-icon" %}
 								</span>
diff --git a/templates/kiosk.html.tera b/templates/kiosk.html.tera
index 35b8018..321e7ca 100644
--- a/templates/kiosk.html.tera
+++ b/templates/kiosk.html.tera
@@ -15,20 +15,20 @@
   {% endif %}
 
   <div class="w-full grid md:grid-cols-5 gap-3 mt-5">
-    <div class="bg-white rounded-md hidden md:block shadow">
+    <div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
       <h2 class="h2">Boote</h2>
       
       <div>
         {{ log::show_boats(only_ones=false) }}
       </div>
     </div>
-    <div class="md:col-span-3 bg-white rounded-md shadow">
+    <div class="md:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
       <h2 class="h2">Neue Ausfahrt</h2>
       <div class="p-3">
         {{ log::new(only_ones=false, shipmaster=-1) }}
       </div>
     </div>
-    <div class="bg-white rounded-md shadow">
+    <div class="bg-white dark:bg-primary-900 rounded-md shadow">
       <h2 class="h2">Am Wasser</h2>
 
       <div>
diff --git a/templates/log.html.tera b/templates/log.html.tera
index 6126e50..dab1c77 100644
--- a/templates/log.html.tera
+++ b/templates/log.html.tera
@@ -14,20 +14,20 @@
 		{% endif %}
 	
 		<div class="w-full grid md:grid-cols-5 gap-3 mt-5">
-			<div class="bg-white rounded-md hidden md:block shadow">
+			<div class="bg-white dark:bg-primary-900 rounded-md hidden md:block shadow">
 				<h2 class="h2">Boote</h2>
 	
 				<div>
 					{{ log::show_boats(only_ones=false) }}
 				</div>
 			</div>
-			<div class="md:col-span-3 bg-white rounded-md shadow">
+			<div class="md:col-span-3 bg-white dark:bg-primary-900 rounded-md shadow">
 				<h2 class="h2">Neue Ausfahrt</h2>
 				<div class="p-3">
 					{{ log::new(only_ones=loggedin_user.is_cox==false, shipmaster=loggedin_user.id) }}
 				</div>
 			</div>
-			<div class="bg-white rounded-md shadow">
+			<div class="bg-white dark:bg-primary-900 rounded-md shadow">
 				<h2 class="h2">Am Wasser</h2>
 	
 				{% if on_water | length > 0 %}