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

@@ -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">

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">

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

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"

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"

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";

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,
   };

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">

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>

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;