From 2deef8039dbe9306f982fbe6eb1db933373497fb Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Thu, 10 Jul 2025 14:32:26 +0200
Subject: [PATCH] update(LvPlan color contrast): changes the colors for some of
 the text in the lvplan component for more contrast

---
 public/css/components/calendar.css          | 28 ++++++++++++++++++---
 public/js/components/Calendar/Day/Page.js   |  6 ++---
 public/js/components/Calendar/Header.js     |  4 +--
 public/js/components/Calendar/Month/Page.js |  2 +-
 public/js/components/Calendar/Week/Page.js  |  6 ++---
 public/js/components/Calendar/Weeks.js      |  2 +-
 public/js/components/Calendar/Years/Page.js |  2 +-
 public/js/components/Cis/LvPlan/LvPlan.js   |  2 +-
 8 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index fe8841867..85962d4e0 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -170,7 +170,7 @@
 	content: "";
 	position: absolute;
 	top: 0;
-	left: 0;
+	left: 3rem;
 	margin:auto;
 	width: 100%;
 	height: 100%;
@@ -208,11 +208,16 @@
 }
 
 .fhc-calendar-lg .fhc-calendar-month-page-day,
-.fhc-calendar-lg .fhc-calendar-month-page-weekday,
-.fhc-calendar-md .fhc-calendar-month-page-day,
-.fhc-calendar-md .fhc-calendar-month-page-weekday {
+.fhc-calendar-md .fhc-calendar-month-page-day {
   border: solid 1px var(--fhc-calendar-border);
 }
+
+.fhc-calendar-lg .fhc-calendar-month-page-weekday,
+.fhc-calendar-md .fhc-calendar-month-page-weekday{
+	border: solid 1px var(--fhc-secondary);
+}
+
+
 .fhc-calendar-lg .fhc-calendar-month-page-day,
 .fhc-calendar-md .fhc-calendar-month-page-day {
   aspect-ratio: 1;
@@ -419,3 +424,18 @@
 .weekPageContainer {
 	container-type: inline-size;
 }
+
+#calendarHeaderTitle{
+	color: var(--fhc-text);
+}
+
+.fhc-calendar-day-page .hours,
+.fhc-calendar-day-page .curTimeIndicator,
+.fhc-calendar-day-page .fhc-calendar-hour-indicator,
+.fhc-calendar-week-page .hours,
+.fhc-calendar-week-page .curTimeIndicator,
+.fhc-calendar-week-page .fhc-calendar-hour-indicator,
+.fhc-calendar-day-page .date,
+.fhc-calendar-week-page .date {
+	color: var(--fhc-text-secondary) !important;
+}
\ No newline at end of file
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 4247ffcd5..43154aa0a 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -385,8 +385,8 @@ export default {
 				<div class="d-flex flex-column h-100 border">
 					<div ref="header" class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle">
 						<div type="button" class="flex-grow-1" :title="dayText.heading" @click.prevent="changeToMonth(day)">
-							<div class="fw-bold">{{dayText.tag}}</div>
-							<a href="#" class="small text-secondary text-decoration-none" >{{dayText.datum}}</a>
+							<div class="day fw-bold">{{dayText.tag}}</div>
+							<a href="#" class="small date text-decoration-none" >{{dayText.datum}}</a>
 						</div>
 					</div>
 					<div @wheel.prevent="dayScrollBehavior" id="scrollContainer" ref="dayScrollContainer" style="height: 100%; overflow-y: scroll;">
@@ -438,7 +438,7 @@ export default {
 									</Transition>
 									<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
 									<div class="hours">
-										<div v-for="hour in hours" :style="'min-height:' + rowMinHeight " :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
+										<div v-for="hour in hours" :style="'min-height:' + rowMinHeight " :key="hour" class="text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 									</div>
 									<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
 
diff --git a/public/js/components/Calendar/Header.js b/public/js/components/Calendar/Header.js
index c1b53d9c8..7ddb384f2 100644
--- a/public/js/components/Calendar/Header.js
+++ b/public/js/components/Calendar/Header.js
@@ -74,7 +74,7 @@ export default {
 					</div>
 					<div class="justify-content-center text-center col-auto">
 						<div class="d-flex justify-content-center align-items-center">
-							<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
+							<button id="calendarHeaderTitle" class="btn btn-link text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
 								{{ title }}
 								<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
 							</button>
@@ -88,7 +88,7 @@ export default {
 			<div ref="viewButtons" v-if="!noWeekView && !noMonthView" :class="getHeaderClassSide" class="d-flex justify-content-center justify-content-md-end align-items-center" style="pointer-events: none;">
 				<div  style="pointer-events: all;">
 					<div  role="group" aria-label="Kalender Modus">
-						<button :aria-label="modeAriaLabelText(mode_bezeichnung)" v-tooltip.top="{value:modeAriaLabelText(mode_bezeichnung), showDelay:1000}" type="button" :class="{'active':mode_kurzbz.toLowerCase() === mode.toLowerCase()}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="({mode_bezeichnung,icon,condition},mode_kurzbz) in modes">
+						<button :aria-label="modeAriaLabelText(mode_bezeichnung)" v-tooltip.top="{value:modeAriaLabelText(mode_bezeichnung), showDelay:1000}" type="button" :class="{'active':mode_kurzbz.toLowerCase() === mode.toLowerCase()}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary card d-inline-block" v-for="({mode_bezeichnung,icon,condition},mode_kurzbz) in modes">
 							<i aria-hidden="true" v-if="condition" class="fa" :class="icon" ></i>
 						</button>
 					</div>
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
index 3f9d9ad67..bd974afde 100644
--- a/public/js/components/Calendar/Month/Page.js
+++ b/public/js/components/Calendar/Month/Page.js
@@ -143,7 +143,7 @@ export default {
 		</div>
 		<template v-for="week in weeks"
 		:key="week.no">
-			<a href="#" v-if="showWeeks" class="fhc-calendar-month-page-weekday text-decoration-none text-end opacity-25"
+			<a href="#" v-if="showWeeks" class="fhc-calendar-month-page-weekday text-decoration-none text-end "
 			@click.prevent="changeToWeek(week)">{{week.no}}</a>
 			<a href="#"
 			@click.prevent="clickEvent(day,week)"
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 3bfc7b668..b5bfcd3c3 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -325,8 +325,8 @@ export default {
 	<div class="d-flex flex-column">
 			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
 				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToDay(day)">
-					<div class="fw-bold">{{dayText[day]?.tag}}</div>
-					<a href="#" class="small text-muted text-decoration-none" >{{dayText[day]?.datum}}</a>
+					<div class="day fw-bold">{{dayText[day]?.tag}}</div>
+					<a href="#" class="date small text-decoration-none" >{{dayText[day]?.datum}}</a>
 				</div>
 			</div>
 			<div ref="eventcontainer" class="position-relative flex-grow-1"  >
@@ -360,7 +360,7 @@ export default {
 						</div>
 					</Transition>
 					<div class="hours">
-						<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
+						<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 					</div>
 					<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" :class="{'past':day.isPast}" class=" day border-start position-relative" :style="dayGridStyle(day)">
 						<Transition>
diff --git a/public/js/components/Calendar/Weeks.js b/public/js/components/Calendar/Weeks.js
index bed39d624..057889e83 100644
--- a/public/js/components/Calendar/Weeks.js
+++ b/public/js/components/Calendar/Weeks.js
@@ -60,7 +60,7 @@ export default {
 		<calendar-header v-if="header" :title="title" @prev="prev" @next="next" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
 		<div class="d-flex flex-wrap">
 			<div v-for="(week, key) in weeks" :key="key" class="d-grid col-2">
-				<button @click="setWeek(week)" class="btn btn-outline-secondary" :class="{'border-0': week != focusDate.w}">
+				<button @click="setWeek(week)" class="btn btn-outline-secondary card" :class="{'border-0': week != focusDate.w}">
 					{{week}}
 				</button>
 			</div>
diff --git a/public/js/components/Calendar/Years/Page.js b/public/js/components/Calendar/Years/Page.js
index 3d78fc38d..b7461cd03 100644
--- a/public/js/components/Calendar/Years/Page.js
+++ b/public/js/components/Calendar/Years/Page.js
@@ -28,7 +28,7 @@ export default {
 	template: `
 	<div class="fhc-calendar-years-page d-flex flex-wrap">
 		<div v-for="year in years" :key="year" class="d-grid col-4">
-			<button class="btn btn-outline-secondary" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('updateMode')">
+			<button class="btn btn-outline-secondary card justify-content-center" :class="{'border-0': year != focusDate.y}" @click="focusDate.y = year; $emit('updateMode')">
 				{{year}}
 			</button>
 		</div>
diff --git a/public/js/components/Cis/LvPlan/LvPlan.js b/public/js/components/Cis/LvPlan/LvPlan.js
index a095f9f31..14c9b77a2 100644
--- a/public/js/components/Cis/LvPlan/LvPlan.js
+++ b/public/js/components/Cis/LvPlan/LvPlan.js
@@ -314,7 +314,7 @@ const LvPlan = {
 	>
 		<template #calendarDownloads>
 			<div v-for="{title,icon,link} in downloadLinks">
-				<a :href="link" :aria-label="title" class="py-1 px-2 m-1 btn btn-outline-secondary">
+				<a :href="link" :aria-label="title" class="py-1 px-2 m-1 btn btn-outline-secondary card">
 					<div class="d-flex flex-column">
 						<i aria-hidden="true" :class="icon"></i>
 						<span class="small">{{title}}</span>