[WEB-4539] chore: updated tour modal colors (#3817)

* chore: updated tour modal colors

* chore: upgrade screen gradient color

* chore: code refactor

* chore: updated avatar to workspace

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>

apps/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx

@@ -70,7 +70,8 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": userProfile?.theme.theme === "dark",
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            userProfile?.theme.theme === "light",
         })}
       >
         <div className="relative flex flex-col justify-center gap-7 px-14 lg:w-1/2">

apps/web/core/components/importers/empty-state.tsx

@@ -22,7 +22,7 @@ export const ImportersEmptyState: FC<ImportersEmptyStateProps> = observer((props
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
           "bg-gradient-to-l from-[#343434] via-[#484848]  to-[#1E1E1E]": theme === "dark",
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": theme === "light",
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400": theme === "light",
         })}
       >
         <div className="relative flex flex-col justify-center gap-7 pl-8 lg:w-1/2">

apps/web/core/components/onboarding/tour/root.tsx

@@ -5,7 +5,7 @@ import { useParams } from "next/navigation";
 import { ArrowRight } from "lucide-react";
 import { Avatar, Button, PlaneLockup } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
-import { useUser, useWorkspace } from "@/hooks/store";
+import { useWorkspace } from "@/hooks/store";
 
 export type TTourSteps = "welcome" | "work-items" | "cycles" | "modules" | "views" | "pages";
 
@@ -43,14 +43,13 @@ type Props = {
 export const TourRoot: React.FC<Props> = observer((props) => {
   const { onComplete } = props;
   const { workspaceSlug } = useParams();
-  const { data: currentUser } = useUser();
   const { getWorkspaceBySlug } = useWorkspace();
   const currentWorkspace = getWorkspaceBySlug(workspaceSlug.toString());
 
-  if (!currentUser) return null;
+  if (!currentWorkspace) return null;
 
   return (
-    <div className="flex bg-custom-primary-200 rounded-lg w-[60%]">
+    <div className="flex bg-[#006399] rounded-lg w-[60%]">
       <div className="w-[40%] py-9 px-8 flex flex-col gap-5 justify-around">
         <div className="font-medium text-white flex items-center gap-2 justify-center">
           <PlaneLockup className="h-6 w-auto" /> <span className="font-bold text-2xl mt-2">Business</span>
@@ -69,7 +68,12 @@ export const TourRoot: React.FC<Props> = observer((props) => {
           <p className="font-medium text-custom-text-100 text-lg">
             Features you&apos;ll get with <span className="text-custom-primary-90">Business</span> plan
           </p>
-          <Avatar src={getFileURL(currentUser.avatar_url)} size={30} shape="square" />
+          <Avatar
+            src={getFileURL(currentWorkspace.logo_url || "")}
+            name={currentWorkspace?.name}
+            size={30}
+            shape="square"
+          />
           <p>
             <span className="font-medium">{currentWorkspace?.name}</span> workspace with Business
           </p>

apps/web/ee/components/active-cycles/workspace-active-cycles-upgrade.tsx

@@ -69,7 +69,8 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": userProfile?.theme.theme === "dark",
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": userProfile?.theme.theme === "light",
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            userProfile?.theme.theme === "light",
         })}
       >
         <div className="relative flex flex-col justify-center gap-7 px-14 lg:w-1/2">

apps/web/ee/components/customers/upgrade.tsx

@@ -26,7 +26,8 @@ export const CustomerUpgrade: FC = observer(() => {
         <div
           className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
             "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-            "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+            "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+              !resolvedTheme?.includes("dark"),
           })}
         >
           <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/dashboards/feature-flag-fallback.tsx

@@ -61,7 +61,7 @@ export const DashboardsFeatureFlagFallback = observer(() => {
       <div
         className={cn("min-h-[25rem] flex item-center justify-between rounded-xl mb-5 lg:mb-12", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": isDarkMode,
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !isDarkMode,
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400": !isDarkMode,
         })}
       >
         <div className="relative flex flex-col justify-center gap-7 px-14 lg:w-1/2">

apps/web/ee/components/epics/upgrade.tsx

@@ -48,7 +48,8 @@ export const EpicsUpgrade: FC = observer(() => {
       <div
         className={cn("flex flex-col md:flex-row rounded-xl mt-5 xl:flex-row", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            !resolvedTheme?.includes("dark"),
         })}
       >
         <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/initiatives/upgrade.tsx

@@ -99,7 +99,8 @@ export const InitiativesUpgrade: FC<Props> = observer((props) => {
       <div
         className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            !resolvedTheme?.includes("dark"),
         })}
       >
         <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/integrations/empty-state.tsx

@@ -25,7 +25,7 @@ export const IntegrationsEmptyState: FC<IntegrationsEmptyStateProps> = observer(
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
           "bg-gradient-to-l from-[#343434] via-[#484848]  to-[#1E1E1E]": theme === "dark",
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": theme === "light",
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400": theme === "light",
         })}
       >
         <div className="relative flex flex-col justify-center gap-7 pl-8 lg:w-1/2">

apps/web/ee/components/marketplace/applications/applications-upgrade.tsx

@@ -29,7 +29,8 @@ export const ApplicationsUpgrade: FC = observer(() => {
       <div
         className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            !resolvedTheme?.includes("dark"),
         })}
       >
         <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/project-overview/upgrade.tsx

@@ -28,7 +28,8 @@ export const ProjectUpdatesUpgrade = observer(() => {
       <div
         className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            !resolvedTheme?.includes("dark"),
         })}
       >
         <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/teamspaces/upgrade.tsx

@@ -55,7 +55,8 @@ export const TeamspaceUpgrade: FC = observer(() => {
       <div
         className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            !resolvedTheme?.includes("dark"),
         })}
       >
         <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/templates/settings/upgrade.tsx

@@ -34,7 +34,8 @@ export const TemplatesUpgrade: FC<TTemplatesUpgradeProps> = observer((props: TTe
       <div
         className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-          "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+          "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+            !resolvedTheme?.includes("dark"),
         })}
       >
         <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/workflow/page/upgrade.tsx

@@ -28,7 +28,8 @@ export const WorkflowUpgrade: FC = observer(() => {
     <div
       className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
         "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-        "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+        "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+          !resolvedTheme?.includes("dark"),
       })}
     >
       <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>

apps/web/ee/components/workspace-project-states/settings/upgrade.tsx

@@ -29,7 +29,8 @@ const Upgrade = observer(() => {
     <div
       className={cn("flex flex-col rounded-xl mt-5 xl:flex-row", {
         "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": resolvedTheme?.includes("dark"),
-        "bg-gradient-to-l from-[#3b5ec6] to-[#f5f7fe]": !resolvedTheme?.includes("dark"),
+        "bg-gradient-to-l from-[#EBEBEB] to-[#FAFAFA] border border-custom-border-400":
+          !resolvedTheme?.includes("dark"),
       })}
     >
       <div className={cn("flex w-full flex-col  justify-center relative p-5 xl:pl-10 xl:min-h-[25rem]")}>