Merge pull request #2 from EnergySage/color-scheme

feat: use the light theme only
EnergySage · Sep 30, 2024 · c5bf732 · c5bf732
2 parents 4676c1a + 12dba59
commit c5bf732
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 7 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -7,14 +7,16 @@
     <title>Site Visit Scheduling</title>
     <script>
       // handle theme color scheme
-      if (
+      // TODO: Color Schemes - Revert this part which forces the light scheme when the dark one is ready.
+      /*if (
         (localStorage?.getItem('theme') === 'dark'
         || (!localStorage?.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches))
       ) {
         document.documentElement.classList.add('dark');
       } else {
         document.documentElement.classList.remove('dark');
-      }
+      }*/
+      document.documentElement.classList.remove('dark');
     </script>
   </head>
   <body class="h-screen bg-white text-gray-900 dark:bg-gray-700 dark:text-gray-100">

diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
@@ -558,7 +558,7 @@ This was a fancy layer class, but @apply in sfc with custom layer classes is a n
 .calendar-root-wrapper .calendar-header__mode-picker {
   @apply relative h-10 text-base font-semibold whitespace-nowrap rounded-lg
   md:px-2 transition-all ease-in-out flex items-center justify-center gap-2
-  text-white bg-blue-600 md:min-w-32;
+  shadow-light text-white bg-blue-600 md:min-w-32;
 }
 
 /* @apply doesn't seem to mesh well with states */

diff --git a/frontend/src/elements/PrimaryButton.vue b/frontend/src/elements/PrimaryButton.vue
@@ -33,7 +33,7 @@ const copyToClipboard = async () => {
     class="
       relative flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-lg
       bg-blue-600 px-6 text-base font-semibold text-white transition-all ease-in-out
-      hover:shadow-md enabled:hover:bg-blue-700
+      shadow-light enabled:hover:bg-blue-700
       disabled:bg-gray-200 disabled:text-gray-500 disabled:shadow-none
     "
     :class="{ '!text-transparent': waiting }"

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -377,7 +377,7 @@
     "bookingsWillAutomaticallyBeConfirmed": "Bookings will automatically be confirmed and added to your calendar.",
     "bookingsWillRequireToBeConfirmed": "You will need to confirm or decline bookings on your calendar.",
     "calendarDeletionWarning": "Removing this calendar will remove all appointments and schedules from Site Visit Scheduling. Any confirmed events currently stored in your calendar will not be removed.",
-    "chooseDateAndTime": "Choose when to meet.",
+    "chooseDateAndTime": "Select a free slot and schedule a site visit",
     "connectZoom": "Connect your Zoom account to generate instant meeting invites for each booking.",
     "contactRequestForm": "Please use the contact form below to send any feedback, questions, or concerns to our support team. If needed we will try and contact you for further information as soon as possible.",
     "defineDaysAndTimeSlots": "Choose the days and times this event can be booked.",

diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
@@ -125,7 +125,9 @@ export const getLocale = (): string|null => {
  * @returns {ColorSchemes} - Colour theme value
  */
 export const getPreferredTheme = (): string => {
-  const theme = localStorage?.getItem('theme');
+  // TODO: Color Schemes - Revert this part which forces the light scheme when the dark one is ready.
+  return ColorSchemes.Light;
+  /*const theme = localStorage?.getItem('theme');
   if (!theme) {
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? ColorSchemes.Dark : ColorSchemes.Light;
   }
@@ -138,7 +140,7 @@ export const getPreferredTheme = (): string => {
     default:
       // This would be ColorSchemes.System, but I feel like we need a definitive answer here.
       return window.matchMedia('(prefers-color-scheme: dark)').matches ? ColorSchemes.Dark : ColorSchemes.Light;
-  }
+  }*/
 };
 
 /**

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -55,6 +55,9 @@ export default {
           900: '#1B1763',
         }
       },
+      boxShadow: {
+        light: '0 0 0 1px transparent,0 5px 10px 0 #c8dfff;',
+      },
     },
   },
   darkMode: 'class',