finish structuring login page

mrodrigues95 · Dec 10, 2023 · 028831d · 028831d
1 parent d6a77b8
commit 028831d
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 40 deletions.
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -4,7 +4,6 @@ import { ReactNode } from 'react';
 import { Inter as FontSans } from 'next/font/google';
 
 import { cn } from '@chatse/toolkit';
-import { RootProvider } from './root-provider';
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -15,7 +14,7 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
   return (
     <html lang="en-US" dir="ltr">
       <body className={cn('flex min-h-screen flex-col font-sans antialiased', fontSans.variable)}>
-        <RootProvider>{children}</RootProvider>
+        {children}
       </body>
     </html>
   );

diff --git a/apps/web/app/login/layout.tsx b/apps/web/app/login/layout.tsx
@@ -1,7 +1,17 @@
 import { ReactNode } from 'react';
 
+import { Button, Text } from '@chatse/toolkit';
+
 const LoginLayout = ({ children }: { children: ReactNode }) => (
-  <main className="flex flex-1 flex-col items-center justify-center">{children}</main>
+  <main className="flex flex-1 flex-col p-4 lg:p-8">
+    {children}
+    <footer className="flex shrink-0 flex-col items-center justify-center space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
+      <Text variant="p" as="span" className="text-sm font-semibold">
+        New to Chatse?
+      </Text>
+      <Button variant="outline">Create an account</Button>
+    </footer>
+  </main>
 );
 
 export default LoginLayout;
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
@@ -1,28 +1,51 @@
 'use client';
 
-import { Button, Form, Link, Text } from '@chatse/toolkit';
+import { Button, Form, Text } from '@chatse/toolkit';
+import { Link } from '../../src/components/link';
 
 const Login = () => {
   return (
-    <>
-      <Text variant="h1" className="mb-8 text-center">
-        Sign In
-      </Text>
-      <Form className="w-full max-w-sm">
-        <Form.Input label="Email address" name="email" type="email" isRequired />
-        <Form.Input
-          label="Password"
-          name="password"
-          type="password"
-          autoComplete="current-password"
-          isRequired
-        />
-        <Button type="submit" className="w-full">
-          Sign in to account
-        </Button>
-      </Form>
-      <Link href="/">Forgot password?</Link>
-    </>
+    <section className="flex flex-1 flex-col items-center justify-center">
+      <div className="w-full max-w-sm">
+        <Text variant="h1" className="mb-8 text-center">
+          Sign In
+        </Text>
+        <Form className="w-full">
+          <Form.Input label="Email address" name="email" type="email" isRequired />
+          <Form.Input
+            label="Password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            isRequired
+          />
+          <Button type="submit" className="w-full" variant="solid">
+            Sign in to account
+          </Button>
+        </Form>
+        <Link href="/" size="xs" className="mx-auto mt-2.5 block w-max">
+          Forgot password?
+        </Link>
+        <hr className="my-8 w-full border border-slate-200" />
+        <div>
+          <Button variant="outline" className="w-full">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="100"
+              height="100"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              fill="currentColor"
+              aria-hidden="true"
+              className="h-4 w-4"
+            >
+              <path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032 s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2 C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z"></path>
+            </svg>
+            Sign in with Google
+          </Button>
+        </div>
+      </div>
+    </section>
   );
 };
 

diff --git a/apps/web/app/root-provider.tsx b/apps/web/app/root-provider.tsx
diff --git a/apps/web/src/components/link.tsx b/apps/web/src/components/link.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { forwardRef, ReactNode } from 'react';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import { VariantProps } from 'class-variance-authority';
+
+import { buttonVariants, cn } from '@chatse/toolkit';
+
+interface LinkProps extends NextLinkProps, VariantProps<typeof buttonVariants> {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ variant = 'link', size, className, ...props }, ref) => (
+    <NextLink {...props} className={cn(buttonVariants({ variant, size, className }))} ref={ref} />
+  ),
+);
+
+Link.displayName = 'Link';
diff --git a/libs/toolkit/src/components/button/button.tsx b/libs/toolkit/src/components/button/button.tsx
@@ -15,13 +15,24 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-slate-100 text-slate-600 hover:bg-slate-200 hover:text-slate-900',
-        danger:
-          'text-red-600 hover:bg-red-100 focus-visible:bg-red-100 focus-visible:ring-red-600 data-[focus-visible=true]:bg-red-100 data-[focus-visible=true]:ring-red-600',
-        outline:
-          'border-2 border-slate-200 bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900',
-        ghost: 'bg-transparent text-slate-500 hover:bg-slate-100 hover:text-slate-900',
-        link: 'text-slate-900 underline-offset-4 hover:underline',
+        default: ['bg-slate-100 text-slate-700', 'hover:bg-slate-200 hover:text-slate-900'],
+        solid: ['bg-slate-900 text-white', 'hover:bg-slate-700'],
+        danger: [
+          'text-red-600 hover:bg-red-100',
+          'focus-visible:bg-red-100 focus-visible:ring-red-600',
+          'data-[focus-visible=true]:bg-red-100 data-[focus-visible=true]:ring-red-600',
+        ],
+        outline: [
+          'border-2 border-slate-200 bg-transparent text-slate-700',
+          'hover:bg-slate-100 hover:text-slate-900',
+        ],
+        ghost: ['bg-transparent text-slate-500', 'hover:bg-slate-100 hover:text-slate-900'],
+        link: [
+          'text-slate-900 underline-offset-4',
+          'hover:underline',
+          'focus-visible:underline focus-visible:ring-0',
+          'data-[focus-visible=true]:underline data-[focus-visible=true]:ring-0',
+        ],
       },
       size: {
         xs: 'px-2 py-1 text-xs',