Fixed DaisyUI installation

2025-09-27 10:52:18 +02:00
parent fc2e9e621e
commit 56dec3a619
11 changed files with 133 additions and 74 deletions
--- a/src/frontend/index.html
+++ b/src/frontend/index.html
@@ -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>
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -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": {
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -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",
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -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;
+}
--- a/src/frontend/src/components/auth/AuthLayout.jsx
+++ b/src/frontend/src/components/auth/AuthLayout.jsx
@@ -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>
  );
 }
--- a/src/frontend/src/components/auth/LoginForm.jsx
+++ b/src/frontend/src/components/auth/LoginForm.jsx
@@ -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 ? (
--- a/src/frontend/src/components/common/ThemeSwither.jsx
+++ b/src/frontend/src/components/common/ThemeSwither.jsx
@@ -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>
+  );
+}
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -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;
 }
+
--- a/src/frontend/src/main.jsx
+++ b/src/frontend/src/main.jsx
@@ -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(
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -9,6 +9,7 @@ export default {
  },
  plugins: [require("daisyui")],
  daisyui: {
-    themes: ["light", "dark"],
+    themes: ["light", "dark", "cupcake"],
+    darkTheme: "dark",
  },
-}
+}
--- a/src/frontend/vite.config.js
+++ b/src/frontend/vite.config.js
@@ -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()],
 })