Merge pull request 'refactor: optimise calendar component for light mode' (#110)

Reviewed-on: #110
Reviewed-by: Dominik <mail@dominikstahl.dev>

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' />
 

src/app/(main)/home/page.tsx

@@ -4,14 +4,27 @@ 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'>
+    <div className='grid grid-cols-1 w-full place-items-center'>
-      <Calendar
+      <div className='w-full sm:w-[90%] mb-4'>
-        userId={data?.data.user?.id}
+        <h1 className='text-2xl font-bold text-center'>
-        height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
+          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}
+          height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
+        />
+      </div>
     </div>
   );
 }

src/components/custom-toolbar.css

@@ -1,11 +1,15 @@
 /* Container der Toolbar */
 .custom-toolbar {
   display: flex;
-  flex-direction: column;
+  gap: 8px;
-  gap: 12px;
   padding: calc(var(--spacing) * 2);
   padding-left: calc(50px + var(--spacing));
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  @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 {

src/components/custom-toolbar.tsx

@@ -171,12 +171,9 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({
   };
 
   return (
-    <div
+    <div className='custom-toolbar'>
-      className='custom-toolbar'
-      style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
-    >
       <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'

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,12 +624,13 @@ button.rbc-input::-moz-focus-inner {
   flex: none;
 
   /*Own changes 07*/
-  background-color: #8d8d8d;
+  background-color: var(--color-neutral-500);
   /*Own changes 07*/
 }
 
 .rbc-label {
   padding: 0 5px;
+  width: 54.3542px;
 }
 
 .rbc-day-slot {
@@ -686,7 +687,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 +783,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 {
@@ -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;
@@ -872,7 +877,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 +895,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;