💚 Style input labels and accordeon cards

frontend/src/assets/styles/variables.css

@@ -2,6 +2,7 @@ html {
   --border-radius: 0.1875rem; /* 3px */
   --txt-input: 0.8125rem; /* 13px */
   --line-height-input: 1.25rem; /* 20px */
+  --font-sans: 'Inter', 'sans-serif';
 
   --transition: all 250ms ease-out;
   --transition-transform: .15s transform ease-in-out;

frontend/src/components/ScheduleCreation.vue

@@ -425,9 +425,9 @@ watch(
 </script>
 
 <template>
-  <div class="sticky top-24 flex flex-col gap-4 rounded-2xl bg-zinc-100 dark:bg-gray-600">
-    <div class="flex flex-col gap-4 px-1 py-4">
-      <div class="flex items-center justify-around text-center text-xl font-semibold text-teal-500">
+  <div class="sticky top-24 flex flex-col gap-4 rounded-2xl bg-zinc-100 dark:bg-gray-600 border border-zinc-200 dark:border-gray-500">
+    <div class="flex flex-col gap-2 py-4">
+      <div class="flex items-center justify-between text-center text-lg text-teal-600">
         <span class="pl-3">{{ t("heading.generalAvailability") }}</span>
         <switch-toggle
           v-if="existing"
@@ -443,15 +443,15 @@ watch(
         {{ scheduleCreationError }}
       </alert-box>
 
-      <div class="px-4">
+      <div class="px-4 mb-1">
         <label for="scheduleName" class="flex-column flex">
           <input
             id="scheduleName"
             type="text"
             v-model="scheduleInput.name"
             :placeholder="t('placeholder.mySchedule')"
             :disabled="!scheduleInput.active"
-            class="schedule-name place-holder w-full rounded-none border-0 border-b bg-transparent px-2 dark:bg-transparent"
+            class="schedule-name place-holder w-full rounded-none border-0 border-b bg-transparent p-1 dark:bg-transparent"
             required
           />
           <div v-if="!scheduleInput.name" class="content-center text-red-500">*</div>
@@ -460,15 +460,15 @@ watch(
 
       <!-- step 1 -->
       <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep1}"
+        class="mx-3 flex flex-col gap-2 rounded-lg border border-zinc-200 p-3 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50 border-teal-600': activeStep1}"
         id="schedule-availability"
       >
         <div
           @click="state = ScheduleCreationState.Availability"
           class="btn-step-1 flex cursor-pointer items-center justify-between"
         >
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.chooseYourAvailability") }}
             </h2>
@@ -504,7 +504,7 @@ watch(
             </text-input>
           </div>
           <div>
-            <div class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-300">
+            <div class="input-label">
               {{ t("label.availableDays") }}
             </div>
             <bubble-select
@@ -515,7 +515,7 @@ watch(
             />
           </div>
           <div>
-            <div class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-300">
+            <div class="input-label">
               {{ t("label.timeZone") }}
             </div>
             <div class="flex justify-between">
@@ -530,15 +530,15 @@ watch(
 
       <!-- step 2 -->
       <div
-        class="mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50':activeStep2}"
+        class="mx-3 flex flex-col gap-2 rounded-lg border border-zinc-200 p-3 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50 border-teal-600': activeStep2}"
         id="schedule-settings"
       >
         <div
           @click="state = ScheduleCreationState.Settings"
           class="btn-step-2 flex cursor-pointer items-center justify-between"
         >
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.scheduleDetails") }}
             </h2>
@@ -607,12 +607,12 @@ watch(
       <!-- step 3 -->
       <div
         @click="state = ScheduleCreationState.Details"
-        class="btn-step-3 mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep3}"
+        class="btn-step-3 mx-3 flex flex-col gap-2 rounded-lg border border-zinc-200 p-3 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50 border-teal-600': activeStep3}"
         id="schedule-details"
       >
         <div class="flex cursor-pointer items-center justify-between">
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.meetingDetails") }}
             </h2>
@@ -660,12 +660,12 @@ watch(
               @change="toggleZoomLinkCreation"
               class="size-5 rounded-md"
             />
-            <div class="font-medium text-gray-500 dark:text-gray-300">
+            <div class="input-label">
               {{ t("label.generateZoomLink") }}
             </div>
           </label>
           <label class="relative flex flex-col gap-1">
-            <div class="font-medium text-gray-500 dark:text-gray-300">
+            <div class="input-label ">
               {{ t("label.notes") }}
             </div>
             <textarea
@@ -691,12 +691,12 @@ watch(
       <!-- step 4 -->
       <div
         @click="state = ScheduleCreationState.Booking"
-        class="btn-step-3 mx-4 flex flex-col gap-2 rounded-lg border border-zinc-200 p-4 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
-        :class="{'bg-neutral-50': activeStep4}"
+        class="btn-step-3 mx-3 flex flex-col gap-2 rounded-lg border border-zinc-200 p-3 text-gray-700 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100"
+        :class="{'bg-neutral-50 border-teal-600': activeStep4}"
         id="schedule-details"
       >
         <div class="flex cursor-pointer items-center justify-between">
-          <div class="flex flex-col gap-1">
+          <div class="flex flex-col">
             <h2>
               {{ t("label.bookingSettings") }}
             </h2>
@@ -713,9 +713,6 @@ watch(
           <hr/>
           <!-- custom quick link -->
           <label class="relative flex flex-col gap-1">
-            <div class="font-medium text-gray-500 dark:text-gray-300">
-              {{ t("label.quickLink") }}
-            </div>
             <div class="flex gap-2">
               <text-input
                 type="text"
@@ -725,8 +722,10 @@ watch(
                 class="w-full rounded-md disabled:cursor-not-allowed"
                 :small-text="true"
                 maxLength="16"
-              />
-              <refresh-icon class="mt-2.5 cursor-pointer text-teal-600" @click.prevent="refreshSlug" />
+              >
+                {{ t("label.quickLink") }}
+              </text-input>
+              <refresh-icon class="mt-7 cursor-pointer text-teal-600" @click.prevent="refreshSlug" />
             </div>
           </label>
           <!-- option to deactivate confirmation -->
@@ -837,25 +836,13 @@ watch(
 </template>
 
 <style scoped>
-input[type="time"]::-webkit-calendar-picker-indicator {
-  margin-right: -0.5rem;
-  background: none;
-}
-
-label {
-  font-size: theme('fontSize.sm');
-}
-
-/* Lol come-on! */
-textarea:disabled,
-select:disabled,
-input:disabled {
-  color: theme('colors.neutral.400') !important;
-  cursor: not-allowed;
-}
-
-input[type=checkbox]:disabled {
-  filter: grayscale(100%);
+.input-label {
+  color: var(--colour-ti-base);
+  font-family: var(--font-sans);
+  font-size: var(--txt-input);
+  line-height: var(--line-height-input);
+  width: 100%;
+  font-weight: 500;
 }
 
 /* If the device does not support hover (i.e. mobile) then make it activate on focus within */

frontend/src/locales/en.json

@@ -64,7 +64,7 @@
   "heading": {
     "accountData": "Account Data",
     "accountDeletion": "Account Deletion",
-    "accountSettings": "Account Settings",
+    "accountSettings": "Account settings",
     "appointmentCreated": "Booking created!",
     "appointmentsAndBookingSettings": "Appointments & booking settings",
     "bookSelection": "Book selection",
@@ -79,8 +79,8 @@
     "eventBooked": "Event booked!",
     "externalConnections": "Connections",
     "frequentlyAskedQuestions": "Frequently asked Questions",
-    "generalAvailability": "Set Availability",
-    "generalSettings": "General Settings",
+    "generalAvailability": "Set General Availability",
+    "generalSettings": "General settings",
     "languageAndAppearance": "Language & Appearance",
     "pendingAppointments": "Pending bookings",
     "privacySettings": "Privacy settings",
@@ -163,7 +163,7 @@
     "booked": "Booked",
     "bookingConfirmation": "Booking Confirmation",
     "bookingLink": "Booking Link",
-    "bookingSettings": "Booking Settings",
+    "bookingSettings": "Booking settings",
     "bookingSlot": "Booking slot",
     "bookings": "Bookings | Booking | Bookings",
     "busy": "Busy",
@@ -214,8 +214,8 @@
     "editProfile": "Edit profile",
     "email": "Email",
     "end": "End",
-    "endDate": "End Date",
-    "endTime": "End Time",
+    "endDate": "End date",
+    "endTime": "End time",
     "enterEmailToInvite": "Enter an email to invite them to Thunderbird Appointment:",
     "error": "Error",
     "faq": "FAQ",
@@ -240,7 +240,7 @@
     "logIn": "Log in",
     "logOut": "Log out",
     "loginToContinue": "Log in to continue",
-    "meetingDetails": "Meeting Details",
+    "meetingDetails": "Meeting details",
     "message": "Message",
     "month": "Month",
     "myLink": "My link",
@@ -273,9 +273,9 @@
     "saveChanges": "Save changes",
     "schedule": "Schedule",
     "scheduleCreationError": "There was an error creating your schedule. Let's try that again.",
-    "scheduleDetails": "Scheduling Details",
+    "scheduleDetails": "Scheduling details",
     "scheduleSettings": {
-      "availabilitySubHeading": "Set your availability days and times",
+      "availabilitySubHeading": "Set your availability days and time",
       "bookingSettingsSubHeading": "Edit your quick link and more",
       "meetingDetailsSubHeading": "Add video and/or notes to events",
       "schedulingDetailsSubHeading": "Set booking intervals and duration"
@@ -296,8 +296,8 @@
     "signUpWithInviteCode": "Sign up with invite code",
     "slotLength": "Booking Duration",
     "start": "Start",
-    "startDate": "Start Date",
-    "startTime": "Start Time",
+    "startDate": "Start date",
+    "startTime": "Start time",
     "startUsingTba": "Try Appointment",
     "status": "Status",
     "success": "Success",
@@ -380,7 +380,7 @@
     "chooseDateAndTime": "Choose when to meet.",
     "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.",
+    "defineDaysAndTimeSlots": "Choose the days and time this event can be booked.",
     "denialSentToAddress": "We've let the booker ({address}) know you can't make this event.",
     "disclaimerGABooking": "Your booking will be confirmed by the calendar owner.",
     "googlePermissionCalendarName": "See and download your calendars using Google Calendar",
@@ -418,7 +418,7 @@
     "requestInformationSentToOwner": "An information about this booking request has been emailed to the owner.",
     "scheduleSettings": {
       "clickHereToConnect": "Click here to connect a calendar!",
-      "create": "Select a calendar under Scheduling Details and click save to get started!",
+      "create": "Select a calendar under Scheduling details and click save to get started!",
       "formDirty": "You have unsaved changes.",
       "noCalendars": "Scheduling requires at least one connected calendar.",
       "notActive": "Schedule is not active, turn on the toggle to edit or share."
@@ -453,7 +453,7 @@
     "timesAreDisplayedInLocalTimezone": "Times are displayed in your local timezone {timezone}.",
     "titleIsReadyForBookings": "{title} is ready for bookings",
     "toUpdateYourUsername": {
-      "link": "Account Settings",
+      "link": "Account settings",
       "text": "To update your username, go to {link}. "
     },
     "updateUsernameNotice": "Changing your username will also change your link. Your old link will no longer work.",

frontend/src/tbpro/elements/BaseButton.vue

@@ -53,7 +53,7 @@ button:hover > .tooltip,
 
 .primary {
   background-color: var(--colour-service-primary);
-  border-color: var(--colour-service-primary-hover);
+  @mixin faded-border var(--colour-service-primary-hover);
   color: var(--colour-neutral-base);
 
   &:hover:enabled {
@@ -147,8 +147,7 @@ button {
   align-items: center;
   height: 100%;
 
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-left: 1.5rem;
   margin-right: -0.75rem;
 }
 

frontend/src/tbpro/elements/SelectInput.vue

@@ -66,7 +66,7 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
 
 .label {
   width: 100%;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .help-label {
@@ -93,6 +93,7 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
   background-color: var(--colour-neutral-base);
   @mixin faded-border var(--colour-select-border);
   border-radius: var(--border-radius);
+  font-size: var(--txt-input);
   font-weight: 400;
 
   &:hover, &:focus {
@@ -103,6 +104,11 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
     background-color: var(--colour-neutral-subtle);
     --colour-select-border: var(--colour-neutral-border-intense);
   }
+
+  &:disabled {
+    filter: grayscale(50%);
+    cursor: not-allowed;
+  }
 }
 .dark {
   .tbpro-select {

frontend/src/tbpro/elements/SwitchToggle.vue

@@ -33,7 +33,7 @@ const toggleState = () => {
 
 <template>
   <div class="component-container" @click.prevent="toggleState">
-    <div v-if="label">{{ label }}</div>
+    <div v-if="label" class="input-label">{{ label }}</div>
     <div class="toggle-container">
       <div v-if="!noLegend" class="toggle-label">{{ t('label.off') }}</div>
       <div class="toggle">
@@ -73,6 +73,15 @@ const toggleState = () => {
   }
 }
 
+.input-label {
+  color: var(--colour-ti-base);
+  font-family: var(--font-sans);
+  font-size: var(--txt-input);
+  line-height: var(--line-height-input);
+  width: 100%;
+  font-weight: 500;  
+}
+
 .toggle-container {
   display: flex;
   align-items: center;

frontend/src/tbpro/elements/TextInput.vue

@@ -116,15 +116,15 @@ const onChange = () => {
   flex-direction: column;
   align-items: center;
   color: var(--colour-ti-base);
-  font-family: 'Inter', 'sans-serif';
+  font-family: var(--font-sans);
   font-size: var(--txt-input);
   line-height: var(--line-height-input);
   font-weight: 400;
 }
 
 .label {
   width: 100%;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .small-text {
@@ -203,6 +203,11 @@ const onChange = () => {
     &::placeholder {
       color: var(--colour-ti-muted);
     }
+
+    &[type="time"]::-webkit-calendar-picker-indicator {
+      margin-right: -0.5rem;
+      background: none;
+    }
   }
 }
 .dark {