From f03a2c2a1a032c98bf4117618404f808c1f2fd6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Hanrahan?= <justciaranhanrahan@gmail.com>
Date: Sat, 9 Oct 2021 14:34:13 +0100
Subject: [PATCH] onboarding changes (#889)

---
 components/ui/Schedule/Schedule.tsx          | 12 +++----
 components/ui/Text/Body/Body.tsx             |  2 +-
 components/ui/Text/Largetitle/Largetitle.tsx |  5 ++-
 components/ui/Text/Overline/Overline.tsx     |  2 +-
 pages/getting-started.tsx                    | 35 +++++++++++---------
 styles/globals.css                           |  4 +++
 6 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/components/ui/Schedule/Schedule.tsx b/components/ui/Schedule/Schedule.tsx
index cf8441e3..9bf0bb47 100644
--- a/components/ui/Schedule/Schedule.tsx
+++ b/components/ui/Schedule/Schedule.tsx
@@ -223,7 +223,7 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
           </option>
         ));
       return (
-        <div key={`${day}-range-${index}`} className="flex items-center justify-between space-x-2">
+        <div key={`${day}-range-${index}`} className="flex items-center space-x-2">
           <div className="flex items-center space-x-2">
             <select
               id={`${day}.${index}.start`}
@@ -252,9 +252,9 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
 
     const Actions = () => {
       return (
-        <div className="flex items-center space-x-2">
-          <button type="button" onClick={() => handleAddRange()}>
-            <PlusIcon className="h-5 w-5 text-neutral-400 hover:text-neutral-500" />
+        <div className="flex items-center">
+          <button className="btn-icon" type="button" onClick={() => handleAddRange()}>
+            <PlusIcon className="h-5 w-5" />
           </button>
         </div>
       );
@@ -262,8 +262,8 @@ const SchedulerForm = ({ schedule = DEFAULT_SCHEDULE, onSubmit }: Props) => {
 
     const DeleteAction = ({ range }: { range: TimeRange }) => {
       return (
-        <button type="button" onClick={() => handleDeleteRange(range)}>
-          <TrashIcon className="h-5 w-5 text-neutral-400 hover:text-neutral-500" />
+        <button className="btn-icon" type="button" onClick={() => handleDeleteRange(range)}>
+          <TrashIcon className="h-5 w-5" />
         </button>
       );
     };
diff --git a/components/ui/Text/Body/Body.tsx b/components/ui/Text/Body/Body.tsx
index 97cf6baf..edc91c7c 100644
--- a/components/ui/Text/Body/Body.tsx
+++ b/components/ui/Text/Body/Body.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { TextProps } from "../Text";
 
 const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-lg leading-relaxed text-gray-900 dark:text-white", props?.className);
+  const classes = classnames("text-gray-900 dark:text-white", props?.className);
 
   return <p className={classes}>{props?.text || props.children}</p>;
 };
diff --git a/components/ui/Text/Largetitle/Largetitle.tsx b/components/ui/Text/Largetitle/Largetitle.tsx
index aa118a1c..7eeff016 100644
--- a/components/ui/Text/Largetitle/Largetitle.tsx
+++ b/components/ui/Text/Largetitle/Largetitle.tsx
@@ -4,7 +4,10 @@ import React from "react";
 import { TextProps } from "../Text";
 
 const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-3xl font-extrabold text-gray-900 dark:text-white", props?.className);
+  const classes = classnames(
+    "font-cal tracking-wider text-3xl text-gray-900 dark:text-white mb-2",
+    props?.className
+  );
 
   return <p className={classes}>{props?.text || props.children}</p>;
 };
diff --git a/components/ui/Text/Overline/Overline.tsx b/components/ui/Text/Overline/Overline.tsx
index 4ad96080..55eeac35 100644
--- a/components/ui/Text/Overline/Overline.tsx
+++ b/components/ui/Text/Overline/Overline.tsx
@@ -5,7 +5,7 @@ import { TextProps } from "../Text";
 
 const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
   const classes = classnames(
-    "text-sm uppercase font-semibold leading-snug tracking-wide text-gray-900 dark:text-white",
+    "text-sm capitalize font-medium text-gray-900 dark:text-white",
     props?.className
   );
 
diff --git a/pages/getting-started.tsx b/pages/getting-started.tsx
index be9968ce..b9db02a1 100644
--- a/pages/getting-started.tsx
+++ b/pages/getting-started.tsx
@@ -144,18 +144,21 @@ export default function Onboarding(props: OnboardingProps) {
     }
 
     return (
-      <li onClick={() => handleAddIntegration(integration.type)} key={integration.type} className="flex py-4">
-        <div className="w-1/12 mr-4 pt-2">
+      <li
+        onClick={() => handleAddIntegration(integration.type)}
+        key={integration.type}
+        className="flex px-4 py-3 items-center">
+        <div className="w-1/12 mr-4">
           <img className="h-8 w-8 mr-2" src={integration.imageSrc} alt={integration.title} />
         </div>
         <div className="w-10/12">
-          <Text className="text-gray-800 font-medium">{integration.title}</Text>
+          <Text className="text-gray-900 text-sm font-medium">{integration.title}</Text>
           <Text className="text-gray-400" variant="subtitle">
             {integration.description}
           </Text>
         </div>
-        <div className="w-2/12 text-right pt-2">
-          <Button color="secondary" onClick={() => handleAddIntegration(integration.type)}>
+        <div className="w-2/12 text-right">
+          <Button className="btn-sm" color="secondary" onClick={() => handleAddIntegration(integration.type)}>
             Connect
           </Button>
         </div>
@@ -369,8 +372,8 @@ export default function Onboarding(props: OnboardingProps) {
       description:
         "Tell us what to call you and let us know what timezone you’re in. You’ll be able to edit this later.",
       Component: (
-        <form className="sm:mx-auto sm:w-full sm:max-w-md">
-          <section className="space-y-4">
+        <form className="sm:mx-auto sm:w-full">
+          <section className="space-y-8">
             <fieldset>
               <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                 Full name
@@ -433,7 +436,7 @@ export default function Onboarding(props: OnboardingProps) {
       description:
         "Connect your calendar to automatically check for busy times and new events as they’re scheduled.",
       Component: (
-        <ul className="divide-y divide-gray-200 sm:mx-auto sm:w-full sm:max-w-md">
+        <ul className="divide-y divide-gray-200 sm:mx-auto sm:w-full border border-gray-200 rounded-sm">
           {props.integrations.map((integration) => {
             return <IntegrationGridListItem key={integration.type} integration={integration} />;
           })}
@@ -467,7 +470,7 @@ export default function Onboarding(props: OnboardingProps) {
               }}
             />
           </section>
-          <footer className="py-6 sm:mx-auto sm:w-full sm:max-w-md flex flex-col space-y-6">
+          <footer className="py-6 sm:mx-auto sm:w-full flex flex-col space-y-6">
             <Button className="justify-center" EndIcon={ArrowRightIcon} type="submit" form={SCHEDULE_FORM_ID}>
               Continue
             </Button>
@@ -483,7 +486,7 @@ export default function Onboarding(props: OnboardingProps) {
       description:
         "Last thing, a brief description about you and a photo really help you get bookings and let people know who they’re booking with.",
       Component: (
-        <form className="sm:mx-auto sm:w-full sm:max-w-md" id="ONBOARDING_STEP_4">
+        <form className="sm:mx-auto sm:w-full" id="ONBOARDING_STEP_4">
           <section className="space-y-4">
             <fieldset>
               <label htmlFor="name" className="block text-sm font-medium text-gray-700">
@@ -514,7 +517,7 @@ export default function Onboarding(props: OnboardingProps) {
                 className="mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
                 defaultValue={props.user.bio}
               />
-              <Text variant="caption">
+              <Text variant="caption" className="mt-2">
                 A few sentences about yourself. This will appear on your personal url page.
               </Text>
             </fieldset>
@@ -565,7 +568,7 @@ export default function Onboarding(props: OnboardingProps) {
       )}
       <div className="mx-auto py-24 px-4">
         <article className="relative">
-          <section className="sm:mx-auto sm:w-full sm:max-w-md space-y-4">
+          <section className="sm:mx-auto sm:w-full sm:max-w-lg space-y-4">
             <header>
               <Text className="text-white" variant="largetitle">
                 {steps[currentStep].title}
@@ -574,7 +577,7 @@ export default function Onboarding(props: OnboardingProps) {
                 {steps[currentStep].description}
               </Text>
             </header>
-            <section className="space-y-2">
+            <section className="space-y-2 pt-4">
               <Text variant="footnote">
                 Step {currentStep + 1} of {steps.length}
               </Text>
@@ -598,11 +601,11 @@ export default function Onboarding(props: OnboardingProps) {
               </section>
             </section>
           </section>
-          <section className="py-6 mt-10 mx-auto max-w-xl bg-white p-10 rounded-sm">
+          <section className="mt-10 mx-auto max-w-xl bg-white p-10 rounded-sm">
             {steps[currentStep].Component}
 
             {!steps[currentStep].hideConfirm && (
-              <footer className="py-6 sm:mx-auto sm:w-full sm:max-w-md flex flex-col space-y-6 mt-8">
+              <footer className="sm:mx-auto sm:w-full flex flex-col space-y-6 mt-8">
                 <Button
                   className="justify-center"
                   disabled={isSubmitting}
@@ -613,7 +616,7 @@ export default function Onboarding(props: OnboardingProps) {
               </footer>
             )}
           </section>
-          <section className="py-6 mt-8 mx-auto max-w-xl">
+          <section className="py-8 mx-auto max-w-xl">
             <div className="flex justify-between flex-row-reverse">
               <button disabled={isSubmitting} onClick={handleSkipStep}>
                 <Text variant="caption">Skip Step</Text>
diff --git a/styles/globals.css b/styles/globals.css
index 763ff4ff..03468b5a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -106,6 +106,10 @@
   .btn-wide.btn-white {
     @apply w-full text-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
   }
+  /* btn icon */
+  .btn-icon {
+    @apply p-2 border border-transparent hover:border-gray-300 rounded-sm text-neutral-500 hover:text-neutral-900;
+  }
   /* slider */
   .slider {
     @apply relative flex items-center w-40 h-4 select-none;