[feat]: redesign the Sign In Page

packages/frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@livepeer/react": "^4.2.7",
     "@radix-ui/react-popover": "^1.1.2",
+    "@tanstack/react-form": "^0.37.1",
     "antd": "^5.21.5",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
@@ -24,7 +25,9 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",
+    "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.6",
+    "tailwind-merge": "^2.4.0",
     "zustand": "^5.0.0"
   },
   "devDependencies": {

packages/frontend/src/lib/components/AccountInOutHeader.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+// import digitDataLogo from "../assets/logo.webp";
+import { LogoIcon } from "../../assets/svg-exports";
+
+export default function AccountInOutHeader({ title, description }) {
+  return (
+    <div className="text-center">
+      <div className="flex flex-col items-center">
+        <LogoIcon theme="dark" />
+      </div>
+      <div className="space-y-2">
+        <h1 className="text-lg bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
+          {title}
+        </h1>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+}

packages/frontend/src/lib/components/FieldInfo.tsx

@@ -0,0 +1,11 @@
+export default function FieldInfo({ field }) {
+  return (
+    <p className="text-sm text-pink-500 mb-2">
+      {field.state.meta.isTouched && field.state.meta.errors.length ? (
+        <>{field.state.meta.errors.join(",")}</>
+      ) : null}
+
+      {field.state.meta.isValidating ? "Validating..." : null}
+    </p>
+  );
+}

packages/frontend/src/lib/components/FormInput.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import FieldInfo from "./FieldInfo";
+import { cn } from "../../utils/cn";
+
+function FormInput({
+  fieldInfo: { name, placeholder, isRequired = true },
+  field,
+}) {
+  return (
+    <>
+      <div className="relative my-6">
+        <input
+          name={name}
+          value={field.state.meta.value}
+          onBlur={field.handleBlur}
+          onChange={(e) => field.handleChange(e.target.value)}
+          className="w-full border border-primary/60  p-4 rounded-md text-sm peer placeholder:text-transparent bg-transparent outline-none"
+          placeholder={placeholder}
+          required={isRequired}
+        />
+        <label
+          className={cn(
+            "text-sm",
+            "absolute -top-5 left-0",
+            "peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-4 peer-placeholder-shown:left-4 peer-focus:-top-6 peer-focus:left-0 peer-focus:text-muted-foreground peer-focus:after:text-red-500 peer-placeholder-shown:after:text-gray-400",
+            "after:content-['*']  transition-all"
+          )}
+        >
+          {placeholder}
+        </label>
+        <FieldInfo field={field} />
+      </div>
+    </>
+  );
+}
+
+export default FormInput;

packages/frontend/src/lib/components/SubmitButton.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { cn } from "../../utils/cn";
+import { BeatLoader } from "react-spinners";
+import { buttonVariants } from "./ui/button";
+
+export default function SubmitButton({ value, formSubscribe: form }) {
+  return (
+    <form.Subscribe
+      selector={(state) => [state.canSubmit, state.isSubmitting]}
+      children={([canSubmit, isSubmitting]) => {
+        return (
+          <button
+            className={cn(
+              "p-4 w-full rounded-md font-medium text-sm",
+              "bg-gray-900 hover:bg-gray-950 text-white",
+              "focus:ring focus:ring-gray-600",
+              "transition-all",
+              buttonVariants({
+                variant: "default",
+              })
+            )}
+            type="submit"
+            disabled={!canSubmit}
+          >
+            {isSubmitting ? <BeatLoader color="#ffffff" size="5px" /> : value}
+          </button>
+        );
+      }}
+    />
+  );
+}

packages/frontend/src/lib/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../../utils/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

packages/frontend/src/network/auth/auth.tsx

@@ -3,8 +3,6 @@ import { storeDataInCookie } from "../../utils/utils";
 import instance from "../axios";
 import { GoogleAuthUrlResponse, User } from "./types";
 
-
-
 // export const login = async (payload: AddProjectProps) => {
 //   const { data } = await instance.post(`/project/create`, payload);
 //   return data;
@@ -42,8 +40,6 @@ export const getUserDetails = async (code: string, provider: string) => {
   }
 };
 
-
-
 export const sendUserAuthOtpMail = async (email: string) => {
   const { data } = await instance.get(`/auth/email/sign-in?email=${email}`);
   return data;