From f048645dc04802831e4a937892b882f4b59d002e Mon Sep 17 00:00:00 2001
From: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
Date: Sun, 19 Nov 2023 23:00:42 +0530
Subject: [PATCH] fix: onboarding gradient

---
 .../tailwind-config-custom/tailwind.config.js |  6 ++++-
 web/components/onboarding/invite-members.tsx  |  5 +----
 web/components/page-views/signin.tsx          | 22 +++----------------
 web/pages/onboarding/index.tsx                | 22 ++++---------------
 web/styles/globals.css                        |  5 +++++
 5 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 905e8e3a8..3807fe43d 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -183,7 +183,7 @@ module.exports = {
             300: convertToRGB("--color-onboarding-background-300"),
             400: convertToRGB("--color-onboarding-background-400"),
           },
-          text:{
+          text: {
             100: convertToRGB("--color-onboarding-text-100"),
             200: convertToRGB("--color-onboarding-text-200"),
             300: convertToRGB("--color-onboarding-text-300"),
@@ -371,6 +371,10 @@ module.exports = {
         80: "18rem",
         96: "21.6rem",
       },
+      backgroundImage: {
+        "gradient-primary": "var( --gradient-onboarding-primary)",
+        "gradient-secondary": "var( --gradient-onboarding-secondary)",
+      },
     },
     fontFamily: {
       custom: ["Inter", "sans-serif"],
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index c05d92664..e76b90cc4 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -172,7 +172,6 @@ export const InviteMembers: React.FC<Props> = (props) => {
   const { finishOnboarding, stepChange, user, workspace } = props;
 
   const { setToastAlert } = useToast();
-  const { resolvedTheme } = useTheme();
 
   const {
     control,
@@ -230,9 +229,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
   return (
     <div className="flex py-14">
       <div
-        className={`hidden lg:block w-1/4 p-3 ml-auto rounded bg-gradient-to-b ${
-          resolvedTheme === "light" ? "from-white to-custom-primary-10/30" : " bg-onboarding-background-100/10"
-        } border border-onboarding-border-100 border-opacity-10`}
+        className={`hidden lg:block w-1/4 p-3 ml-auto rounded bg-gradient-secondary border border-onboarding-border-100 border-opacity-10`}
       >
         <p className="text-base text-onboarding-text-400 font-semibold">Members</p>
 
diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx
index 050bd72ef..11d1524de 100644
--- a/web/components/page-views/signin.tsx
+++ b/web/components/page-views/signin.tsx
@@ -24,7 +24,6 @@ import signInIssues from "public/onboarding/onboarding-issues.svg";
 import { IUser, IUserSettings } from "types";
 // icons
 import { Lightbulb } from "lucide-react";
-import { useTheme } from "next-themes";
 
 const authService = new AuthService();
 
@@ -40,7 +39,6 @@ export const SignInView = observer(() => {
   const [isLoading, setLoading] = useState(false);
   // toast
   const { setToastAlert } = useToast();
-  const { resolvedTheme } = useTheme();
 
   // computed.
   const enableEmailPassword =
@@ -186,13 +184,7 @@ export const SignInView = observer(() => {
           <Spinner />
         </div>
       ) : (
-        <div
-          className={`${
-            resolvedTheme === "dark"
-              ? "bg-[#18191B]"
-              : "bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/80"
-          } h-full overflow-y-auto`}
-        >
+        <div className={`bg-gradient-primary h-full overflow-y-auto`}>
           <div className="sm:py-5 pl-8 pb-4 sm:pl-16 lg:pl-28 ">
             <div className="flex text-3xl items-center mt-16 font-semibold">
               <div className="h-[30px] w-[30px] mr-2">
@@ -203,16 +195,8 @@ export const SignInView = observer(() => {
           </div>
 
           <div className="md:w-2/3 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
-            <div
-              className={`${resolvedTheme === "dark" ? "" : "from-custom-primary-10/10 to-custom-primary-20/30"} p-4`}
-            >
-              <div
-                className={`px-7 sm:px-0 ${
-                  resolvedTheme === "dark"
-                    ? "bg-gradient-to-br from-[#2f3035cc] to-[#212225cc]"
-                    : "bg-gradient-to-br from-white/40 to-white/80"
-                } h-full pt-32 pb-20 rounded-md`}
-              >
+            <div className={`p-4`}>
+              <div className={`px-7 sm:px-0 bg-gradient-secondary h-full pt-32 pb-20 rounded-md`}>
                 {!envConfig ? (
                   <div className="pt-10 mx-auto flex justify-center">
                     <div>
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 7814384f1..6b59ba0f5 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -42,7 +42,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
   const user = currentUser ?? undefined;
   const workspaces = workspaceStore.workspaces;
 
-  const { setTheme, resolvedTheme } = useTheme();
+  const { setTheme } = useTheme();
 
   const {} = useUserAuth("onboarding");
 
@@ -108,13 +108,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
         }}
       />
       {user && step !== null ? (
-        <div
-          className={` ${
-            resolvedTheme === "dark"
-              ? "bg-[#18191B]"
-              : "bg-gradient-to-r from-custom-primary-10/80 to-custom-primary-20/80"
-          } h-full overflow-y-auto`}
-        >
+        <div className={` bg-gradient-primary h-full overflow-y-auto`}>
           <div className="sm:py-14 py-10 px-4 sm:px-7 md:px-14 lg:pl-28 lg:pr-24 flex items-center">
             <div className="w-full flex items-center justify-between font-semibold ">
               <div className="text-3xl flex items-center gap-x-1">
@@ -171,16 +165,8 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
             </div>
           </div>
           <div className="w-full lg:w-4/5 xl:w-3/4 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
-            <div
-              className={`${resolvedTheme === "dark" ? "" : "from-custom-primary-10/10 to-custom-primary-20/30"} p-4`}
-            >
-              <div
-                className={`${
-                  resolvedTheme === "dark"
-                    ? "bg-gradient-to-r from-[#2f3035cc] to-[#212225cc]"
-                    : "bg-gradient-to-br from-white/40 to-white/80"
-                } h-full rounded-md`}
-              >
+            <div className={`bg-gradient-primary p-4`}>
+              <div className={`bg-gradient-secondary h-full rounded-md`}>
                 {step === 1 ? (
                   <JoinWorkspaces
                     setTryDiffAccount={() => {
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 633270a7e..8bee1e66d 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -127,6 +127,9 @@
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
     /* onboarding colors */
+    --gradient-onboarding-primary: linear-gradient(106deg, #F2F6FF 29.8%, #E1EAFF 99.34%);
+    --gradient-onboarding-secondary: linear-gradient(129deg, rgba(255, 255, 255, 0.00) -22.23%, rgba(255, 255, 255, 0.80) 62.98%);
+
     --color-onboarding-text-100: 23, 23, 23;
     --color-onboarding-text-200: 58, 58, 58;
     --color-onboarding-text-300: 82, 82, 82;
@@ -191,6 +194,8 @@
 
 
     /* onboarding colors */
+    --gradient-onboarding-primary: linear-gradient(106deg, #18191B 25.17%, #18191B 99.34%);
+    --gradient-onboarding-secondary: linear-gradient(129deg, rgba(47, 49, 53, 0.80) -22.23%, rgba(33, 34, 37, 0.80) 62.98%);
 
     --color-onboarding-text-100: 237, 238, 240;
     --color-onboarding-text-200: 176, 180, 187;