From 860630dd5a79bf70a7f050dc4e6e5214d6257745 Mon Sep 17 00:00:00 2001
From: Rohit Mondal <107113353+rohitmondal03@users.noreply.github.com>
Date: Tue, 21 Nov 2023 14:58:03 +0530
Subject: [PATCH] style: fixed color contrast in onboarding page (#1631)

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
---
 apps/web/app/(app)/onboarding/components/Objective.tsx  | 7 +++----
 apps/web/app/(app)/onboarding/components/Onboarding.tsx | 8 ++++----
 apps/web/app/(app)/onboarding/components/Role.tsx       | 4 ++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/(app)/onboarding/components/Objective.tsx b/apps/web/app/(app)/onboarding/components/Objective.tsx
index 28ae4c978a..a15dcc6fb2 100644
--- a/apps/web/app/(app)/onboarding/components/Objective.tsx
+++ b/apps/web/app/(app)/onboarding/components/Objective.tsx
@@ -1,11 +1,10 @@
 "use client";
 
 import { updateProfileAction } from "@/app/(app)/onboarding/actions";
-import { env } from "@formbricks/lib/env.mjs";
 import { formbricksEnabled, updateResponse } from "@/app/lib/formbricks";
 import { cn } from "@formbricks/lib/cn";
-import { TProfileObjective } from "@formbricks/types/profile";
-import { TProfile } from "@formbricks/types/profile";
+import { env } from "@formbricks/lib/env.mjs";
+import { TProfile, TProfileObjective } from "@formbricks/types/profile";
 import { Button } from "@formbricks/ui/Button";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -129,7 +128,7 @@ const Objective: React.FC<ObjectiveProps> = ({ next, skip, formbricksResponseId,
         </div>
       </div>
       <div className="mb-24 flex justify-between">
-        <Button size="lg" className="text-slate-400" variant="minimal" onClick={skip} id="objective-skip">
+        <Button size="lg" className="text-slate-500" variant="minimal" onClick={skip} id="objective-skip">
           Skip
         </Button>
         <Button
diff --git a/apps/web/app/(app)/onboarding/components/Onboarding.tsx b/apps/web/app/(app)/onboarding/components/Onboarding.tsx
index 0dec262f26..4a31abd940 100644
--- a/apps/web/app/(app)/onboarding/components/Onboarding.tsx
+++ b/apps/web/app/(app)/onboarding/components/Onboarding.tsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { updateProfileAction } from "@/app/(app)/onboarding/actions";
+import { TProduct } from "@formbricks/types/product";
+import { TProfile } from "@formbricks/types/profile";
 import { Logo } from "@formbricks/ui/Logo";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 import { Session } from "next-auth";
@@ -10,9 +13,6 @@ import Greeting from "./Greeting";
 import Objective from "./Objective";
 import Product from "./Product";
 import Role from "./Role";
-import { TProfile } from "@formbricks/types/profile";
-import { TProduct } from "@formbricks/types/product";
-import { updateProfileAction } from "@/app/(app)/onboarding/actions";
 
 const MAX_STEPS = 6;
 
@@ -75,7 +75,7 @@ export default function Onboarding({ session, environmentId, profile, product }:
         </div>
         <div className="col-span-2 flex items-center justify-center gap-8">
           <div className="relative grow overflow-hidden rounded-full bg-slate-200">
-            <ProgressBar progress={percent} barColor="bg-brand" height={2} />
+            <ProgressBar progress={percent} barColor="bg-brand-dark" height={2} />
           </div>
           <div className="grow-0 text-xs font-semibold text-slate-700">
             {currentStep < 5 ? <>{Math.floor(percent * 100)}% complete</> : <>Almost there!</>}
diff --git a/apps/web/app/(app)/onboarding/components/Role.tsx b/apps/web/app/(app)/onboarding/components/Role.tsx
index fa31635058..c7fff34807 100644
--- a/apps/web/app/(app)/onboarding/components/Role.tsx
+++ b/apps/web/app/(app)/onboarding/components/Role.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { updateProfileAction } from "@/app/(app)/onboarding/actions";
-import { env } from "@formbricks/lib/env.mjs";
 import { createResponse, formbricksEnabled } from "@/app/lib/formbricks";
 import { cn } from "@formbricks/lib/cn";
+import { env } from "@formbricks/lib/env.mjs";
 import { Button } from "@formbricks/ui/Button";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -122,7 +122,7 @@ const Role: React.FC<RoleProps> = ({ next, skip, setFormbricksResponseId }) => {
         </div>
       </div>
       <div className="mb-24 flex justify-between">
-        <Button size="lg" className="text-slate-400" variant="minimal" onClick={skip} id="role-skip">
+        <Button size="lg" className="text-slate-500" variant="minimal" onClick={skip} id="role-skip">
           Skip
         </Button>
         <Button