typography fixes (#1163)

components/Shell.tsx

@@ -255,7 +255,7 @@ export default function Shell(props: {
             </nav>
             <div className={classNames(props.centered && "md:max-w-5xl mx-auto", "py-8")}>
               <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
-                <div className="w-full mb-10">
+                <div className="w-full mb-8">
                   <h1 className="mb-1 text-xl font-bold tracking-wide text-gray-900 font-cal">
                     {props.heading}
                   </h1>

components/ui/Button.tsx

@@ -54,7 +54,8 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
         size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
         size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
-        size === "icon" && "group p-2 border border-transparent text-neutral-400 hover:border-gray-200",
+        size === "icon" &&
+          "group p-2 border rounded-sm border-transparent text-neutral-400 hover:border-gray-200 transition",
         // turn button into a floating action button (fab)
         size === "fab" ? "fixed" : "relative",
         size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",

components/ui/form/Schedule.tsx

@@ -139,12 +139,12 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
             onChange={(e) => (e.target.checked ? replace([defaultDayRange]) : replace([]))}
             className="inline-block border-gray-300 rounded-sm focus:ring-neutral-500 text-neutral-900"
           />
-          <span className="inline-block capitalize">{weekday}</span>
+          <span className="text-sm inline-block capitalize">{weekday}</span>
         </label>
       </div>
       <div className="flex-grow">
         {fields.map((field, index) => (
-          <div key={field.id} className="flex justify-between mb-2">
+          <div key={field.id} className="flex justify-between mb-1">
             <div className="flex items-center space-x-2">
               <TimeRangeField name={`${name}.${day}.${index}`} />
             </div>
@@ -157,7 +157,7 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
             />
           </div>
         ))}
-        {!fields.length && t("no_availability")}
+        <span className="text-sm block text-gray-500">{!fields.length && t("no_availability")}</span>
       </div>
       <div>
         <Button

pages/availability/index.tsx

@@ -50,7 +50,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
         }}
         className="col-span-3 space-y-2 lg:col-span-2">
         <div className="px-4 py-5 bg-white border border-gray-200 divide-y rounded-sm sm:p-6">
-          <h3 className="mb-4 text-lg font-semibold leading-6 text-gray-900">{t("change_start_end")}</h3>
+          <h3 className="mb-5 text-base font-medium leading-6 text-gray-900">{t("change_start_end")}</h3>
           <Schedule name="schedule" />
         </div>
         <div className="text-right">
@@ -59,7 +59,9 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability">)
       </Form>
       <div className="col-span-3 ml-2 lg:col-span-1 min-w-40">
         <div className="px-4 py-5 border border-gray-200 rounded-sm sm:p-6 ">
-          <h3 className="text-lg font-medium leading-6 text-gray-900">{t("something_doesnt_look_right")}</h3>
+          <h3 className="text-base font-medium leading-6 text-gray-900">
+            {t("something_doesnt_look_right")}
+          </h3>
           <div className="max-w-xl mt-2 text-sm text-gray-500">
             <p>{t("troubleshoot_availability")}</p>
           </div>

public/static/locales/en/common.json

@@ -245,7 +245,7 @@
   "troubleshoot_availability": "Troubleshoot your availability to explore why your times are showing as they are.",
   "change_available_times": "Change available times",
   "change_your_available_times": "Change your available times",
-  "change_start_end": "Change the start and end times of your day",
+  "change_start_end": "Set your weekly hours",
   "change_start_end_buffer": "Set the start and end time of your day and a minimum buffer between your meetings.",
   "current_start_date": "Currently, your day is set to start at",
   "start_end_changed_successfully": "The start and end times for your day have been changed successfully.",
@@ -463,7 +463,7 @@
   "manage_your_billing_info": "Manage your billing information and cancel your subscription.",
   "availability": "Availability",
   "availability_updated_successfully": "Availability updated successfully",
-  "configure_availability": "Configure times when you are available for bookings.",
+  "configure_availability": "Set times when you are available for bookings.",
   "change_weekly_schedule": "Change your weekly schedule",
   "logo": "Logo",
   "error": "Error",