Homepage polish (#189)

* Fix background colour on schedule page

* Re-add navbar when authed on homepage

* Add dark-mode screenshots and various other tweaks for the homepage.

* Adjust box shadow to match other box shadow colours in the app

* ➕ complete German lang snippets

* Fix a mistype on schedule creation page

---------

Co-authored-by: Andreas Müller <[email protected]>

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- authenticated subscriber content -->
-  <template v-if="isAuthenticated && !routeIsHome">
+  <template v-if="isAuthenticated">
     <site-notification
       v-if="siteNotificationStore.isVisible"
       :title="siteNotificationStore.title"
@@ -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"

frontend/src/components/HomeFooter.vue

@@ -3,7 +3,7 @@
     <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 dark:text-neutral-700 uppercase">
+        <div class="text-lg font-display tracking-[.25em] text-white uppercase">
           Thunderbird Appointment
         </div>
       </div>

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>

frontend/src/elements/home/InfoBox.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="flex flex-col mb-20 w-full md:w-1/3 shadow-[0_-5px_5px_-5px_#3B455F19]">
+  <div class="flex flex-col mb-20 w-full md:w-1/3 shadow-[0_-5px_5px_-5px_rgb(0_0_0/0.3)]
+">
     <div class="h-16 flex gap-4 m-4">
       <!--<img class="w-[64px] h-[64px]" src="@/assets/svg/icon-wand.svg"/>-->
-      <h3 class="text-2xl text-teal-600 my-auto">{{ title }}</h3>
+      <h3 class="text-2xl text-teal-600 dark:text-teal-400 my-auto">{{ title }}</h3>
     </div>
     <div class="m-4 mb-8">
       <p class="text-lg leading-loose"><slot></slot></p>

frontend/src/locales/de.json

@@ -230,7 +230,9 @@
       "setAvailabilityBody": "Lege fest, wann und wie deine Zeit gebucht wird.",
       "setAvailabilityTitle": "Definiere deine Verfügbarkeit",
       "shareWithOthersBody": "Versende deinen persönlichen Link per E-Mail, oder füge ihn deiner Website hinzu.",
-      "shareWithOthersTitle": "Mit anderen teilen"
+      "shareWithOthersTitle": "Mit anderen teilen",
+      "screenshotCalendarAlt": "Ein Screenshot der Kalenderansicht von Thunderbird Appointment.",
+      "screenshotScheduleAlt": "Ein Screenshot der Verfügbarkeitsansicht von Thunderbird Appointment."
     },
     "invalidOrAlreadyBooked": "Der Buchungsplatz ist möglicherweise nicht mehr verfügbar oder der Link ist defekt.",
     "invitationSentToAddress": "Eine Einladung für dieses Event wurde an {address} geschickt.",

frontend/src/locales/en.json

@@ -230,7 +230,9 @@
       "setAvailabilityBody": "Choose when and how people can book time with you.",
       "setAvailabilityTitle": "Set your availability",
       "shareWithOthersBody": "Send your personal link via email, or add it to your website.",
-      "shareWithOthersTitle": "Share with others"
+      "shareWithOthersTitle": "Share with others",
+      "screenshotCalendarAlt": "A screenshot of Thunderbird Appointment's calendar page.",
+      "screenshotScheduleAlt": "A screenshot of Thunderbird Appointment's schedule page."
     },
     "invalidOrAlreadyBooked": "The booking slot might not be available anymore or the link is broken.",
     "invitationSentToAddress": "An invitation for this event has been emailed to {address}.",

frontend/src/views/HomeView.vue

@@ -24,7 +24,7 @@
     </div>
   </section>
   <section class="mx-4">
-    <h2 class="text-3xl pb-16 pt-16 text-center text-teal-600">
+    <h2 class="text-3xl pb-16 pt-16 text-center text-teal-600 dark:text-teal-400">
       {{ $t('text.homepage.sectionHeader') }}
     </h2>
     <section class="flex flex-col gap-16 justify-center mx-auto max-w-full md:flex-row md:max-w-7xl">
@@ -34,12 +34,19 @@
     </section>
   </section>
   <section class="w-full">
-      <div class="bg-[url(@/assets/svg/homepage-wave.svg)] bg-top bg-no-repeat bg-cover w-full">
+      <div class="bg-[url(@/assets/svg/homepage-wave.svg)]
+      dark:bg-[url(@/assets/svg/homepage-wave-dark.svg)]
+      bg-top bg-no-repeat bg-cover w-full"
+      >
         <div class="pt-[13%]"></div>
         <div class="w-full flex flex-col md:flex-row relative mx-auto justify-between">
-          <img class="shadow-2xl w-full md:w-1/2"
+          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 dark:hidden"
                src="@/assets/img/homepage-screenshot.png"
-               alt="A screenshot of Thunderbird Appointment's calendar page."
+               :alt="$t('text.homepage.screenshotCalendarAlt')"
+          />
+          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 hidden dark:block"
+               src="@/assets/img/homepage-screenshot-dark.png"
+               :alt="$t('text.homepage.screenshotCalendarAlt')"
           />
           <div class="flex-col mb-20 mt-20 md:w-[45%] flex-center">
             <p class="text-2xl tracking-wide leading-loose font-light w-[70%]">
@@ -49,13 +56,17 @@
         </div>
       </div>
   </section>
-  <section class="w-full pt-32 bg-[#fbfbfc]">
-      <div class="bg-[url(@/assets/svg/homepage-wave-bottom.svg)] bg-top bg-no-repeat bg-cover w-full pb-8">
+  <section class="w-full pt-32 bg-[#fbfbfc] dark:bg-[#1F232A]">
+      <div class="bg-[url(@/assets/svg/homepage-wave-bottom.svg)] dark:bg-[url(@/assets/svg/homepage-wave-bottom-dark.svg)] bg-top bg-no-repeat bg-cover w-full pb-8">
         <div class="pt-[5%]"></div>
         <div class="w-full flex flex-col md:flex-row-reverse relative mx-auto justify-between">
-          <img class="shadow-2xl w-full md:w-1/2"
+          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 dark:hidden"
                src="@/assets/img/homepage-screenshot-2.png"
-               alt="A screenshot of Thunderbird Appointment's schedule page."
+               :alt="$t('text.homepage.screenshotScheduleAlt')"
+          />
+          <img class="shadow-2xl my-auto h-full w-full md:w-1/2 hidden dark:block"
+               src="@/assets/img/homepage-screenshot-2-dark.png"
+               :alt="$t('text.homepage.screenshotScheduleAlt')"
           />
           <div class="flex-col mb-20 mt-20 md:w-[45%] flex-center">
             <p class="text-2xl tracking-wide leading-loose font-light w-[70%]">