Merge branch 'main' into stage

frontend/src/App.vue

@@ -9,7 +9,7 @@
       {{ siteNotificationStore.message }}
     </site-notification>
     <nav-bar :nav-items="navItems" />
-    <main class="mx-4 pt-24 lg:mx-8 min-h-full pb-24">
+    <main :class="{'mx-4 pt-24 lg:mx-8 min-h-full pb-24': !routeIsHome, 'pt-32': routeIsHome}">
       <router-view
         :calendars="calendars"
         :appointments="appointments"
@@ -20,7 +20,7 @@
   <!-- for home page and booking page -->
   <template v-else-if="routeIsPublic">
     <title-bar />
-    <main class="mx-4 pt-24 lg:mx-8 min-h-full pb-24">
+    <main class="min-h-full">
       <router-view />
     </main>
     <footer-bar />
@@ -55,7 +55,7 @@ const siteNotificationStore = useSiteNotificationStore();
 
 // handle auth and fetch
 const auth = useAuth0();
-const isAuthenticated = computed(() => auth.isAuthenticated.value);
+const isAuthenticated = computed(() => auth?.isAuthenticated.value);
 const call = createFetch({
   baseUrl: apiUrl,
   options: {
@@ -122,6 +122,9 @@ const appointments = ref([]);
 const routeIsPublic = computed(
   () => ["booking", "availability", "home"].includes(route.name)
 );
+const routeIsHome = computed(
+  () => ["home"].includes(route.name)
+);
 
 // check login state of current user first
 const checkLogin = async () => {

frontend/src/components/FooterBar.vue

@@ -1,25 +1,3 @@
 <template>
-  <footer class="
-    relative z-50 h-16 w-full -mt-16 px-4 shadow-lg border-t flex justify-between
-    bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600
-  ">
-      <ul class="flex justify-center gap-8 w-full">
-        <li class="
-          flex text-base border-t-4 border-t-transparent transition-all ease-in-out
-          text-gray-600 dark:text-gray-300 hover:border-t-gray-200 dark:hover:border-t-gray-400
-        ">
-          <router-link class="flex-center min-w-[120px]" :to="{ name: 'privacy' }" target="_blank">
-            Privacy
-          </router-link>
-        </li>
-        <li class="
-          flex text-base border-t-4 border-t-transparent transition-all ease-in-out
-          text-gray-600 dark:text-gray-300 hover:border-t-gray-200 dark:hover:border-t-gray-400
-        ">
-          <router-link class="flex-center min-w-[120px]" :to="{ name: 'terms' }" target="_blank">
-            Legal
-          </router-link>
-        </li>
-      </ul>
-  </footer>
+  <!-- Empty for now! -->
 </template>

frontend/src/components/HomeFooter.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="bg-gray-700 p-4 lg:p-8 flex flex-col">
+    <div class="flex-center mb-16">
+      <div class="flex gap-3 items-center">
+        <img class="h-8 mr-2 pl-4" src="/appointment_logo.svg" alt="Appointment Logo"/>
+        <div class="text-lg font-display tracking-[.25em] text-white uppercase">
+          Thunderbird Appointment
+        </div>
+      </div>
+    </div>
+    <div class="flex-center mb-0 mt-auto">
+      <ul class="flex justify-center w-full gap-16">
+        <li class="
+          flex text-base border-t-4 border-t-transparent transition-all ease-in-out
+          text-gray-300 dark:text-gray-300
+        ">
+          <router-link class="flex-center" :to="{ name: 'privacy' }" target="_blank">
+            {{ $t('label.privacy') }}
+          </router-link>
+        </li>
+        <li class="
+          flex text-base border-t-4 border-t-transparent transition-all ease-in-out
+          text-gray-300 dark:text-gray-300
+        ">
+          <router-link class="flex-center" :to="{ name: 'terms' }" target="_blank">
+            {{ $t('label.legal') }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+    <div class="flex-center mb-0 mt-8 text-gray-300 text-center">
+      <p class="md:w-1/2">
+        <i18n-t keypath="text.homepage.copywrite">
+          <template v-slot:mzlaLink>
+            <a class="underline underline-offset-2"
+               href="https://blog.thunderbird.net/2020/01/thunderbirds-new-home/"
+            >
+              {{ $t('text.homepage.mzlaLinkText') }}
+            </a>
+          </template>
+          <template v-slot:creativeCommonsLink>
+            <a class="underline underline-offset-2"
+               href="https://www.mozilla.org/en-US/foundation/licensing/website-content/"
+            >
+              {{ $t('text.homepage.creativeCommonsLinkText') }}
+            </a>
+          </template>
+        </i18n-t>
+      </p>
+    </div>
+  </section>
+</template>

frontend/src/components/ScheduleCreation.vue

@@ -176,7 +176,7 @@
           <div class="font-medium mb-1 text-gray-500 dark:text-gray-300">
             {{ t("label.availableDays") }}
           </div>
-          <div class="grid grid-cols-2 grid-rows-4 grid-flow-col gap-2 bg-white p-4 rounded-lg">
+          <div class="grid grid-cols-2 grid-rows-4 grid-flow-col gap-2 bg-white dark:bg-gray-800 p-4 rounded-lg">
             <label v-for="w in isoWeekdays" class="flex gap-2 items-center text-sm select-none cursor-pointer">
               <input
                 type="checkbox"
@@ -259,7 +259,7 @@
             />
           </label>
         </div>
-        <div class="bg-white px-4 py-6 rounded-lg flex-center text-sm text-center">
+        <div class="bg-white dark:bg-gray-800 px-4 py-6 rounded-lg flex-center text-sm text-center">
           <div>{{ t('text.recipientsCanScheduleBetween', { earliest: earliest, farthest: farthest }) }}</div>
         </div>
       </div>