From 40d2990565b78b5e1451b7b91b59070e3f8fa853 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 7 Jun 2023 01:56:58 +0530
Subject: [PATCH] fix: onboarding ui fix (#1225)

---
 apps/app/components/onboarding/user-details.tsx  |  9 +++++----
 apps/app/components/onboarding/workspace.tsx     |  4 ++--
 .../workspace/create-workspace-form.tsx          | 16 ++++++++--------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index f4f94117d..63df0d968 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -76,8 +76,8 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
           </div>
 
           <div className="flex flex-col justify-between gap-4 px-7 py-3.5 sm:flex-row">
-            <div className="flex flex-col items-start justify-center gap-2.5 w-full sm:w-1/2">
-              <span>First name</span>
+            <div className="flex flex-col items-start justify-center gap-1 w-full sm:w-1/2">
+              <span className="mb-1.5">First name</span>
               <Input
                 name="first_name"
                 autoComplete="off"
@@ -88,8 +88,8 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
                 error={errors.first_name}
               />
             </div>
-            <div className="flex flex-col items-start justify-center gap-2.5 w-full sm:w-1/2">
-              <span>Last name</span>
+            <div className="flex flex-col items-start justify-center gap-1 w-full sm:w-1/2">
+              <span className="mb-1.5">Last name</span>
               <Input
                 name="last_name"
                 autoComplete="off"
@@ -128,6 +128,7 @@ export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) =>
                   </CustomSelect>
                 )}
               />
+              {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
             </div>
           </div>
         </div>
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 13558c71d..783f5f5e5 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -82,7 +82,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
     <div className="grid w-full place-items-center">
       <Tab.Group
         as="div"
-        className="flex h-[417px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md"
+        className="flex h-[442px] w-full max-w-xl flex-col justify-between rounded-[10px] bg-brand-base shadow-md"
         defaultIndex={currentTabValue(currentTab)}
         onChange={(i) => {
           switch (i) {
@@ -130,7 +130,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace, user }) => {
         <Tab.Panels as="div" className="h-full">
           <Tab.Panel className="h-full">
             <div className="flex h-full w-full flex-col">
-              <div className="h-[255px] overflow-y-auto px-7">
+              <div className="h-[280px] overflow-y-auto px-7">
                 {invitations && invitations.length > 0 ? (
                   invitations.map((invitation) => (
                     <div key={invitation.id}>
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 213232d24..fdc078cf0 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -103,10 +103,10 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
 
   return (
     <form className="flex h-full w-full flex-col" onSubmit={handleSubmit(handleCreateWorkspace)}>
-      <div className="divide-y h-[255px]">
-        <div className="flex flex-col justify-between gap-3.5 px-7 pb-3.5">
-          <div className="flex flex-col items-start justify-center gap-2.5">
-            <span className="text-sm">Workspace name</span>
+      <div className="divide-y h-[280px]">
+        <div className="flex flex-col justify-between gap-3 px-7 pb-3.5">
+          <div className="flex flex-col items-start justify-center gap-1">
+            <span className="mb-1.5 text-sm">Workspace name</span>
             <Input
               name="name"
               register={register}
@@ -125,8 +125,8 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
               error={errors.name}
             />
           </div>
-          <div className="flex flex-col items-start justify-center gap-2.5">
-            <span className="text-sm">Workspace URL</span>
+          <div className="flex flex-col items-start justify-center gap-1">
+            <span className="mb-1.5 text-sm">Workspace URL</span>
             <div className="flex w-full items-center rounded-md border border-brand-base px-3">
               <span className="whitespace-nowrap text-sm text-brand-secondary">
                 {typeof window !== "undefined" && window.location.origin}/
@@ -156,8 +156,8 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
           </div>
         </div>
 
-        <div className="flex flex-col items-start justify-center gap-2.5 border-t border-brand-base px-7 pt-3.5 ">
-          <span className="text-sm">How large is your company?</span>
+        <div className="flex flex-col items-start justify-center gap-1 border-t border-brand-base px-7 pt-3.5 ">
+          <span className="mb-1.5 text-sm">How large is your company?</span>
           <div className="w-full">
             <Controller
               name="company_size"