Refresh calendar (#188)

* Beautify the calendar * Change text to xs on calendar
deschutesdesigngroupllc · Sep 28, 2024 · f138405 · f138405
1 parent 0645211
commit f138405
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 54 deletions.
diff --git a/src/app/(auth)/calendar/_components/calendar.js b/src/app/(auth)/calendar/_components/calendar.js
@@ -74,7 +74,7 @@ export function Calendar({ events }) {
 
   return (
     <Card>
-      <div className="rounded-md bg-gray-50 dark:bg-gray-700">
+      <div className="rounded-md bg-gray-50 dark:bg-[#09090B]">
         <div className="lg:flex lg:h-full lg:flex-col">
           <Header {...headerProps} />
           <div

diff --git a/src/app/(auth)/calendar/_components/days.js b/src/app/(auth)/calendar/_components/days.js
@@ -132,17 +132,17 @@ export function Days({ currentMonth, handleDayEventSelect, events }) {
                   <div
                     key={dayIndex}
                     className={cx('relative min-h-40 px-3 py-2', {
-                      'bg-white dark:bg-gray-800': day.isCurrentMonth,
-                      'bg-gray-50 dark:bg-gray-700': !day.isCurrentMonth,
+                      'bg-white dark:bg-gray-900': day.isCurrentMonth,
+                      'bg-gray-50 dark:bg-gray-800': !day.isCurrentMonth,
                       'rounded-bl-lg': dayIndex === 0 && weekIndex === arrayOfWeeks.length - 1,
                       'rounded-br-lg':
                         dayIndex === week.dates.length - 1 && weekIndex === arrayOfWeeks.length - 1
                     })}
                   >
                     <time
                       dateTime={day.date}
-                      className={cx({
-                        'flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 font-semibold text-white':
+                      className={cx('dark:text-gray-400', {
+                        'flex h-6 w-6 items-center justify-center rounded-full bg-blue-600 font-semibold text-white dark:text-white':
                           day.isCurrentDay
                       })}
                     >
@@ -200,8 +200,8 @@ export function Days({ currentMonth, handleDayEventSelect, events }) {
                   className={cx(
                     'flex h-14 flex-col px-3 py-2 hover:bg-gray-100 focus:z-10 focus-visible:outline-none dark:hover:bg-gray-900',
                     {
-                      'bg-white dark:bg-gray-800': day.isCurrentMonth,
-                      'bg-gray-50 dark:bg-gray-700': !day.isCurrentMonth,
+                      'bg-white dark:bg-gray-900': day.isCurrentMonth,
+                      'bg-gray-50 dark:bg-gray-800': !day.isCurrentMonth,
                       'font-semibold': day.isSelected || day.isCurrentDay,
                       'text-white': day.isSelected,
                       'text-blue-600': !day.isSelected && day.isCurrentDay,
@@ -219,7 +219,7 @@ export function Days({ currentMonth, handleDayEventSelect, events }) {
                 >
                   <time
                     dateTime={day.date}
-                    className={cx('ml-auto', {
+                    className={cx('ml-auto dark:text-gray-400', {
                       'flex h-6 w-6 items-center justify-center rounded-full': day.isSelected,
                       'bg-blue-600': day.isSelected && day.isCurrentDay,
                       'bg-gray-900': day.isSelected && !day.isCurrentDay

diff --git a/src/app/(auth)/calendar/_components/events.js b/src/app/(auth)/calendar/_components/events.js
@@ -6,31 +6,31 @@ import {
   InformationCircleIcon,
   MapIcon
 } from '@heroicons/react/20/solid';
-import { Modal, ModalBody, ModalHeader } from 'flowbite-react';
+import { Modal, ModalBody, ModalHeader } from '../../../../components/modal';
 
 export function Events({ selectedDay, selectedEvent, modalState, setModalState }) {
   return (
     <>
       {selectedDay.events && !!selectedDay.events.length && (
-        <div className="px-4 py-10 sm:px-6 lg:hidden">
-          <ol className="divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-gray-800">
+        <div className="p-6 lg:hidden">
+          <ol className="divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-xs shadow ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-gray-900">
             {selectedDay.events.map((event) => (
               <li
                 key={event.id}
                 className="group flex p-4 pr-6 hover:bg-gray-50 dark:hover:bg-gray-900"
               >
                 <a href="#">
                   <div className="flex flex-col space-y-2">
-                    <div className="font-bold">{event.name}</div>
+                    <div className="text-sm font-bold dark:text-white">{event.name}</div>
                     {event.description && (
-                      <div dangerouslySetInnerHTML={{ __html: event.description }}></div>
+                      <div
+                        className="pb-4 text-gray-500 dark:text-gray-400"
+                        dangerouslySetInnerHTML={{ __html: event.description }}
+                      ></div>
                     )}
                     {!event.allDay && (
-                      <div className="flex items-center">
-                        <ClockIcon
-                          className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500"
-                          aria-hidden="true"
-                        />
+                      <div className="flex items-center text-gray-500 dark:text-gray-400">
+                        <ClockIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden="true" />
                         {event.start && (
                           <time dateTime={event.start.format('YYYY-MM-DD HH:mm:ss')}>
                             {event.start.format('h:mm A')}
@@ -45,27 +45,21 @@ export function Events({ selectedDay, selectedEvent, modalState, setModalState }
                       </div>
                     )}
                     {event.calendar && (
-                      <div className="flex items-center">
-                        <CalendarDaysIcon
-                          className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500"
-                          aria-hidden="true"
-                        />
+                      <div className="flex items-center text-gray-500 dark:text-gray-400">
+                        <CalendarDaysIcon className="mr-2 h-5 w-5" aria-hidden="true" />
                         {event.calendar}
                       </div>
                     )}
                     {event.location && (
-                      <div className="flex items-center">
-                        <MapIcon
-                          className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500"
-                          aria-hidden="true"
-                        />
+                      <div className="flex items-center text-gray-500 dark:text-gray-400">
+                        <MapIcon className="mr-2 h-5 w-5" aria-hidden="true" />
                         {event.location}
                       </div>
                     )}
                     {event.details && (
-                      <div className="flex items-center">
+                      <div className="flex items-center text-gray-500 dark:text-gray-400">
                         <InformationCircleIcon
-                          className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500"
+                          className="mr-2 h-5 w-5 flex-shrink-0"
                           aria-hidden="true"
                         />
                         {event.details}
@@ -79,54 +73,57 @@ export function Events({ selectedDay, selectedEvent, modalState, setModalState }
         </div>
       )}
       <Modal dismissible show={modalState} onClose={() => setModalState(false)}>
-        <ModalHeader>{selectedEvent.name}</ModalHeader>
+        <ModalHeader theme={{}}>{selectedEvent.name}</ModalHeader>
         <ModalBody>
-          <div className="flex flex-col space-y-2 text-sm">
+          <div className="flex flex-col space-y-2 text-xs">
             {selectedEvent.description && (
-              <div dangerouslySetInnerHTML={{ __html: selectedEvent.description }}></div>
+              <div
+                className="pb-4 dark:text-gray-400"
+                dangerouslySetInnerHTML={{ __html: selectedEvent.description }}
+              ></div>
             )}
             {!selectedEvent.allDay && (
               <div className="flex items-center">
                 <ClockIcon
-                  className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500"
+                  className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500 dark:text-gray-400"
                   aria-hidden="true"
                 />
                 {selectedEvent.start && (
-                  <time dateTime={selectedEvent.start.format('YYYY-MM-DD HH:mm')}>
+                  <time
+                    className="dark:text-gray-400"
+                    dateTime={selectedEvent.start.format('YYYY-MM-DD HH:mm')}
+                  >
                     {selectedEvent.start.format('h:mm A')}
                   </time>
                 )}
                 {selectedEvent.end && (
                   <>
                     &nbsp;-&nbsp;
-                    <time dateTime={selectedEvent.end.format('YYYY-MM-DD HH:mm')}>
+                    <time
+                      className="dark:text-gray-400"
+                      dateTime={selectedEvent.end.format('YYYY-MM-DD HH:mm')}
+                    >
                       {selectedEvent.end.format('h:mm A')}
                     </time>
                   </>
                 )}
               </div>
             )}
             {selectedEvent.calendar && (
-              <div className="flex items-center">
-                <CalendarDaysIcon
-                  className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500"
-                  aria-hidden="true"
-                />
+              <div className="flex items-center text-gray-500 dark:text-gray-400">
+                <CalendarDaysIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden="true" />
                 {selectedEvent.calendar}
               </div>
             )}
             {selectedEvent.location && (
-              <div className="flex items-center">
-                <MapIcon className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500" aria-hidden="true" />
+              <div className="flex items-center text-gray-500 dark:text-gray-400">
+                <MapIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden="true" />
                 {selectedEvent.location}
               </div>
             )}
             {selectedEvent.details && (
-              <div className="flex items-center">
-                <InformationCircleIcon
-                  className="mr-2 h-5 w-5 flex-shrink-0 text-gray-500"
-                  aria-hidden="true"
-                />
+              <div className="flex items-center text-gray-500 dark:text-gray-400">
+                <InformationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden="true" />
                 {selectedEvent.details}
               </div>
             )}

diff --git a/src/app/(auth)/calendar/_components/header.js b/src/app/(auth)/calendar/_components/header.js
@@ -5,7 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
 export function Header({ currentMonth, previousMonth, goToToday, nextMonth }) {
   return (
     <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-600 lg:flex-none">
-      <div className="text-xs font-bold uppercase dark:text-gray-400">
+      <div className="text-xs font-bold uppercase text-gray-950 dark:text-white">
         <time dateTime={currentMonth.format('YYYY-MM')}>{currentMonth.format('MMMM YYYY')}</time>
       </div>
       <div className="flex items-center">
@@ -20,7 +20,7 @@ export function Header({ currentMonth, previousMonth, goToToday, nextMonth }) {
           </button>
           <button
             type="button"
-            className="hidden border-y border-gray-300 px-3.5 text-sm font-semibold text-gray-950 hover:bg-gray-50 focus:relative dark:border-gray-900 dark:text-gray-400 dark:hover:bg-gray-900 md:block"
+            className="hidden border-y border-gray-300 px-3.5 text-sm font-semibold text-gray-950 hover:bg-gray-50 focus:relative dark:border-gray-900 dark:text-white dark:hover:bg-gray-900 md:block"
             onClick={() => goToToday()}
           >
             Today

diff --git a/src/app/(auth)/calendar/_components/weekdays.js b/src/app/(auth)/calendar/_components/weekdays.js
@@ -7,7 +7,7 @@ export function Weekdays({ now }) {
   }
 
   return (
-    <div className="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold dark:border-gray-700 dark:bg-gray-700 lg:flex-none">
+    <div className="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold text-gray-950 dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:flex-none">
       {weekDays &&
         !!weekDays.length &&
         weekDays.map((weekDay) => {

diff --git a/src/app/page.js b/src/app/page.js
@@ -35,6 +35,12 @@ export default function Page() {
             >
               Awards
             </Link>
+            <Link
+              href={'/calendar'}
+              className="inline-flexclassNames-center group w-full justify-center rounded-full bg-gray-100 px-4 py-2 text-center text-sm font-semibold hover:bg-gray-50 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white active:bg-gray-200 active:text-gray-600"
+            >
+              Calendar
+            </Link>
             <Link
               href={'/forms'}
               className="inline-flexclassNames-center group w-full justify-center rounded-full bg-gray-100 px-4 py-2 text-center text-sm font-semibold hover:bg-gray-50 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white active:bg-gray-200 active:text-gray-600"

diff --git a/src/components/modal.js b/src/components/modal.js
@@ -0,0 +1,47 @@
+import cx from 'classnames';
+import {
+  Modal as FlowbiteModal,
+  ModalBody as FlowbiteModalBody,
+  ModalHeader as FlowbiteModalHeader
+} from 'flowbite-react';
+
+export function ModalHeader(props) {
+  return (
+    <FlowbiteModalHeader
+      className={cx(props.className, 'text-xs')}
+      {...(({ children, ...o }) => o)(props)}
+    >
+      {props.children}
+    </FlowbiteModalHeader>
+  );
+}
+
+export function ModalBody(props) {
+  return (
+    <FlowbiteModalBody
+      className={cx(props.className, 'text-xs')}
+      {...(({ children, ...o }) => o)(props)}
+    >
+      {props.children}
+    </FlowbiteModalBody>
+  );
+}
+
+export function Modal(props) {
+  return (
+    <FlowbiteModal
+      className={cx(props.className, 'text-xs')}
+      {...(({ children, ...o }) => o)(props)}
+      theme={{
+        content: {
+          inner: 'relative flex max-h-[90dvh] flex-col rounded-lg bg-white shadow dark:bg-gray-800'
+        },
+        header: {
+          base: 'flex items-start justify-between rounded-t border-b p-5 dark:border-gray-600 text-xs dark:bg-[#09090B]'
+        }
+      }}
+    >
+      {props.children}
+    </FlowbiteModal>
+  );
+}
diff --git a/src/lib/client.js b/src/lib/client.js
@@ -50,9 +50,6 @@ export default class Client {
       }
     };
 
-    console.debug('API Url: ' + environment);
-    console.debug('API Key: ' + apiKey);
-
     const url = new URL(apiUrl() + endpoint);
 
     if (params) {