From 72c3f6c17f274ca4f2edb53c70af3b74265f84aa Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Fri, 27 Jun 2025 09:33:05 +0200
Subject: [PATCH 1/5] style: update calendar styling to to make it pretty in
 both light- and dark-mode

---
 src/components/custom-toolbar.css     |  2 +-
 src/components/react-big-calendar.css | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
index 3fba69f..9721364 100644
--- a/src/components/custom-toolbar.css
+++ b/src/components/custom-toolbar.css
@@ -5,7 +5,7 @@
   gap: 12px;
   padding: calc(var(--spacing) * 2);
   padding-left: calc(50px + var(--spacing));
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: none;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css
index 675898c..ee7afdd 100644
--- a/src/components/react-big-calendar.css
+++ b/src/components/react-big-calendar.css
@@ -83,7 +83,7 @@ button.rbc-input::-moz-focus-inner {
 }
 
 .rbc-off-range-bg {
-  background: #e6e6e6;
+  background: var(--color-neutral-700);
 }
 
 .rbc-header {
@@ -596,7 +596,7 @@ button.rbc-input::-moz-focus-inner {
   min-height: 100%;
 
   /*Own changes 06*/
-  background-color: #383838;
+  background-color: var(--color-neutral-700);
   /*Own changes 06*/
 }
 .rbc-time-column .rbc-timeslot-group {
@@ -606,7 +606,7 @@ button.rbc-input::-moz-focus-inner {
 }
 
 .rbc-timeslot-group {
-  border-bottom: 1px solid #8d8d8d; /*#ddd*/
+  border-bottom: 1px solid var(--color-neutral-300); /*#ddd*/
   min-height: 40px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -624,7 +624,7 @@ button.rbc-input::-moz-focus-inner {
   flex: none;
 
   /*Own changes 07*/
-  background-color: #8d8d8d;
+  background-color: var(--color-neutral-500);
   /*Own changes 07*/
 }
 
@@ -686,7 +686,7 @@ button.rbc-input::-moz-focus-inner {
   min-height: 1em;
 }
 .rbc-day-slot .rbc-time-slot {
-  border-top: 1px solid #383838; /*#f7f7f7*/
+  border-top: 1px solid transparent; /*#f7f7f7*/
 }
 
 .rbc-time-view-resources .rbc-time-gutter,
@@ -782,7 +782,7 @@ button.rbc-input::-moz-focus-inner {
   position: relative;
 
   /*Own changes 05*/
-  background-color: #555555;
+  background-color: var(--color-neutral-500);
   /*Own changes 05*/
 }
 .rbc-time-view .rbc-allday-cell + .rbc-allday-cell {
@@ -872,7 +872,7 @@ button.rbc-input::-moz-focus-inner {
 }
 
 .rbc-time-header-content {
-  border-bottom: 2px solid #717171; /*#ddd*/
+  border-bottom: 2px solid var(--color-neutral-400); /*#ddd*/
 }
 
 .rbc-time-column :last-child {
@@ -890,7 +890,7 @@ button.rbc-input::-moz-focus-inner {
   /*Own changes 09*/
 }
 .rbc-time-content > * + * > * {
-  border-left: 1px solid #c6c6c6; /*#ddd*/
+  border-left: 1px solid var(--color-neutral-300); /*#ddd*/
 }
 .rbc-rtl .rbc-time-content > * + * > * {
   border-left-width: 0;

From 6c734f2d19d8f1839f44b62859dc13630203e128 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Fri, 27 Jun 2025 10:06:57 +0200
Subject: [PATCH 2/5] style: improve layout and responsiveness of custom
 toolbar

---
 src/app/(main)/home/page.tsx      | 12 +++++++-----
 src/components/custom-toolbar.css | 20 +++++++++++++++++---
 src/components/custom-toolbar.tsx |  7 ++-----
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx
index 1cf8a90..a3f904d 100644
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@@ -7,11 +7,13 @@ export default function Home() {
   const { data } = useGetApiUserMe();
 
   return (
-    <div className='max-h-full'>
-      <Calendar
-        userId={data?.data.user?.id}
-        height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
-      />
+    <div className='max-h-full flex justify-center items-center'>
+      <div className='w-full sm:w-[90%]'>
+        <Calendar
+          userId={data?.data.user?.id}
+          height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/custom-toolbar.css b/src/components/custom-toolbar.css
index 9721364..37a2a4d 100644
--- a/src/components/custom-toolbar.css
+++ b/src/components/custom-toolbar.css
@@ -1,10 +1,14 @@
 /* Container der Toolbar */
 .custom-toolbar {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  gap: 8px;
   padding: calc(var(--spacing) * 2);
   padding-left: calc(50px + var(--spacing));
+
+  @media (max-width: 870px) {
+    padding-left: 0;
+    flex-direction: column;
+  }
   box-shadow: none;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
@@ -25,6 +29,7 @@
   display: flex;
   gap: 8px;
   justify-content: center;
+  align-items: center;
 }
 
 .custom-toolbar .navigation-controls button {
@@ -77,6 +82,8 @@
   border-radius: 11px;
   justify-items: center;
   align-items: center;
+  display: flex;
+  gap: 8px;
 }
 
 .custom-toolbar .navigation-controls .handleWeek button {
@@ -93,6 +100,9 @@
   padding: 0 8px;
   border-radius: 11px;
   justify-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .right-section .datepicker-box {
@@ -100,8 +110,12 @@
   background-color: #c6c6c6;
   height: 36px;
   border-radius: 11px;
-  font-size: 12px;
+  font-size: 14px;
   align-self: center;
+  font-family: 'Varela Round', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .datepicker {
diff --git a/src/components/custom-toolbar.tsx b/src/components/custom-toolbar.tsx
index 36c8fff..76e59ee 100644
--- a/src/components/custom-toolbar.tsx
+++ b/src/components/custom-toolbar.tsx
@@ -171,12 +171,9 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({
   };
 
   return (
-    <div
-      className='custom-toolbar'
-      style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
-    >
+    <div className='custom-toolbar'>
       <div className='view-change'>
-        <div className='view-switcher' style={{ display: 'flex', gap: '8px' }}>
+        <div className='view-switcher'>
           <Button
             //className='hover:bg-orange-600 hover:text-white'
             type='submit'

From 92be324186ebdb2cee0a2892d12e59c92853f71e Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Fri, 27 Jun 2025 10:36:40 +0200
Subject: [PATCH 3/5] style: update home page

---
 src/app/(main)/home/page.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/(main)/home/page.tsx b/src/app/(main)/home/page.tsx
index a3f904d..38237f6 100644
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@@ -4,10 +4,21 @@ import Calendar from '@/components/calendar';
 import { useGetApiUserMe } from '@/generated/api/user/user';
 
 export default function Home() {
-  const { data } = useGetApiUserMe();
+  const { data, isLoading } = useGetApiUserMe();
 
   return (
-    <div className='max-h-full flex justify-center items-center'>
+    <div className='grid grid-cols-1 w-full place-items-center'>
+      <div className='w-full sm:w-[90%] mb-4'>
+        <h1 className='text-2xl font-bold text-center'>
+          Welcome, <wbr />
+          <span style={{ whiteSpace: 'nowrap' }}>
+            {isLoading
+              ? 'Loading...'
+              : data?.data.user?.first_name || 'Unknown User'}{' '}
+            &#128075;
+          </span>
+        </h1>
+      </div>
       <div className='w-full sm:w-[90%]'>
         <Calendar
           userId={data?.data.user?.id}

From 70fad4de73f2357741d26975e7648f9cd82f9aa1 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Fri, 27 Jun 2025 10:38:47 +0200
Subject: [PATCH 4/5] style: fix calender topbar width

---
 src/components/react-big-calendar.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/react-big-calendar.css b/src/components/react-big-calendar.css
index ee7afdd..88f3d78 100644
--- a/src/components/react-big-calendar.css
+++ b/src/components/react-big-calendar.css
@@ -630,6 +630,7 @@ button.rbc-input::-moz-focus-inner {
 
 .rbc-label {
   padding: 0 5px;
+  width: 54.3542px;
 }
 
 .rbc-day-slot {
@@ -809,6 +810,10 @@ button.rbc-input::-moz-focus-inner {
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
+  margin-right: 14px;
+  @media ((hover: none) and (pointer: coarse)) {
+    margin-right: 0px;
+  }
 }
 .rbc-rtl .rbc-time-header.rbc-overflowing {
   border-right-width: 0;

From a563031f91b7afce260e6f8da0d3eef5ba7040ea Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Fri, 27 Jun 2025 10:39:49 +0200
Subject: [PATCH 5/5] style: remove ThemePicker from NewEvent component

---
 src/app/(main)/events/new/page.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/(main)/events/new/page.tsx b/src/app/(main)/events/new/page.tsx
index 2db7ae2..997a9d6 100644
--- a/src/app/(main)/events/new/page.tsx
+++ b/src/app/(main)/events/new/page.tsx
@@ -1,4 +1,3 @@
-import { ThemePicker } from '@/components/misc/theme-picker';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import EventForm from '@/components/forms/event-form';
 import { Suspense } from 'react';
@@ -6,7 +5,6 @@ import { Suspense } from 'react';
 export default function NewEvent() {
   return (
     <div className='flex flex-col items-center justify-center h-screen'>
-      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
       <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
         <CardHeader className='p-0 m-0 gap-0' />