From db86f9323e91e580799c526dbf4d1f346c2966b8 Mon Sep 17 00:00:00 2001
From: quirinecker <quirin.ecker@bajupa.com>
Date: Sun, 11 May 2025 22:36:28 +0200
Subject: [PATCH] improved calendar styles, switched profile pic, fixed dark
 mode

---
 web/assets/css/main.css                       | 30 +++++++++----------
 web/components/ui/Sidebar.vue                 |  4 +--
 web/components/ui/calendar/Calendar.vue       |  4 +--
 .../ui/calendar/CalendarCollumn.vue           |  5 ++--
 web/components/ui/calendar/CalendarEvent.vue  |  1 +
 web/components/ui/calendar/CalendarHeader.vue |  4 +--
 6 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index f8ca0cd..f59a066 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -24,22 +24,22 @@
 
 .dark {
   --ui-primary: #C02942;
---ui-text-dimmed: var(--ui-color-neutral-400);
-  --ui-text-muted: var(--ui-color-neutral-500);
-  --ui-text-toned: var(--ui-color-neutral-600);
-  --ui-text: var(--ui-color-neutral-700);
-  --ui-text-highlighted: var(--ui-color-neutral-900);
-  --ui-text-inverted: var(--color-white);
+	  --ui-text-dimmed: var(--ui-color-neutral-500);
+  --ui-text-muted: var(--ui-color-neutral-400);
+  --ui-text-toned: var(--ui-color-neutral-300);
+  --ui-text: var(--ui-color-neutral-200);
+  --ui-text-highlighted: var(--color-white);
+  --ui-text-inverted: var(--ui-color-neutral-900);
 
-  --ui-bg: var(--color-white);
-  --ui-bg-muted: var(--ui-color-neutral-50);
-  --ui-bg-elevated: var(--ui-color-neutral-100);
-  --ui-bg-accented: var(--ui-color-neutral-200);
-  --ui-bg-inverted: var(--ui-color-neutral-900);
+  --ui-bg: var(--ui-color-neutral-900);
+  --ui-bg-muted: var(--ui-color-neutral-800);
+  --ui-bg-elevated: var(--ui-color-neutral-800);
+  --ui-bg-accented: var(--ui-color-neutral-700);
+  --ui-bg-inverted: var(--color-white);
 
-  --ui-border: var(--ui-color-neutral-200);
-  --ui-border-muted: var(--ui-color-neutral-200);
-  --ui-border-accented: var(--ui-color-neutral-300);
-  --ui-border-inverted: var(--ui-color-neutral-900);
+  --ui-border: var(--ui-color-neutral-800);
+  --ui-border-muted: var(--ui-color-neutral-700);
+  --ui-border-accented: var(--ui-color-neutral-700);
+  --ui-border-inverted: var(--color-white);
 }
 
diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
index cf9bed0..b12e079 100644
--- a/web/components/ui/Sidebar.vue
+++ b/web/components/ui/Sidebar.vue
@@ -56,8 +56,8 @@ defineProps<{
 					content: 'w-60'
 				}">
 					<UButton variant="ghost" class="flex gap-1 items-center w-full text-text">
-						<UAvatar src="https://github.com/benjamincanac.png" />
-						Sebastian Peinbauer
+						<UAvatar src="https://avatars.githubusercontent.com/u/33062936?s=400&u=9ee792d29ebcacccdbfb5af0539aab313d6d7185&v=4" />
+						Quirin Ecker
 					</UButton>
 				</UDropdownMenu>
 			</footer>
diff --git a/web/components/ui/calendar/Calendar.vue b/web/components/ui/calendar/Calendar.vue
index 6fb6aaf..a3b8b62 100644
--- a/web/components/ui/calendar/Calendar.vue
+++ b/web/components/ui/calendar/Calendar.vue
@@ -102,8 +102,8 @@ function quickCreate(date: Moment, timespan: Timespan) {
 </script>
 
 <template>
-	<div class="w-full h-full flex flex-col">
-		<div class="calendar flex flex-row w-full flex-1 items-stretch">
+	<div class="w-full h-full flex flex-col overflow-scroll">
+		<div class="calendar flex flex-row w-full flex-1 items-stretch divide-x divide-muted">
 			<CalendarHeader :seperators="seperators" />
 
 			<CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events"
diff --git a/web/components/ui/calendar/CalendarCollumn.vue b/web/components/ui/calendar/CalendarCollumn.vue
index 3ca09df..740fc26 100644
--- a/web/components/ui/calendar/CalendarCollumn.vue
+++ b/web/components/ui/calendar/CalendarCollumn.vue
@@ -3,6 +3,7 @@ import { computed, ref, useTemplateRef } from 'vue';
 import CalendarSeperator from './CalendarSeperator.vue';
 import type { Moment } from 'moment';
 import CalendarEvent from './CalendarEvent.vue';
+import { Event } from '~/utils/event';
 import moment from 'moment';
 
 const props = defineProps<{
@@ -92,7 +93,7 @@ function dragDrop(_: DragEvent) {
 
 <template>
 	<div class="flex flex-col h-full grow">
-		<div class="flex justify-center items-center flex-col h-18 border-b-2 border-text">
+		<div class="flex justify-center items-center flex-col h-18 border-b-1 border-muted">
 			<div>{{ props.day.format('dd').toUpperCase() }}</div>
 			<div>{{ props.day.date() }}</div>
 		</div>
@@ -100,7 +101,7 @@ function dragDrop(_: DragEvent) {
 		<div id="col" ref="column" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mouseover" @dragover="dragover"
 			@dragend="dragDrop" class="relative flex flex-col grow items-center">
 			<CalendarSeperator v-for="sep in seperators" :seperator="sep">
-				<hr class="w-full">
+				<hr class="w-full border-muted">
 			</CalendarSeperator>
 			<div class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg"
 				:style="{ height: `${height}px`, top: `${top}px` }"></div>
diff --git a/web/components/ui/calendar/CalendarEvent.vue b/web/components/ui/calendar/CalendarEvent.vue
index 220b5f2..e72b984 100644
--- a/web/components/ui/calendar/CalendarEvent.vue
+++ b/web/components/ui/calendar/CalendarEvent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import type { Event } from '~/utils/event';
 
 const props = defineProps<{
 	event: CollissionWrapper
diff --git a/web/components/ui/calendar/CalendarHeader.vue b/web/components/ui/calendar/CalendarHeader.vue
index b9f0f4c..c331977 100644
--- a/web/components/ui/calendar/CalendarHeader.vue
+++ b/web/components/ui/calendar/CalendarHeader.vue
@@ -10,8 +10,8 @@ defineProps<{
 </script>
 
 <template>
-	<div class="flex flex-col h-full w-32">
-		<div class="flex justify-center items-center h-18 border-b-text border-b-2">vue-calendar
+	<div class="flex flex-col h-full w-16">
+		<div class="flex justify-center items-center h-18 border-b-muted border-b-1">
 		</div>
 		<div class="calendar-legend relative flex flex-col grow justify-evenly">
 			<CalendarSeperator v-for="sep in seperators" :seperator="sep">