chore: add background pattern in admin auth forms and minor ui fixes.

admin/app/login/components/sign-in-form.tsx

@@ -11,7 +11,7 @@ import { Banner } from "components/common";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 // helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 
 // service initialization
 const authService = new AuthService();
@@ -95,8 +95,12 @@ export const InstanceSignInForm: FC = (props) => {
     <div className="relative w-full h-full overflow-hidden container mx-auto px-5 md:px-0 flex justify-center items-center">
       <div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
         <div className="text-center space-y-1">
-          <h3 className="text-3xl font-bold">Manage your Plane instance</h3>
+          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-          <p className="font-medium text-custom-text-400">Configure instance-wide settings to secure your instance</p>
+            Manage your Plane instance
+          </h3>
+          <p className="font-medium text-onboarding-text-400">
+            Configure instance-wide settings to secure your instance
+          </p>
         </div>
 
         {errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}
@@ -111,11 +115,11 @@ export const InstanceSignInForm: FC = (props) => {
           <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
           <div className="w-full space-y-1">
-            <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
               Email <span className="text-red-500">*</span>
             </label>
             <Input
-              className="w-full"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -128,12 +132,12 @@ export const InstanceSignInForm: FC = (props) => {
           </div>
 
           <div className="w-full space-y-1">
-            <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
               Password <span className="text-red-500">*</span>
             </label>
             <div className="relative">
               <Input
-                className={cn("w-full pr-10")}
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
                 type={showPassword ? "text" : "password"}

admin/app/setup/components/sign-up-form.tsx

@@ -11,7 +11,7 @@ import { Banner, PasswordStrengthMeter } from "components/common";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 // helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 
 // service initialization
@@ -125,8 +125,12 @@ export const InstanceSignUpForm: FC = (props) => {
     <div className="relative w-full min-h-full h-auto overflow-hidden container mx-auto px-5 lg:px-0 flex justify-center items-center">
       <div className="w-full md:w-4/6 lg:w-3/6 xl:w-2/6 space-y-10">
         <div className="text-center space-y-1">
-          <h3 className="text-3xl font-bold">Setup your Plane Instance</h3>
+          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-          <p className="font-medium text-custom-text-400">Post setup you will be able to manage this Plane instance.</p>
+            Setup your Plane Instance
+          </h3>
+          <p className="font-medium text-onboarding-text-400">
+            Post setup you will be able to manage this Plane instance.
+          </p>
         </div>
 
         {errorData.type &&
@@ -146,11 +150,11 @@ export const InstanceSignUpForm: FC = (props) => {
 
           <div className="flex items-center gap-4">
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
+              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
                 First name <span className="text-red-500">*</span>
               </label>
               <Input
-                className="w-full"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="first_name"
                 name="first_name"
                 type="text"
@@ -162,11 +166,11 @@ export const InstanceSignUpForm: FC = (props) => {
               />
             </div>
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
+              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
                 Last name
               </label>
               <Input
-                className="w-full"
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="last_name"
                 name="last_name"
                 type="text"
@@ -179,11 +183,11 @@ export const InstanceSignUpForm: FC = (props) => {
           </div>
 
           <div className="w-full space-y-1">
-            <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
               Email <span className="text-red-500">*</span>
             </label>
             <Input
-              className="w-full"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               id="email"
               name="email"
               type="email"
@@ -199,11 +203,11 @@ export const InstanceSignUpForm: FC = (props) => {
           </div>
 
           <div className="w-full space-y-1">
-            <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
               Company name
             </label>
             <Input
-              className="w-full"
+              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               id="company_name"
               name="company_name"
               type="text"
@@ -215,12 +219,12 @@ export const InstanceSignUpForm: FC = (props) => {
           </div>
 
           <div className="w-full space-y-1">
-            <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
               Set a password <span className="text-red-500">*</span>
             </label>
             <div className="relative">
               <Input
-                className={cn("w-full pr-10")}
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 id="password"
                 name="password"
                 type={showPassword ? "text" : "password"}
@@ -269,7 +273,7 @@ export const InstanceSignUpForm: FC = (props) => {
                 value={formData.confirm_password}
                 onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                 placeholder="Confirm password"
-                className={cn("w-full pr-10")}
+                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               />
               {showPassword ? (
                 <button
@@ -304,7 +308,10 @@ export const InstanceSignUpForm: FC = (props) => {
                 checked={formData.is_telemetry_enabled}
               />
             </div>
-            <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+            <label
+              className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
+              htmlFor="is_telemetry_enabled"
+            >
               Allow Plane to anonymously collect usage events.
             </label>
             <a href="https://docs.plane.so/telemetry" className="text-sm font-medium text-blue-500 hover:text-blue-600">

admin/components/instance/instance-not-ready.tsx

@@ -13,7 +13,7 @@ export const InstanceNotReady: FC = () => (
       <div className="relative flex flex-col justify-center items-center space-y-4">
         <h1 className="text-3xl font-bold">Welcome aboard Plane!</h1>
         <Image src={PlaneTakeOffImage} alt="Plane Logo" />
-        <p className="font-medium text-base text-custom-text-400">
+        <p className="font-medium text-base text-onboarding-text-400">
           Get started by setting up your instance and workspace
         </p>
       </div>

admin/layouts/default-layout.tsx

@@ -2,7 +2,10 @@
 
 import { FC, ReactNode } from "react";
 import Image from "next/image";
-// logo
+import { useTheme } from "next-themes";
+// logo/ images
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 type TDefaultLayout = {
@@ -11,16 +14,27 @@ type TDefaultLayout = {
 
 export const DefaultLayout: FC<TDefaultLayout> = (props) => {
   const { children } = props;
+  // hooks
+  const { resolvedTheme } = useTheme();
 
   return (
-    <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
+    <div className="relative">
-      <div className="container h-[100px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-        <div className="flex items-center gap-x-2">
+        <div className="container h-[100px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
-          <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+          <div className="flex items-center gap-x-2">
-          <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
+          </div>
         </div>
+        <div className="absolute inset-0 z-0">
+          <Image
+            src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
+            className="w-screen h-full object-cover"
+            alt="Plane background pattern"
+          />
+        </div>
+        <div className="relative z-10 w-full px-5 lg:px-0 mb-[100px] flex-grow">{children}</div>
       </div>
-      <div className="w-full px-5 lg:px-0 mb-[100px] flex-grow">{children}</div>
     </div>
   );
 };

space/components/views/auth.tsx

@@ -11,8 +11,8 @@ import { AuthRoot, UserLoggedIn } from "@/components/accounts";
 import useAuthRedirection from "@/hooks/use-auth-redirection";
 import { useMobxStore } from "@/lib/mobx/store-provider";
 // images
-import PlaneBackgroundPatternDark from "public/onboarding/background-pattern-dark.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text-new.png";
 
 export const AuthView = observer(() => {

space/pages/accounts/forgot-password.tsx

@@ -17,8 +17,8 @@ import useTimer from "@/hooks/use-timer";
 // services
 import { AuthService } from "@/services/authentication.service";
 // images
-import PlaneBackgroundPatternDark from "public/onboarding/background-pattern-dark.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 type TForgotPasswordFormValues = {

space/pages/accounts/reset-password.tsx

@@ -16,8 +16,8 @@ import { getPasswordStrength } from "@/helpers/password.helper";
 // services
 import { AuthService } from "@/services/authentication.service";
 // images
-import PlaneBackgroundPatternDark from "public/onboarding/background-pattern-dark.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 type TResetPasswordFormValues = {

web/components/page-views/signup.tsx

@@ -12,8 +12,8 @@ import { NAVIGATE_TO_SIGNIN } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker } from "@/hooks/store";
 // assets
-import PlaneBackgroundPatternDark from "public/onboarding/background-pattern-dark.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 export const SignUpView = observer(() => {

web/pages/accounts/forgot-password.tsx

@@ -28,8 +28,8 @@ import { AuthenticationWrapper } from "@/lib/wrappers";
 // services
 import { AuthService } from "@/services/auth.service";
 // images
-import PlaneBackgroundPatternDark from "public/onboarding/background-pattern-dark.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 type TForgotPasswordFormValues = {

web/pages/accounts/reset-password.tsx

@@ -22,8 +22,8 @@ import { AuthenticationWrapper } from "@/lib/wrappers";
 // services
 import { AuthService } from "@/services/auth.service";
 // images
-import PlaneBackgroundPatternDark from "public/onboarding/background-pattern-dark.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 type TResetPasswordFormValues = {

web/pages/accounts/set-password.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useRouter } from "next/router";
 // icons
+import { useTheme } from "next-themes";
 import { Eye, EyeOff } from "lucide-react";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
@@ -21,7 +22,8 @@ import { NextPageWithLayout } from "@/lib/types";
 // services
 import { AuthService } from "@/services/auth.service";
 // images
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 type TResetPasswordFormValues = {
@@ -50,6 +52,8 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
   });
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  // hooks
+  const { resolvedTheme } = useTheme();
 
   const { data: user } = useUser();
 
@@ -93,7 +97,11 @@ const SetPasswordPage: NextPageWithLayout = observer(() => {
     <div className="relative">
       <PageHead title="Reset Password" />
       <div className="absolute inset-0 z-0">
-        <Image src={PlaneBackgroundPattern} className="w-screen object-cover" alt="Plane background pattern" />
+        <Image
+          src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
+          className="w-screen object-cover"
+          alt="Plane background pattern"
+        />
       </div>
       <div className="relative z-10">
         <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">

web/pages/accounts/sign-in.tsx

@@ -19,8 +19,8 @@ import { NextPageWithLayout } from "@/lib/types";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
 // assets
-import PlaneBackgroundPatternDark from "public/onboarding/background-pattern-dark.svg";
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/onboarding/background-pattern.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 
 export type AuthType = "sign-in" | "sign-up";

web/public/auth/background-pattern-dark.svg

@@ -0,0 +1,68 @@
+<svg width="1512" height="900" viewBox="0 0 1512 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4817_18724)">
+<rect width="1512" height="900" fill="#1B1C1E"/>
+<g opacity="0.09">
+<line x1="-10.6172" y1="624.328" x2="1500.96" y2="624.328" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="301.59" x2="1500.96" y2="301.59" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="462.958" x2="1500.96" y2="462.958" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="785.696" x2="1500.96" y2="785.696" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="140.22" x2="1500.96" y2="140.22" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="543.642" x2="1500.96" y2="543.642" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="866.381" x2="1500.96" y2="866.381" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="220.904" x2="1500.96" y2="220.904" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="382.272" x2="1500.96" y2="382.272" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="705.012" x2="1500.96" y2="705.013" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="-10.6172" y1="59.534" x2="1500.96" y2="59.534" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="36.3273" y1="-49.8457" x2="36.3273" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="681.808" y1="-49.8457" x2="681.808" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="359.068" y1="-49.8457" x2="359.068" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="1004.54" y1="-49.8457" x2="1004.54" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="1327.28" y1="-49.8457" x2="1327.28" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="197.698" y1="-49.8457" x2="197.698" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="843.173" y1="-49.8457" x2="843.173" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="520.439" y1="-49.8457" x2="520.439" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="1165.92" y1="-49.8457" x2="1165.92" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="1488.66" y1="-49.8457" x2="1488.66" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="117.015" y1="-49.8457" x2="117.015" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="762.491" y1="-49.8457" x2="762.491" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="439.751" y1="-49.8457" x2="439.751" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="1085.23" y1="-49.8457" x2="1085.23" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="1407.97" y1="-49.8457" x2="1407.97" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="278.384" y1="-49.8457" x2="278.384" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="923.861" y1="-49.8457" x2="923.86" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="601.12" y1="-49.8457" x2="601.12" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+<line x1="1246.6" y1="-49.8457" x2="1246.6" y2="1117.56" stroke="white" stroke-opacity="0.18" stroke-width="0.6"/>
+</g>
+<g opacity="0.5">
+<rect x="440.141" y="785.309" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1165.39" y="221.433" width="80.8965" height="80" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="520.367" y="463.207" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1085.39" y="301.659" width="80.2262" height="80.3408" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1166" y="382" width="80.2262" height="80.08" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1247" y="301" width="80.2262" height="81.08" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="439.994" y="221.433" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1085.39" y="221.433" width="80" height="80" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="439.994" y="463.207" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="359.914" y="785.309" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="359.914" y="865.535" width="80.2262" height="81.3723" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="198.314" y="705.082" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1005.16" y="59.835" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="924.059" y="-20.8525" width="80.2262" height="79.5062" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="924.059" y="59.4053" width="80.2262" height="80.0285" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="116.943" y="58.6885" width="81.3723" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="36.7168" y="59.835" width="81.3723" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="116.943" y="138.915" width="81.3723" height="82.5184" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="440.141" y="-21.5381" width="81.3723" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="198.316" y="300.513" width="80.2262" height="81.3723" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1166.76" y="705.082" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1246.99" y="785.309" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="37" y="220" width="81" height="82" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="-44" y="140" width="81" height="82" fill="#3F76FF" fill-opacity="0.07"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_4817_18724">
+<rect width="1512" height="900" fill="white"/>
+</clipPath>
+</defs>
+</svg>

web/public/auth/background-pattern.svg

@@ -0,0 +1,68 @@
+<svg width="1512" height="900" viewBox="0 0 1512 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4817_18582)">
+<rect width="1512" height="900" fill="white"/>
+<g opacity="0.09">
+<line x1="-10.6172" y1="625.328" x2="1500.96" y2="625.328" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="302.59" x2="1500.96" y2="302.59" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="463.958" x2="1500.96" y2="463.958" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="786.696" x2="1500.96" y2="786.696" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="141.22" x2="1500.96" y2="141.22" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="544.642" x2="1500.96" y2="544.642" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="867.381" x2="1500.96" y2="867.381" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="221.904" x2="1500.96" y2="221.904" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="383.272" x2="1500.96" y2="383.272" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="706.012" x2="1500.96" y2="706.013" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="-10.6172" y1="60.534" x2="1500.96" y2="60.534" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="36.3273" y1="-48.8457" x2="36.3273" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="681.808" y1="-48.8457" x2="681.808" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="359.068" y1="-48.8457" x2="359.068" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="1004.54" y1="-48.8457" x2="1004.54" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="1327.28" y1="-48.8457" x2="1327.28" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="197.698" y1="-48.8457" x2="197.698" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="843.173" y1="-48.8457" x2="843.173" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="520.439" y1="-48.8457" x2="520.439" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="1165.92" y1="-48.8457" x2="1165.92" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="1488.66" y1="-48.8457" x2="1488.66" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="117.015" y1="-48.8457" x2="117.015" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="762.491" y1="-48.8457" x2="762.491" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="439.751" y1="-48.8457" x2="439.751" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="1085.23" y1="-48.8457" x2="1085.23" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="1407.97" y1="-48.8457" x2="1407.97" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="278.384" y1="-48.8457" x2="278.384" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="923.861" y1="-48.8457" x2="923.86" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="601.12" y1="-48.8457" x2="601.12" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+<line x1="1246.6" y1="-48.8457" x2="1246.6" y2="1118.56" stroke="#1F2D5C" stroke-opacity="0.4" stroke-width="0.6"/>
+</g>
+<g opacity="0.5">
+<rect x="440.141" y="786.309" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1166.76" y="222.433" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="520.367" y="464.207" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1085.39" y="302.659" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1166" y="383" width="80.2262" height="80.08" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1247" y="302" width="80.2262" height="81.08" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="439.994" y="222.433" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1085.39" y="222.433" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="439.994" y="464.207" width="80.2262" height="79.0801" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="359.914" y="786.309" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="359.914" y="866.535" width="80.2262" height="81.3723" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="198.314" y="706.082" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1005.16" y="60.835" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="924.059" y="-19.8525" width="80.2262" height="79.5062" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="924.059" y="60.4053" width="80.2262" height="80.0285" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="116.943" y="59.6885" width="81.3723" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="36.7168" y="60.835" width="81.3723" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="116.943" y="139.915" width="81.3723" height="82.5184" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="440.141" y="-20.5381" width="81.3723" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="198.316" y="301.513" width="80.2262" height="81.3723" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1166.76" y="706.082" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="1246.99" y="786.309" width="80.2262" height="80.2262" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="37" y="221" width="81" height="82" fill="#3F76FF" fill-opacity="0.07"/>
+<rect x="-44" y="141" width="81" height="82" fill="#3F76FF" fill-opacity="0.07"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_4817_18582">
+<rect width="1512" height="900" fill="white"/>
+</clipPath>
+</defs>
+</svg>