Merge branch 'ui-v2' into v2-onboarding

frontend/src/pages/Authentication/SignIn.tsx

@@ -167,12 +167,12 @@ function LoginForm({ handleSubmit }: { handleSubmit: any }) {
       />
       <div className="relative z-10 flex flex-col items-center">
         <div className="mb-3 flex justify-center gap-x-2 text-center">
-          <span className="text-2xl font-bold text-white">Login to</span>
+          <span className="text-2xl font-bold text-white">Log in to</span>
           <span className="text-2xl font-bold text-sky-300"> VectorAdmin</span>
         </div>
         <div className="mb-11 w-[308.65px] text-center">
           <span className="mt-3 text-sm text-white text-opacity-90">
-            Welcome back, please login to your account.
+            Welcome back, please log in to your account.
           </span>
         </div>
         <form onSubmit={handleSubmit} className="z-10">

frontend/src/pages/Authentication/SignUp.tsx

@@ -1,11 +1,9 @@
 import { Link } from 'react-router-dom';
-import LogoDark from '../../images/logo/logo-dark.png';
-import Logo from '../../images/logo/logo-light.png';
-import ManageSvg from '../../images/undraws/manage.svg';
+import SignInImg from '../../images/undraws/sign-in.png';
 import DefaultLayout from '../../layout/DefaultLayout';
 import { useState } from 'react';
 import PreLoader from '../../components/Preloader';
-import { CheckCircle, Key, Mail, XCircle } from 'react-feather';
+import { CheckCircle, XCircle } from 'react-feather';
 import User from '../../models/user';
 import { APP_NAME, STORE_TOKEN, STORE_USER } from '../../utils/constants';
 import paths from '../../utils/paths';
@@ -59,7 +57,30 @@ const SignUp = () => {
 
   return (
     <DefaultLayout>
-      <div className="bg-white">
+      <div className="">
+        <div className="flex flex-wrap items-center">
+          <div className="hidden w-full xl:block xl:w-1/2">
+            <div>
+              <img src={SignInImg} alt="Sign In" />
+            </div>
+          </div>
+
+          <div className="w-full border-stroke xl:w-1/2">
+            <div className="w-full p-4 sm:p-12.5 xl:p-17.5">
+              {stage !== 'ready' ? (
+                <ShowStatus
+                  stage={stage}
+                  results={results}
+                  resetForm={resetStage}
+                />
+              ) : (
+                <LoginForm handleSubmit={handleSubmit} />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* <div className="bg-white">
         <div className="flex flex-wrap items-center">
           <div className="hidden w-full xl:block xl:w-1/2">
             <div className="px-26 py-17.5 text-center">
@@ -99,7 +120,7 @@ const SignUp = () => {
             </div>
           </div>
         </div>
-      </div>
+      </div> */}
     </DefaultLayout>
   );
 };
@@ -153,69 +174,72 @@ function ShowStatus({
 function LoginForm({ handleSubmit }: { handleSubmit: any }) {
   return (
     <>
-      <span className="mb-1.5 block font-medium">New account</span>
-      <h2 className="mb-9 text-2xl font-bold text-black dark:text-white sm:text-title-xl2">
-        Sign Up for {APP_NAME}
-      </h2>
-
-      <form onSubmit={handleSubmit}>
-        <div className="mb-4">
-          <label className="mb-2.5 block font-medium text-black dark:text-white">
-            Email
-          </label>
-          <div className="relative">
-            <input
-              required={true}
-              type="email"
-              name="email"
-              placeholder="Enter your email"
-              className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
-            />
-
-            <span className="absolute right-4 top-4">
-              <Mail className="h-[22px] w-[22px] text-gray-500" />
-            </span>
+      <div
+        style={{
+          background: `
+  radial-gradient(circle at center, transparent 40%, black 100%),
+  linear-gradient(180deg, #85F8FF 0%, #65A6F2 100%)
+`,
+          width: '575px',
+          filter: 'blur(150px)',
+          opacity: '0.5',
+        }}
+        className="absolute right-0 top-0 z-0 h-full w-full"
+      />
+      <div className="relative z-10 flex flex-col items-center">
+        <div className="mb-3 flex justify-center gap-x-2 text-center">
+          <span className="text-2xl font-bold text-white">Sign Up for</span>
+          <span className="text-2xl font-bold text-sky-300">{APP_NAME}</span>
+        </div>
+        <form onSubmit={handleSubmit} className="z-10">
+          <div className="mb-3.5">
+            <div className="">
+              <input
+                required={true}
+                type="email"
+                name="email"
+                placeholder="Enter your email"
+                className="h-11 w-[300px] rounded-lg bg-neutral-800/60 p-2.5 text-white shadow-lg transition-all duration-300 focus:scale-105"
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="mb-4">
-          <label className="mb-2.5 block font-medium text-black dark:text-white">
-            Password
-          </label>
-          <div className="relative">
-            <input
-              required={true}
-              type="password"
-              name="password"
-              min={8}
-              placeholder={`Your ${APP_NAME} account password`}
-              className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
-            />
-
-            <span className="absolute right-4 top-4">
-              <Key className="h-[22px] w-[22px] text-gray-500" />
-            </span>
+          <div className="mb-9">
+            <div className="">
+              <input
+                required={true}
+                type="password"
+                name="password"
+                min={8}
+                placeholder={`Your ${APP_NAME} password`}
+                className="h-11 w-[300px] rounded-lg bg-neutral-800/60 p-2.5 text-white shadow-lg transition-all duration-300 focus:scale-105"
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="mb-5 flex flex-col gap-y-1">
-          <button
-            type="submit"
-            className="w-full cursor-pointer rounded-lg border border-primary bg-primary p-4 text-white transition hover:bg-opacity-90"
-          >
-            Create account
-          </button>
-        </div>
+          <div className="mb-5">
+            <button
+              type="submit"
+              className="h-11
+             w-[300px] items-center rounded-lg bg-white p-2 text-center text-sm font-bold leading-tight text-neutral-700 shadow-lg transition-all duration-300 hover:scale-105 hover:bg-opacity-90"
+            >
+              Create account
+            </button>
+          </div>
 
-        <div className="mt-6 text-center">
-          <p>
-            Already have an account?{' '}
-            <Link to={paths.signIn()} className="text-primary">
-              Sign in
-            </Link>
-          </p>
-        </div>
-      </form>
+          <div className="mt-6 text-center text-sm text-white/90">
+            <p>
+              Already have an account?{' '}
+              <Link
+                to={paths.signIn()}
+                className="font-semibold transition-all duration-300 hover:underline"
+              >
+                Log In
+              </Link>
+            </p>
+          </div>
+        </form>
+      </div>
     </>
   );
 }

frontend/src/pages/Authentication/SystemSetup.tsx

@@ -165,8 +165,8 @@ function LoginForm({ handleSubmit }: { handleSubmit: any }) {
       <p className="mb-1.5 text-sm text-gray-600 ">
         By default {APP_NAME} creates a temporary root account so you can set up
         a system admin account. After creation of this account the root account
-        will no longer be accessible and you will use these credentials to login
-        going forward.
+        will no longer be accessible and you will use these credentials to log
+        in going forward.
         <br />
         <br />
         If you lose your password you will never be able to recover it - so keep

frontend/src/pages/SystemSettings/Settings/index.tsx

@@ -149,8 +149,7 @@ function DebugCredentials({ settings }: { settings: {} }) {
             Database Debug Credentials
           </p>
           <p className="text-sm text-gray-600">
-            Use these credentials to login for direct application database
-            access.
+            Use these credentials to for direct application database access.
             <br />
             Changes done via the database admin UI will <b>not</b> impact
             connected vector databases.