chore: update shifts data

components/CalendarExportModal/CalendarExportModal.tsx

@@ -138,7 +138,7 @@ const CalendarExportModal = ({
       >
         <Fade in={isOpen} timeout={400}>
           <Box
-            className="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto rounded-2xl border dark:border-neutral-400/20 bg-white dark:bg-neutral-800 p-6 text-center shadow-xl sm:w-96"
+            className="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto rounded-2xl border bg-white p-6 text-center shadow-xl dark:border-neutral-400/20 dark:bg-neutral-800 sm:w-96"
             style={{
               maxHeight: "calc(100% - 4rem)",
               maxWidth: "calc(100% - 4rem)",
@@ -167,7 +167,7 @@ const CalendarExportModal = ({
                           className="relative flex flex-grow items-stretch focus-within:z-10"
                           style={{ width: "calc(100% - 38px)" }}
                         >
-                          <div className="block w-full rounded-none rounded-l-lg border-0 py-1.5  ring-1 ring-inset ring-neutral-300 dark:ring-neutral-400/30 focus:ring-2 focus:ring-inset focus:ring-cesium-900 sm:text-sm sm:leading-6">
+                          <div className="block w-full rounded-none rounded-l-lg border-0 py-1.5  ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-inset focus:ring-cesium-900 dark:ring-neutral-400/30 sm:text-sm sm:leading-6">
                             <div className="mx-2 overflow-y-hidden overflow-x-scroll whitespace-nowrap text-start">
                               {URL}
                             </div>
@@ -176,7 +176,7 @@ const CalendarExportModal = ({
                         <button
                           type="button"
                           title={isCopied ? "Copied" : "Copy"}
-                          className="relative -ml-px inline-flex w-[38px] place-content-center items-center gap-x-1.5 rounded-r-lg px-3 py-2 text-sm font-semibold  ring-1 ring-inset ring-neutral-300 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10 hover:bg-neutral-50"
+                          className="relative -ml-px inline-flex w-[38px] place-content-center items-center gap-x-1.5 rounded-r-lg px-3 py-2 text-sm font-semibold  ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10"
                           onClick={copyToClipboard}
                         >
                           {isCopied ? (
@@ -188,7 +188,7 @@ const CalendarExportModal = ({
                       </div>
                     </div>
                   </span>
-                  <Collapse className="w-full rounded-lg border-neutral-300 bg-white dark:border-neutral-400/30 text-left font-display shadow-sm">
+                  <Collapse className="w-full rounded-lg border-neutral-300 bg-white text-left font-display shadow-sm dark:border-neutral-400/30">
                     <Collapse.Panel header="How does it work?" key="1">
                       <div className="text-justify">
                         <p>

components/ClearScheduleButton/ClearScheduleButton.tsx

@@ -27,7 +27,7 @@ const ClearScheduleButton = ({
       disabled={isSettings}
     >
       <button
-        className={`h-10 w-10 rounded-xl p-2 font-medium leading-3 text-error/50 dark:text-red-400/60 shadow-md ring-1 ring-neutral-200/50 dark:ring-neutral-400/20 transition-all duration-300 hover:text-error hover:shadow-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-neutral-800/70 ${
+        className={`h-10 w-10 rounded-xl p-2 font-medium leading-3 text-error/50 shadow-md ring-1 ring-neutral-200/50 transition-all duration-300 hover:text-error hover:shadow-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-neutral-800/70 dark:text-red-400/60 dark:ring-neutral-400/20 ${
           isSettings && "cursor-not-allowed hover:text-error/50"
         }`}
         type="button"

components/DarkModeToggler/DarkModeToggler.tsx

@@ -1,31 +1,43 @@
-import { Switch } from '@headlessui/react'
-import { useTheme } from 'next-themes';
+import { Switch } from "@headlessui/react";
+import { useTheme } from "next-themes";
 
 function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
-  }
+  return classes.filter(Boolean).join(" ");
+}
 
 const DarkModeToggler = () => {
-    const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
 
-    return (
-        <div>
-            <label className="block text-sm font-medium leading-6">
-                Appearance
-            </label>
-            <select
-                id="theme"
-                name="theme"
-                className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10  ring-1 ring-inset ring-neutral-300 dark:ring-neutral-400/20 focus:ring-2 focus:ring-cesium-900 dark:bg-neutral-800"
-                value={theme === "light" ? "Light" : theme === "dark" ? "Dark" : "Follow System"}
-                onChange={(e) => setTheme(e.target.value === "Light" ? "light" : e.target.value === "Dark" ? "dark" : "system")}
-                >
-                    <option>Follow System</option>
-                    <option>Dark</option>
-                    <option>Light</option>                
-            </select>
-        </div>
-    )
-}
+  return (
+    <div>
+      <label className="block text-sm font-medium leading-6">Appearance</label>
+      <select
+        id="theme"
+        name="theme"
+        className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10  ring-1 ring-inset ring-neutral-300 focus:ring-2 focus:ring-cesium-900 dark:bg-neutral-800 dark:ring-neutral-400/20"
+        value={
+          theme === "light"
+            ? "Light"
+            : theme === "dark"
+            ? "Dark"
+            : "Follow System"
+        }
+        onChange={(e) =>
+          setTheme(
+            e.target.value === "Light"
+              ? "light"
+              : e.target.value === "Dark"
+              ? "dark"
+              : "system"
+          )
+        }
+      >
+        <option>Follow System</option>
+        <option>Dark</option>
+        <option>Light</option>
+      </select>
+    </div>
+  );
+};
 
 export default DarkModeToggler;

components/DarkModeToggler/index.ts

@@ -1 +1 @@
-export { default } from './DarkModeToggler';
+export { default } from "./DarkModeToggler";

components/EventModal/EventModal.tsx

@@ -59,11 +59,11 @@ function EventModal({
       >
         <Fade in={inspectEvent} timeout={400}>
           <Box
-            className="absolute left-1/2 top-1/2 h-fit w-fit min-w-[18rem] max-w-full -translate-x-1/2 -translate-y-1/2 transform rounded-2xl border border-neutral-200 bg-white dark:bg-neutral-800 dark:border-neutral-400/20 p-6 text-center shadow-xl"
+            className="absolute left-1/2 top-1/2 h-fit w-fit min-w-[18rem] max-w-full -translate-x-1/2 -translate-y-1/2 transform rounded-2xl border border-neutral-200 bg-white p-6 text-center shadow-xl dark:border-neutral-400/20 dark:bg-neutral-800"
             style={{ maxWidth: "calc(100% - 4rem)" }}
           >
             <div className="space-y-4 font-display">
-              <div className="m-auto w-fit border-b dark:border-neutral-400/30 pb-4">
+              <div className="m-auto w-fit border-b pb-4 dark:border-neutral-400/30">
                 <span id="modal-modal-title" className="text-xl font-medium">
                   {selectedEvent.title}
                 </span>

components/ExportButton/ExportButton.tsx

@@ -32,7 +32,7 @@ const ExportButton = ({ exportPDF, isHome, filters }: ExportButtonProps) => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 z-10 mt-2 w-fit origin-top-right overflow-hidden rounded-xl bg-white dark:bg-neutral-800 font-medium text-cesium-900 dark:text-cesium-600 shadow-lg ring-1 ring-black  dark:ring-white/20 ring-opacity-5 focus:outline-none">
+          <Menu.Items className="absolute right-0 z-10 mt-2 w-fit origin-top-right overflow-hidden rounded-xl bg-white font-medium text-cesium-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  dark:bg-neutral-800 dark:text-cesium-600 dark:ring-white/20">
             <div className="grid grid-cols-1 py-1">
               <Menu.Item>
                 {({ active }) => (

components/FilterBlock/FilterBlock.tsx

@@ -279,7 +279,7 @@ const FilterBlock = ({
   return (
     <div className="select-none rounded-xl ring-1 ring-neutral-100/50 dark:ring-neutral-400/20">
       <Collapse
-        className="w-full rounded-xl bg-white dark:bg-neutral-800/70 font-display font-medium shadow-default"
+        className="w-full rounded-xl bg-white font-display font-medium shadow-default dark:bg-neutral-800/70"
         bordered={false}
         accordion
       >
@@ -292,7 +292,7 @@ const FilterBlock = ({
               />
               <Collapse.Panel header={item1} key={item1 + "Panel"}>
                 <Collapse
-                  className="bg-white dark:bg-inherit font-display font-medium"
+                  className="bg-white font-display font-medium dark:bg-inherit"
                   bordered={false}
                   accordion
                   key={item1 + "Collapse"}
@@ -310,7 +310,7 @@ const FilterBlock = ({
                           key={item1 + item2 + "Panel"}
                         >
                           <Collapse
-                            className="bg-white dark:bg-inherit font-display font-normal"
+                            className="bg-white font-display font-normal dark:bg-inherit"
                             bordered={false}
                             accordion
                             key={item1 + item2 + "Collapse"}

components/Install/Install.tsx

@@ -14,7 +14,7 @@ const Install = () => {
       </label>
       <button
         onClick={() => setIsModalOpen(true)}
-        className="mt-2 rounded-lg bg-cesium-100 dark:bg-cesium-700/20 dark:hover:bg-cesium-700/30 p-2 font-medium text-cesium-900 shadow-sm transition-colors hover:bg-cesium-200"
+        className="mt-2 rounded-lg bg-cesium-100 p-2 font-medium text-cesium-900 shadow-sm transition-colors hover:bg-cesium-200 dark:bg-cesium-700/20 dark:hover:bg-cesium-700/30"
       >
         Install <i className="bi bi-download" />
       </button>
@@ -28,7 +28,7 @@ const Install = () => {
       >
         <Fade in={isModalOpen} timeout={400}>
           <Box
-            className="absolute left-1/2 top-1/2 h-fit w-full min-w-[18rem] max-w-full -translate-x-1/2 -translate-y-1/2 transform rounded-2xl border border-neutral-200 bg-white dark:bg-neutral-800 dark:border-neutral-400/20 p-6 text-center shadow-xl sm:w-80"
+            className="absolute left-1/2 top-1/2 h-fit w-full min-w-[18rem] max-w-full -translate-x-1/2 -translate-y-1/2 transform rounded-2xl border border-neutral-200 bg-white p-6 text-center shadow-xl dark:border-neutral-400/20 dark:bg-neutral-800 sm:w-80"
             style={{
               maxHeight: "calc(100% - 4rem)",
               maxWidth: "calc(100% - 4rem)",

components/Layout/Layout.tsx

@@ -25,26 +25,34 @@ const Layout = ({
   saveTheme,
 }: ILayoutProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const hamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300 dark:bg-neutral-200 bg-neutral-900`; 
+  const hamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300 dark:bg-neutral-200 bg-neutral-900`;
   const { resolvedTheme } = useTheme();
   const [logo, setLogo] = useState(null);
 
   // necesary so logo renders only on the client
-  useEffect(() => setLogo(
-    <picture>
-      <img
-        className="h-[46px] w-auto"
-        src={resolvedTheme === "dark" ? "/calendarium-dark.svg" : "/calendarium-light.svg"}
-        alt="Calendarium Logo"
-      />
-    </picture>
-  ), [resolvedTheme]);
+  useEffect(
+    () =>
+      setLogo(
+        <picture>
+          <img
+            className="h-[46px] w-auto"
+            src={
+              resolvedTheme === "dark"
+                ? "/calendarium-dark.svg"
+                : "/calendarium-light.svg"
+            }
+            alt="Calendarium Logo"
+          />
+        </picture>
+      ),
+    [resolvedTheme]
+  );
 
   return (
-    <div className="text-neutral-900 lg:flex dark:bg-neutral-900 dark:text-neutral-200">
+    <div className="text-neutral-900 dark:bg-neutral-900 dark:text-neutral-200 lg:flex">
       {/* Open/Close Sidebar Button */}
       <button
-        className="group absolute z-20 ml-8 mt-8 flex h-12 w-12 flex-col items-center justify-center rounded-xl bg-white dark:bg-neutral-800/70 shadow-md ring-1 ring-neutral-100/50 dark:ring-neutral-400/20 lg:hidden"
+        className="group absolute z-20 ml-8 mt-8 flex h-12 w-12 flex-col items-center justify-center rounded-xl bg-white shadow-md ring-1 ring-neutral-100/50 dark:bg-neutral-800/70 dark:ring-neutral-400/20 lg:hidden"
         onClick={() => setIsOpen(!isOpen)}
       >
         <div
@@ -76,9 +84,7 @@ const Layout = ({
         <div
           style={{ cursor: "pointer", width: "fit-content", margin: "auto" }}
         >
-          <Link href="/">
-            {logo}
-          </Link>
+          <Link href="/">{logo}</Link>
         </div>
       </div>
 

components/NavigationPane/NavigationPane.tsx

@@ -5,14 +5,14 @@ const NavigationPane = () => {
   const { asPath } = useRouter();
 
   return (
-    <div className="rounded-xl font-display ring-1 ring-neutral-100/50 dark:ring-neutral-400/20 dark:bg-neutral-800/70">
-      <div className="flex w-full place-content-between rounded-xl p-5 font-medium text-neutral-300 dark:text-neutral-500 shadow-default transition-all">
+    <div className="rounded-xl font-display ring-1 ring-neutral-100/50 dark:bg-neutral-800/70 dark:ring-neutral-400/20">
+      <div className="flex w-full place-content-between rounded-xl p-5 font-medium text-neutral-300 shadow-default transition-all dark:text-neutral-500">
         <div className="m-auto w-fit space-x-8">
           <Link href="/">
             <span
               className={`${
                 asPath === "/" &&
-                "text-neutral-900 dark:text-neutral-200 after:absolute after:ml-4 after:mt-4 after:flex after:h-1 after:w-12 after:rounded-t after:bg-cesium-900"
+                "text-neutral-900 after:absolute after:ml-4 after:mt-4 after:flex after:h-1 after:w-12 after:rounded-t after:bg-cesium-900 dark:text-neutral-200"
               } transition-all hover:text-neutral-900 dark:hover:text-neutral-200`}
             >
               <i className="bi bi-calendar-fill"></i> EVENTS
@@ -22,7 +22,7 @@ const NavigationPane = () => {
             <span
               className={`${
                 asPath === "/schedule" &&
-                "text-neutral-900 dark:text-neutral-200 after:absolute after:ml-36 after:mt-4 after:flex after:h-1 after:w-12 after:rounded-t after:bg-cesium-900"
+                "text-neutral-900 after:absolute after:ml-36 after:mt-4 after:flex after:h-1 after:w-12 after:rounded-t after:bg-cesium-900 dark:text-neutral-200"
               } transition-all hover:text-neutral-900 dark:hover:text-neutral-200`}
             >
               <i className="bi bi-clock-fill"></i> SCHEDULE

components/Settings/Settings.tsx

@@ -20,7 +20,7 @@ const Settings = ({
   isHome,
 }: SettingsProps) => {
   return (
-    <div className="h-full w-full select-none space-y-4 overflow-hidden rounded-xl p-4 shadow-default ring-1 ring-neutral-200/30 dark:ring-neutral-400/20 dark:bg-neutral-800/70">
+    <div className="h-full w-full select-none space-y-4 overflow-hidden rounded-xl p-4 shadow-default ring-1 ring-neutral-200/30 dark:bg-neutral-800/70 dark:ring-neutral-400/20">
       {/* Title */}
       <div className="text-center text-lg font-medium">Settings</div>
       <div className="border-b border-neutral-200/80 dark:border-neutral-400/30" />

components/ShareButton/ShareButton.tsx

@@ -24,7 +24,7 @@ const ShareButton = ({
   return (
     <div>
       <button
-        className="h-10 w-10 rounded-xl p-2 font-medium leading-3 text-neutral-300 dark:text-neutral-500 shadow-md ring-1 ring-neutral-200/50 dark:ring-neutral-400/20 transition-all duration-300 hover:text-neutral-900 dark:hover:text-neutral-200 hover:shadow-lg dark:bg-neutral-800/70"
+        className="h-10 w-10 rounded-xl p-2 font-medium leading-3 text-neutral-300 shadow-md ring-1 ring-neutral-200/50 transition-all duration-300 hover:text-neutral-900 hover:shadow-lg dark:bg-neutral-800/70 dark:text-neutral-500 dark:ring-neutral-400/20 dark:hover:text-neutral-200"
         title="Share"
         onClick={() => setIsModalOpen(true)}
       >

components/ShareModal/ShareModal.tsx

@@ -208,7 +208,7 @@ const ShareModal = ({
       >
         <Fade in={isOpen} timeout={400}>
           <Box
-            className="absolute left-1/2 top-1/2 h-fit w-80 -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto rounded-2xl border bg-white dark:bg-neutral-800 dark:border-neutral-400/20 p-6 text-center shadow-xl"
+            className="absolute left-1/2 top-1/2 h-fit w-80 -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto rounded-2xl border bg-white p-6 text-center shadow-xl dark:border-neutral-400/20 dark:bg-neutral-800"
             style={{
               maxHeight: "calc(100% - 4rem)",
               maxWidth: "calc(100% - 4rem)",
@@ -232,13 +232,13 @@ const ShareModal = ({
                       <div className="relative flex flex-grow items-stretch focus-within:z-10">
                         <input
                           name="link"
-                          className="block w-full rounded-none rounded-l-lg border-0 py-1.5 ring-1 ring-inset ring-neutral-300 dark:ring-neutral-400/30 dark:bg-neutral-800 placeholder:text-neutral-400 focus:ring-2 focus:ring-inset focus:ring-cesium-900 sm:text-sm sm:leading-6"
+                          className="block w-full rounded-none rounded-l-lg border-0 py-1.5 ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 focus:ring-2 focus:ring-inset focus:ring-cesium-900 dark:bg-neutral-800 dark:ring-neutral-400/30 sm:text-sm sm:leading-6"
                           placeholder="Insert a share link here..."
                         />
                       </div>
                       <button
                         type="submit"
-                        className="relative -ml-px inline-flex w-[38px] place-content-center items-center gap-x-1.5 rounded-r-lg px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-neutral-300 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10 hover:bg-neutral-50"
+                        className="relative -ml-px inline-flex w-[38px] place-content-center items-center gap-x-1.5 rounded-r-lg px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10"
                         title="Import"
                       >
                         {isImporting ? (
@@ -274,7 +274,7 @@ const ShareModal = ({
                     </form>
                     <button
                       type="button"
-                      className="relative ml-2 inline-flex items-center rounded-lg px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10 hover:bg-neutral-50"
+                      className="relative ml-2 inline-flex items-center rounded-lg px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 dark:ring-neutral-400/30 dark:hover:bg-neutral-400/10"
                       title="Copy your share link"
                       onClick={copyToClipboard}
                     >