Added tailwind and style login screen

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "trailingComma": "all",
   "singleQuote": true,
   "endOfLine": "lf",

package.json

@@ -13,6 +13,7 @@
     "@tanstack/react-form": "^0.33.0",
     "@tanstack/react-router": "^1.62.0",
     "appwrite": "^16.0.2",
+    "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -21,11 +22,16 @@
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",
     "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss": "^3.4.13",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/Button.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+
+enum ButtonColor {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Error = 'error',
+  Success = 'success',
+}
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  color?: ButtonColor;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  color = ButtonColor.Primary,
+  ...props
+}) => {
+  const buttonClass = classNames(
+    'flex w-full justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+    {
+      'bg-indigo-600 hover:bg-indigo-500 focus-visible:outline-indigo-600':
+        color === ButtonColor.Primary,
+      'bg-gray-600 hover:bg-gray-500 focus-visible:outline-gray-600':
+        color === ButtonColor.Secondary,
+      'bg-red-600 hover:bg-red-500 focus-visible:outline-red-600':
+        color === ButtonColor.Error,
+      'bg-green-600 hover:bg-green-500 focus-visible:outline-green-600':
+        color === ButtonColor.Success,
+    },
+  );
+
+  return (
+    <button className={buttonClass} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export { ButtonColor };
+export default Button;

src/components/Input.tsx

@@ -0,0 +1,25 @@
+const Input = ({
+  label,
+  ...props
+}: React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & {
+  label?: string;
+}) => {
+  return (
+    <>
+      {label && (
+        <label className="block text-sm font-medium leading-6">{label}</label>
+      )}
+      <div className="mt-2">
+        <input
+          className="w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm hover:border-slate-300 focus:border-slate-50 focus:shadow focus:outline-none"
+          {...props}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Input;

src/components/index.ts

@@ -0,0 +1,4 @@
+import Input from './Input';
+import Button, { ButtonColor } from './Button';
+
+export { Input, Button, ButtonColor };

src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

src/pages/Home.tsx

@@ -19,7 +19,7 @@ function Home() {
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
-      <h1>Scrummie-Poker</h1>
+      <h1 className="text-3xl font-bold underline">Scrummie-Poker</h1>
 
       <ul>
         <li>

src/pages/Login.tsx

@@ -1,5 +1,6 @@
 import { useForm } from '@tanstack/react-form';
 import { useUser } from '../lib/context/user';
+import { Button, ButtonColor, Input } from '../components';
 
 const Login = () => {
   const user = useUser();
@@ -15,56 +16,95 @@ const Login = () => {
 
   return (
     <>
-      <h1>Login or register</h1>
+      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
-      <form>
+        <div className="sm:mx-auto sm:w-full sm:max-w-sm">
-        <form.Field
+          <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight">
-          name="email"
+            Sign in to your account
-          children={(field) => (
+          </h2>
-            <input
-              type="email"
-              placeholder="Email"
-              name={field.name}
-              value={field.state.value}
-              onBlur={field.handleBlur}
-              onChange={(e) => field.handleChange(e.target.value)}
-            />
-          )}
-        />
-        <form.Field
-          name="password"
-          children={(field) => (
-            <input
-              type="password"
-              placeholder="Password"
-              name={field.name}
-              value={field.state.value}
-              onBlur={field.handleBlur}
-              onChange={(e) => field.handleChange(e.target.value)}
-            />
-          )}
-        />
-        <div>
-          <button
-            className="button"
-            type="button"
-            onClick={() =>
-              user.login(form.state.values.email, form.state.values.password)
-            }
-          >
-            Login
-          </button>
-          <button
-            className="button"
-            type="button"
-            onClick={() =>
-              user.register(form.state.values.email, form.state.values.password)
-            }
-          >
-            Register
-          </button>
         </div>
-      </form>
+
-      <button onClick={() => user.loginAsGuest()}>Login as guest</button>
+        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+          <form className="space-y-6">
+            <div>
+              <form.Field
+                name="email"
+                children={(field) => (
+                  <Input
+                    label="Email address"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                )}
+              />
+            </div>
+
+            <div>
+              <form.Field
+                name="password"
+                children={(field) => (
+                  <Input
+                    label="Password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    name={field.name}
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                )}
+              />
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between gap-4">
+                <Button
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    user.login(
+                      form.state.values.email,
+                      form.state.values.password,
+                    );
+                  }}
+                >
+                  Sign in
+                </Button>
+
+                <Button
+                  color={ButtonColor.Secondary}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    user.login(
+                      form.state.values.email,
+                      form.state.values.password,
+                    );
+                  }}
+                >
+                  Register
+                </Button>
+              </div>
+            </div>
+          </form>
+
+          <p className="mt-10 text-center text-sm text-gray-500">
+            Don't want to create an account?{' '}
+            <a
+              href="#"
+              className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+              onClick={() => user.loginAsGuest()}
+            >
+              Sign in as a guest
+            </a>
+          </p>
+        </div>
+      </div>
     </>
   );
 };

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};