From 0feab162ffed81e9c14bb12a6faeb07d7a44a02c Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 18 Jul 2023 15:20:05 +0530
Subject: [PATCH] style: onboarding screens (#1539)

* fix: onboarding screen styling

* chore: minor styling fixes

* chore: disable buttons if form is invalid
---
 apps/app/components/account/email-code-form.tsx  |  2 +-
 .../core/theme/custom-theme-selector.tsx         | 10 +++++-----
 .../app/components/onboarding/invite-members.tsx |  4 ++--
 apps/app/components/onboarding/tour/root.tsx     |  4 ++--
 apps/app/components/onboarding/user-details.tsx  |  4 ++--
 apps/app/components/onboarding/workspace.tsx     |  4 ++++
 .../app/components/ui/buttons/primary-button.tsx |  6 +-----
 .../workspace/create-workspace-form.tsx          | 16 ++++++++++++----
 apps/app/components/workspace/help-section.tsx   |  5 ++---
 apps/app/helpers/theme.helper.ts                 |  2 +-
 .../app/pages/[workspaceSlug]/settings/index.tsx |  9 ++++++---
 11 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/apps/app/components/account/email-code-form.tsx b/apps/app/components/account/email-code-form.tsx
index 236159fe5..bd798677a 100644
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@@ -178,7 +178,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
               ) : errorResendingCode ? (
                 "Please try again later"
               ) : (
-                "Resend code"
+                <span className="font-medium">Resend code</span>
               )}
             </button>
           </>
diff --git a/apps/app/components/core/theme/custom-theme-selector.tsx b/apps/app/components/core/theme/custom-theme-selector.tsx
index e584e23aa..5f36115f8 100644
--- a/apps/app/components/core/theme/custom-theme-selector.tsx
+++ b/apps/app/components/core/theme/custom-theme-selector.tsx
@@ -21,11 +21,11 @@ type Props = {
 };
 
 const defaultValues: ICustomTheme = {
-  background: "#292d3e",
-  text: "#ffffff",
-  primary: "#7d57c1",
-  sidebarBackground: "#292d3e",
-  sidebarText: "#ffffff",
+  background: "#0d101b",
+  text: "#c5c5c5",
+  primary: "#3f76ff",
+  sidebarBackground: "#0d101b",
+  sidebarText: "#c5c5c5",
   darkPalette: false,
   palette: "",
 };
diff --git a/apps/app/components/onboarding/invite-members.tsx b/apps/app/components/onboarding/invite-members.tsx
index fa58cf64f..ba989786c 100644
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@@ -41,7 +41,7 @@ export const InviteMembers: React.FC<Props> = ({ workspace, user, stepChange })
   const {
     control,
     handleSubmit,
-    formState: { isSubmitting, errors },
+    formState: { isSubmitting, errors, isValid },
   } = useForm<FormValues>();
 
   const { fields, append, remove } = useFieldArray({
@@ -204,7 +204,7 @@ export const InviteMembers: React.FC<Props> = ({ workspace, user, stepChange })
         </button>
       </div>
       <div className="flex items-center gap-4">
-        <PrimaryButton type="submit" loading={isSubmitting} size="md">
+        <PrimaryButton type="submit" disabled={!isValid} loading={isSubmitting} size="md">
           {isSubmitting ? "Sending..." : "Send Invite"}
         </PrimaryButton>
         <SecondaryButton size="md" onClick={nextStep} outline>
diff --git a/apps/app/components/onboarding/tour/root.tsx b/apps/app/components/onboarding/tour/root.tsx
index f537ebf94..54aab2f17 100644
--- a/apps/app/components/onboarding/tour/root.tsx
+++ b/apps/app/components/onboarding/tour/root.tsx
@@ -53,7 +53,7 @@ const TOUR_STEPS: {
     key: "modules",
     title: "Break into modules",
     description:
-      "Modules break your big think into Projects or Features, to help you organize better.",
+      "Modules break your big thing into Projects or Features, to help you organize better.",
     image: ModulesTour,
     prevStep: "cycles",
     nextStep: "views",
@@ -132,7 +132,7 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
               <Image src={currentStep?.image} alt={currentStep?.title} />
             </div>
             <div className="flex flex-col h-1/2 sm:h-2/5 p-4 overflow-y-auto">
-              <h3 className="font-medium text-lg">{currentStep?.title}</h3>
+              <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
               <p className="text-custom-text-200 text-sm mt-3">{currentStep?.description}</p>
               <div className="h-full flex items-end justify-between gap-4 mt-3">
                 <div className="flex items-center gap-4">
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index 42ee00cd5..222fc1143 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -35,7 +35,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
     handleSubmit,
     control,
     reset,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isValid },
   } = useForm<IUser>({
     defaultValues,
   });
@@ -164,7 +164,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
         </div>
       </div>
 
-      <PrimaryButton type="submit" size="md" disabled={isSubmitting}>
+      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
         {isSubmitting ? "Updating..." : "Continue"}
       </PrimaryButton>
     </form>
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index ba96c50a7..b401585dd 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -38,6 +38,10 @@ export const Workspace: React.FC<Props> = ({ user, updateLastWorkspace, stepChan
           defaultValues={defaultValues}
           setDefaultValues={setDefaultValues}
           user={user}
+          primaryButtonText={{
+            loading: "Creating...",
+            default: "Continue",
+          }}
           secondaryButton={
             <SecondaryButton onClick={() => stepChange({ profile_complete: false })}>
               Back
diff --git a/apps/app/components/ui/buttons/primary-button.tsx b/apps/app/components/ui/buttons/primary-button.tsx
index 357832f4e..8817679b4 100644
--- a/apps/app/components/ui/buttons/primary-button.tsx
+++ b/apps/app/components/ui/buttons/primary-button.tsx
@@ -19,11 +19,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
         : size === "md"
         ? "rounded-md px-3.5 py-2 text-sm"
         : "rounded-lg px-4 py-2 text-base"
-    } ${
-      disabled
-        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
-        : ""
-    } ${
+    } ${disabled ? "cursor-not-allowed opacity-70 hover:opacity-70" : ""} ${
       outline
         ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
         : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 7a3c12b6e..5321e5688 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -9,7 +9,7 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { CustomSelect, Input, PrimaryButton } from "components/ui";
 // types
 import { ICurrentUserResponse, IWorkspace } from "types";
 // fetch-keys
@@ -27,6 +27,10 @@ type Props = {
   setDefaultValues: Dispatch<SetStateAction<any>>;
   user: ICurrentUserResponse | undefined;
   secondaryButton?: React.ReactNode;
+  primaryButtonText?: {
+    loading: string;
+    default: string;
+  };
 };
 
 const restrictedUrls = [
@@ -49,6 +53,10 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
   setDefaultValues,
   user,
   secondaryButton,
+  primaryButtonText = {
+    loading: "Creating...",
+    default: "Create Workspace",
+  },
 }) => {
   const [slugError, setSlugError] = useState(false);
   const [invalidSlug, setInvalidSlug] = useState(false);
@@ -61,7 +69,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
     control,
     setValue,
     getValues,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isValid },
   } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
@@ -202,8 +210,8 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
 
       <div className="flex items-center gap-4">
         {secondaryButton}
-        <PrimaryButton type="submit" size="md" disabled={isSubmitting}>
-          {isSubmitting ? "Creating..." : "Create Workspace"}
+        <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
         </PrimaryButton>
       </div>
     </form>
diff --git a/apps/app/components/workspace/help-section.tsx b/apps/app/components/workspace/help-section.tsx
index 7cc5c9f3f..5c00b8490 100644
--- a/apps/app/components/workspace/help-section.tsx
+++ b/apps/app/components/workspace/help-section.tsx
@@ -17,12 +17,11 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import UpgradeToProModal from "./upgrade-to-pro-modal";
 // ui
-import { CircularProgress } from "components/ui";
+import { CircularProgress, Icon } from "components/ui";
 // icons
 import {
   ArrowLongLeftIcon,
   ChatBubbleOvalLeftEllipsisIcon,
-  RocketLaunchIcon,
   ArrowUpCircleIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
@@ -171,7 +170,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
           }}
           title="Shortcuts"
         >
-          <RocketLaunchIcon className="h-4 w-4 text-custom-text-200" />
+          <Icon iconName="bolt" />
         </button>
         <button
           type="button"
diff --git a/apps/app/helpers/theme.helper.ts b/apps/app/helpers/theme.helper.ts
index 42e6bd8d9..993a6b9ea 100644
--- a/apps/app/helpers/theme.helper.ts
+++ b/apps/app/helpers/theme.helper.ts
@@ -96,7 +96,7 @@ export const applyTheme = (palette: string, isDarkPalette: boolean) => {
       ?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
 
     if (i >= 100 && i <= 400) {
-      const borderShade = (shade + 100) as keyof TShades;
+      const borderShade = i === 100 ? 70 : i === 200 ? 80 : i === 300 ? 90 : 100;
 
       document
         .querySelector<HTMLElement>("[data-theme='custom']")
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index 476f08861..c80386da9 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -276,8 +276,8 @@ const WorkspaceSettings: NextPage = () => {
             </div>
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Company Size</h4>
-                <p className="text-sm text-custom-text-200">How big is your company?</p>
+                <h4 className="text-lg font-semibold">Organization Size</h4>
+                <p className="text-sm text-custom-text-200">What size is your organization?</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <Controller
@@ -287,7 +287,10 @@ const WorkspaceSettings: NextPage = () => {
                     <CustomSelect
                       value={value}
                       onChange={onChange}
-                      label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select company size"}
+                      label={
+                        ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"
+                      }
+                      width="w-full"
                       input
                     >
                       {ORGANIZATION_SIZE?.map((item) => (