kodjo/MyDocManager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed DaisyUI installation

Browse Source
This commit is contained in:
Kodjo Sossouvi
2025-09-27 10:52:18 +02:00
parent fc2e9e621e
commit 56dec3a619
11 changed files with 133 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/frontend/index.html
View File

@@ -1,10 +1,10 @@
<!doctype html>
<html lang="en">
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>My Documents Manager</title>
</head>
<body>
<div id="root"></div>

8
src/frontend/package-lock.json generated
View File

@@ -20,7 +20,7 @@
"@types/react-dom": "^19.1.7",
"@vitejs/plugin-react": "^5.0.0",
"autoprefixer": "^10.4.21",
"daisyui": "^5.1.23",
"daisyui": "^5.1.24",
"eslint": "^9.33.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
@@ -1964,9 +1964,9 @@
"license": "MIT"
},
"node_modules/daisyui": {
"version": "5.1.23",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.23.tgz",
"integrity": "sha512-HgxmDidqO0FrcrkMVRz7KYwQi+eoZarMVud2kx5cGhTmTlaJPne/gbsSEn4/vM1svbp40ENCMjJsbBldCXhrOA==",
"version": "5.1.24",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.1.24.tgz",
"integrity": "sha512-CFfVmaTNOM4H6rJ7YjD8pIZNmRg6merSI2Yx0cP2cOSvyfG571zSPf8Y8m6rLqsteVrE6cqI+hBcpJqNB3YqkA==",
"dev": true,
"license": "MIT",
"funding": {

2
src/frontend/package.json
View File

@@ -22,7 +22,7 @@
"@types/react-dom": "^19.1.7",
"@vitejs/plugin-react": "^5.0.0",
"autoprefixer": "^10.4.21",
"daisyui": "^5.1.23",
"daisyui": "^5.1.24",
"eslint": "^9.33.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",

43
src/frontend/src/App.css
View File

@@ -1,45 +1,6 @@
@import "tailwindcss";
@plugin "daisyui";
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
max-width: 1280px;
margin: 0 auto;
}

12
src/frontend/src/components/auth/AuthLayout.jsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import ThemeSwitcher from "../common/ThemeSwither.jsx";
/**
* AuthLayout component for authentication pages
@@ -13,19 +14,12 @@ function AuthLayout({children}) {
{/* Main container with flex centering */}
<div className="min-h-screen flex items-center justify-center p-4">
{/* Content wrapper for responsive spacing */}
<div className="w-full max-w-md">
<ThemeSwitcher />
<div>
{children}
</div>
</div>
{/* Optional decorative elements */}
<div className="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden -z-10">
{/* Subtle geometric background pattern */}
<div className="absolute top-20 left-10 w-32 h-32 bg-primary/5 rounded-full blur-2xl"></div>
<div className="absolute bottom-20 right-10 w-40 h-40 bg-secondary/5 rounded-full blur-2xl"></div>
<div
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-60 h-60 bg-accent/3 rounded-full blur-3xl"></div>
</div>
</div>
);
}

16
src/frontend/src/components/auth/LoginForm.jsx
View File

@@ -92,11 +92,11 @@ function LoginForm() {
};
return (
<div className="card w-full max-w-md shadow-xl bg-base-100">
<div className="card max-w-md shadow-xl bg-base-100">
<div className="card-body">
{/* Card Header */}
<div className="text-center mb-6">
<h1 className="text-3xl font-bold text-primary">MyDocManager</h1>
<h1 className="text-3xl font-bold text-primary">My Documents DocManager</h1>
<p className="text-base-content/70 mt-2">Sign in to your account</p>
</div>
@@ -121,9 +121,9 @@ function LoginForm() {
)}
{/* Login Form */}
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit}>
{/* Username Field */}
<div className="form-control">
<div id="username">
<label className="label">
<span className="label-text font-medium">Username</span>
</label>
@@ -133,7 +133,7 @@ function LoginForm() {
value={formData.username}
onChange={handleInputChange}
placeholder="Enter your username"
className={`input input-bordered w-full ${
className={`input input-bordered w-full${
formErrors.username ? 'input-error' : ''
}`}
disabled={loading}
@@ -147,7 +147,7 @@ function LoginForm() {
</div>
{/* Password Field */}
<div className="form-control">
<div id="password">
<label className="label">
<span className="label-text font-medium">Password</span>
</label>
@@ -157,7 +157,7 @@ function LoginForm() {
value={formData.password}
onChange={handleInputChange}
placeholder="Enter your password"
className={`input input-bordered w-full ${
className={`input input-bordered ${
formErrors.password ? 'input-error' : ''
}`}
disabled={loading}
@@ -174,7 +174,7 @@ function LoginForm() {
<div className="form-control mt-6">
<button
type="submit"
className={`btn btn-primary w-full btn-hover-effect ${loading ? 'loading' : ''}`}
className={`btn btn-primary w-1/3 btn-hover-effect ${loading ? 'loading' : ''}`}
disabled={loading}
>
{loading ? (

103
src/frontend/src/components/common/ThemeSwither.jsx Normal file
View File

@@ -0,0 +1,103 @@
import React from "react";
const themes = [
"light", "dark", "cupcake"
];
export default function ThemeSwitcher() {
return (
<div title="Change Theme" className="dropdown dropdown-end block">
<div
tabIndex={0}
role="button"
className="btn group btn-sm gap-1.5 px-1.5 btn-ghost"
aria-label="Change Theme"
>
<div
className="bg-base-100 group-hover:border-base-content/20 border-base-content/10 grid shrink-0 grid-cols-2 gap-0.5 rounded-md border p-1 transition-colors">
<div className="bg-base-content size-1 rounded-full"></div>
<div className="bg-primary size-1 rounded-full"></div>
<div className="bg-secondary size-1 rounded-full"></div>
<div className="bg-accent size-1 rounded-full"></div>
</div>
<svg
width="12px"
height="12px"
className="mt-px hidden size-2 fill-current opacity-60 sm:inline-block"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2048 2048"
>
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
</svg>
</div>
<div
tabIndex={0}
className="dropdown-content bg-base-200 text-base-content rounded-box top-px h-[30.5rem] max-h-[calc(100vh-8.6rem)] overflow-y-auto border-[length:var(--border)] border-white/5 shadow-2xl outline-[length:var(--border)] outline-black/5 mt-16"
>
<ul className="menu w-56">
<li className="menu-title text-xs">Thème</li>
{themes.map((theme) => (
<li key={theme}>
<button
className="gap-3 px-2"
data-set-theme={theme}
data-act-class="[&_svg]:visible"
>
<div
data-theme={theme}
className="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"
>
<div className="bg-base-content size-1 rounded-full"></div>
<div className="bg-primary size-1 rounded-full"></div>
<div className="bg-secondary size-1 rounded-full"></div>
<div className="bg-accent size-1 rounded-full"></div>
</div>
<div className="w-32 truncate">{theme}</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
className="invisible h-3 w-3 shrink-0"
>
<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
</svg>
</button>
</li>
))}
<li>
<a href="/theme-generator/">
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 fill-current"
viewBox="0 0 512 512"
>
<path d="M96,208H48a16,16,0,0,1,0-32H96a16,16,0,0,1,0,32Z"></path>
<line x1="90.25" y1="90.25" x2="124.19" y2="124.19"></line>
<path
d="M124.19,140.19a15.91,15.91,0,0,1-11.31-4.69L78.93,101.56a16,16,0,0,1,22.63-22.63l33.94,33.95a16,16,0,0,1-11.31,27.31Z"></path>
<path d="M192,112a16,16,0,0,1-16-16V48a16,16,0,0,1,32,0V96A16,16,0,0,1,192,112Z"></path>
<line x1="293.89" y1="90.25" x2="259.95" y2="124.19"></line>
<path
d="M260,140.19a16,16,0,0,1-11.31-27.31l33.94-33.95a16,16,0,0,1,22.63,22.63L271.27,135.5A15.94,15.94,0,0,1,260,140.19Z"></path>
<line x1="124.19" y1="259.95" x2="90.25" y2="293.89"></line>
<path
d="M90.25,309.89a16,16,0,0,1-11.32-27.31l33.95-33.94a16,16,0,0,1,22.62,22.63l-33.94,33.94A16,16,0,0,1,90.25,309.89Z"></path>
<path
d="M219,151.83a26,26,0,0,0-36.77,0l-30.43,30.43a26,26,0,0,0,0,36.77L208.76,276a4,4,0,0,0,5.66,0L276,214.42a4,4,0,0,0,0-5.66Z"></path>
<path
d="M472.31,405.11,304.24,237a4,4,0,0,0-5.66,0L237,298.58a4,4,0,0,0,0,5.66L405.12,472.31a26,26,0,0,0,36.76,0l30.43-30.43h0A26,26,0,0,0,472.31,405.11Z"></path>
</svg>
<div className="grow text-sm font-bold">Créer votre thème!</div>
</a>
</li>
</ul>
</div>
</div>
);
}

5
src/frontend/src/index.css
View File

@@ -5,6 +5,7 @@
/* Custom styles for the application */
body {
@apply bg-base-100 text-base-content;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
margin: 0;
}

1
src/frontend/src/main.jsx
View File

@@ -1,6 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import './App.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(

3
src/frontend/tailwind.config.js
View File

@@ -9,6 +9,7 @@ export default {
},
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark"],
themes: ["light", "dark", "cupcake"],
darkTheme: "dark",
},
}

6
src/frontend/vite.config.js
View File

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