From 864e592bc5ba4bd8296fae4919afcef6e1c02fc6 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 13 Jul 2023 16:51:08 +0530
Subject: [PATCH] fix: onboarding screen design issues (#1517)

* fix: projects empty state flicker

* fix: tour images padding

* chore: add greeting icon on the dashboard

* chore: update email id font weight

* fix: placeholder color
---
 apps/app/components/onboarding/invite-members.tsx | 2 +-
 apps/app/components/onboarding/tour/root.tsx      | 9 +++++++--
 apps/app/components/onboarding/user-details.tsx   | 2 +-
 apps/app/components/ui/input/index.tsx            | 2 +-
 apps/app/components/ui/text-area/index.tsx        | 2 +-
 apps/app/helpers/array.helper.ts                  | 4 ++--
 apps/app/hooks/use-projects.tsx                   | 4 +++-
 apps/app/pages/[workspaceSlug]/index.tsx          | 1 +
 apps/app/pages/onboarding.tsx                     | 2 +-
 apps/app/styles/editor.css                        | 2 +-
 10 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/app/components/onboarding/invite-members.tsx b/apps/app/components/onboarding/invite-members.tsx
index 99a7021ab..fa58cf64f 100644
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@@ -200,7 +200,7 @@ export const InviteMembers: React.FC<Props> = ({ workspace, user, stepChange })
           onClick={appendField}
         >
           <PlusIcon className="h-3 w-3" />
-          Add more
+          Add another
         </button>
       </div>
       <div className="flex items-center gap-4">
diff --git a/apps/app/components/onboarding/tour/root.tsx b/apps/app/components/onboarding/tour/root.tsx
index 30ce2c578..30a720f8f 100644
--- a/apps/app/components/onboarding/tour/root.tsx
+++ b/apps/app/components/onboarding/tour/root.tsx
@@ -82,7 +82,8 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
 
   const { user } = useUser();
 
-  const currentStep = TOUR_STEPS.find((tourStep) => tourStep.key === step);
+  const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
+  const currentStep = TOUR_STEPS[currentStepIndex];
 
   return (
     <>
@@ -124,7 +125,11 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
           </button>
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 lg:col-span-7 h-full overflow-hidden">
-            <div className="flex justify-end items-end h-1/2 sm:h-3/5 overflow-hidden bg-custom-primary-100">
+            <div
+              className={`flex items-end h-1/2 sm:h-3/5 overflow-hidden bg-custom-primary-100 ${
+                currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
+              }`}
+            >
               <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">
diff --git a/apps/app/components/onboarding/user-details.tsx b/apps/app/components/onboarding/user-details.tsx
index 7d43ab9e0..42ee00cd5 100644
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@@ -144,7 +144,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
                     value ? (
                       value.toString()
                     ) : (
-                      <span className="text-gray-400">Select your role...</span>
+                      <span className="text-custom-text-400">Select your role...</span>
                     )
                   }
                   input
diff --git a/apps/app/components/ui/input/index.tsx b/apps/app/components/ui/input/index.tsx
index 06668b3e7..17dfa639b 100644
--- a/apps/app/components/ui/input/index.tsx
+++ b/apps/app/components/ui/input/index.tsx
@@ -34,7 +34,7 @@ export const Input: React.FC<Props> = ({
         register && register(name).onChange(e);
         onChange && onChange(e);
       }}
-      className={`block rounded-md bg-transparent text-sm focus:outline-none ${
+      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
         mode === "primary"
           ? "rounded-md border border-custom-border-100"
           : mode === "transparent"
diff --git a/apps/app/components/ui/text-area/index.tsx b/apps/app/components/ui/text-area/index.tsx
index b4c242259..05f8640fd 100644
--- a/apps/app/components/ui/text-area/index.tsx
+++ b/apps/app/components/ui/text-area/index.tsx
@@ -66,7 +66,7 @@ export const TextArea: React.FC<Props> = ({
           onChange && onChange(e);
           setTextareaValue(e.target.value);
         }}
-        className={`no-scrollbar w-full bg-transparent ${
+        className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 ${
           noPadding ? "" : "px-3 py-2"
         } outline-none ${
           mode === "primary"
diff --git a/apps/app/helpers/array.helper.ts b/apps/app/helpers/array.helper.ts
index f8134b440..bcadbe3c8 100644
--- a/apps/app/helpers/array.helper.ts
+++ b/apps/app/helpers/array.helper.ts
@@ -12,9 +12,9 @@ export const orderArrayBy = (
   key: string,
   ordering: "ascending" | "descending" = "ascending"
 ) => {
-  const array = [...orgArray];
+  if (!orgArray || !Array.isArray(orgArray) || orgArray.length === 0) return [];
 
-  if (!array || !Array.isArray(array) || array.length === 0) return [];
+  const array = [...orgArray];
 
   if (key[0] === "-") {
     ordering = "descending";
diff --git a/apps/app/hooks/use-projects.tsx b/apps/app/hooks/use-projects.tsx
index f7c9f235c..3fc93cdb2 100644
--- a/apps/app/hooks/use-projects.tsx
+++ b/apps/app/hooks/use-projects.tsx
@@ -26,7 +26,9 @@ const useProjects = () => {
     ?.slice(0, 3);
 
   return {
-    projects: orderArrayBy(projects ?? [], "is_favorite", "descending") as IProject[] | undefined,
+    projects: projects
+      ? (orderArrayBy(projects, "is_favorite", "descending") as IProject[])
+      : undefined,
     recentProjects: recentProjects || [],
     mutateProjects,
   };
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 9f7b8589c..e53e310e6 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -133,6 +133,7 @@ const WorkspacePage: NextPage = () => {
               Good {greeting}, {user?.first_name} {user?.last_name}
             </h3>
             <h6 className="text-custom-text-400 font-medium">
+              {greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}
               {DAYS[today.getDay()]}, {renderShortDate(today)} {render12HourFormatTime(today)}
             </h6>
             <div className="mt-7 bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index e9373fc10..57b121648 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -158,7 +158,7 @@ const Onboarding: NextPage = () => {
               </div>
             </div>
           )}
-          <div className="absolute sm:fixed text-custom-text-100 text-sm right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
+          <div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
             {user?.email}
           </div>
         </div>
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 41169e968..ea4b2e601 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -1,6 +1,6 @@
 .empty-node::after {
   content: attr(data-placeholder);
-  color: #9ca3af;
+  color: rgb(var(--color-text-400));
 
   position: absolute;
   pointer-events: none;