add: added daisyui and started changin class names

front/package.json

@@ -10,10 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.4",
     "axios": "^1.8.4",
+    "daisyui": "^5.0.28",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.1"
+    "react-router-dom": "^7.5.1",
+    "tailwindcss": "^4.1.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

front/src/components/TopBar.tsx

@@ -1,67 +1,49 @@
-import { useState } from "react"
 import { Link } from "react-router-dom"
 import { User } from "../types"
 
 export default function TopBar({ user }: { user: User | undefined }) {
-    const [burgerMenuOpen, setBurgerMenuOpen] = useState(false)
 
     return (
-        <div className="bank-section topbar">
+        <div className="navbar bg-base-200">
-            <div className="topbar-left">
+            <div className="navbar-start">
-                <Link to="/">Home</Link>
+                <ul className="menu menu-horizontal rounded-box bg-base-300">
+                        <li>
+                            <Link to="/" className="">Home</Link>
+                        </li>
                     {user?.admin == 1 && (
-                    <Link to="/admin">Admin</Link>
+                        <li>
+                            <Link to="/admin" className="">Admin</Link>
+                        </li>
                     )}
+                </ul>
             </div>
-            <div className="topbar-center">
+            <div className="navbar-center text-xl">
                 <h1>Tanuki's Bank</h1>
             </div>
             {user ? (
-                <div className="topbar-right">
+                <div className="navbar-end">
+                    <div className="flex items-center gap-3">
                         <span>{user.name}</span>
-                    <button onClick={() => {
+                        <button className="btn bg-accent" onClick={() => {
                             localStorage.removeItem("token")
                             window.location.reload()
                         }}>
                             Logout
                         </button>
                     </div>
-            ) : (
-                <div className="topbar-right">
-                    <Link to="/login">Login</Link>
-                    <Link to="/register">Register</Link>
-                </div>
-            )}
-            <div className="burger-menu">
-                {burgerMenuOpen && (
-                    <div className="burger-menu-content">
-                        <Link to="/">Home</Link>
-                        {user?.admin == 1 && (
-                            <Link to="/admin">Admin</Link>
-                        )}
-                        {user ? (
-                            <div className="burger-menu-user">
-                                <span>{user.name}</span>
-                                <button onClick={() => {
-                                    localStorage.removeItem("token")
-                                    window.location.reload()
-                                }}>
-                                    Logout
-                                </button>
                 </div>
             ) : (
-                            <div className="burger-menu-user">
+                <div className="navbar-end">
-                                <Link to="/login">Login</Link>
+                    <ul className="menu menu-horizontal rounded-box bg-base-300">
-                                <Link to="/register">Register</Link>
+                        <li>
+                            <Link to="/login" className="">Login</Link>
+                        </li>
+                        <li>
+                            <Link to="/register" className="">Register</Link>
+                        </li>
+                    </ul>
                 </div>
             )}            
         </div>
-                )}
-                <button onClick={() => setBurgerMenuOpen(!burgerMenuOpen)}>
-                    {burgerMenuOpen ? "Close" : "Menu"}
-                </button>
-            </div>
-            
-        </div>
     )
 }

front/src/index.css

@@ -1,4 +1,10 @@
-html {
+@import "tailwindcss";
+@plugin "daisyui" {
+    themes: light --default, autumn --prefersdark;
+}
+
+
+/*html {
     background: #2a6c9b;
     background: linear-gradient(167deg, rgba(42, 108, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(163, 237, 83, 1) 100%);
 }
@@ -79,4 +85,4 @@ html {
         align-items: center;
         gap: 15px;
     }
-}
+}*/

front/src/pages/Login.tsx

@@ -31,15 +31,20 @@ export default function Login () {
     }
 
     return (
-        <div className="bank-page">
+        <div>
             <TopBar user={undefined} />
-            <div className="bank-section">
+            <div className="card bg-base-200 m-4">
+                <form onSubmit={handleSubmit} className="card-body gap-5 flex flex-col items-center">
+                    <div className="card-title">
                         <h1>Login</h1>
-                <form onSubmit={handleSubmit}>
+                    </div>
-                    <input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+                    <input type="text" id="username" name="username" className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
-                    <input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
+                    <input type="password" id="password" name="password" className="input" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
-                    <button type="submit" >Login</button>
+                    <div className="card-actions">
+                        <button type="submit" className="btn bg-accent" >Login</button>
+                    </div>
                 </form>
+                
             </div>
         </div>
     )

front/src/pages/Register.tsx

@@ -46,17 +46,19 @@ export default function Register () {
     }
 
     return (
-        <div className='bank-page'>
+        <div>
             <TopBar user={undefined} />
-            <div className='bank-section'>
+            <div className="card bg-base-200 m-4">
+                <form onSubmit={handleSubmit} className="card-body gap-5 flex flex-col items-center">
+                    <div className='card-title'>
                         <h1>Register</h1>
-                <form onSubmit={handleSubmit}>
+                    </div>
-                    <input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+                    <input type="text" className='input' placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
-                    <input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
+                    <input type="text" className='input' placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
-                    <input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                    <input type="text" className='input' placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
-                    <input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
+                    <input type="text" className='input' placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
-                    <input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                    <input type="password" className='input' placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
-                    <button type="submit">Register</button>
+                    <button type="submit" className='btn bg-accent'>Register</button>
                 </form>
             </div>
         </div>

front/vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   server: {
     proxy: {
       '/api': {