make it customalble for daisy

resources/js/Components/ApplicationLogo.jsx

@@ -2,6 +2,6 @@ import React from 'react';
 
 export default function ApplicationLogo({ className }) {
     return (
-        <p>Monitor Doc</p>
+        <p className={className}>Monitor Doc</p>
     );
 }

resources/js/Components/Checkbox.jsx

@@ -6,7 +6,7 @@ export default function Checkbox({ name, value, handleChange }) {
             type="checkbox"
             name={name}
             value={value}
-            className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+            className="rounded text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
             onChange={(e) => handleChange(e)}
         />
     );

resources/js/Components/Dropdown.jsx

@@ -30,7 +30,7 @@ const Trigger = ({ children }) => {
     );
 };
 
-const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white', children }) => {
+const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-base-100', children }) => {
     const { open, setOpen } = useContext(DropDownContext);
 
     let alignmentClasses = 'origin-top';
@@ -76,7 +76,7 @@ const DropdownLink = ({ href, method = 'post', as = 'a', children }) => {
             href={href}
             method={method}
             as={as}
-            className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
+            className="block w-full px-4 py-2 text-left text-sm leading-5 hover:bg-base-200 focus:outline-none transition duration-150 ease-in-out"
         >
             {children}
         </Link>

resources/js/Components/InputLabel.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function InputLabel({ forInput, value, className, children }) {
     return (
-        <label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 ` + className}>
+        <label htmlFor={forInput} className={`block font-medium text-sm ` + className}>
             {value ? value : children}
         </label>
     );

resources/js/Components/ModalConfirm.jsx

@@ -10,7 +10,7 @@ export default function ModalConfirm(props) {
 
     return (
         <div
-            className="modal"
+            className="modal modal-bottom sm:modal-middle pb-10"
             style={
                 isOpen
                     ? {

resources/js/Components/SidebarMenuItem.jsx

@@ -4,7 +4,7 @@ import { Link } from '@inertiajs/inertia-react'
 export default function MenuItem({ routeName, name, active }) {
     return (
         <li>
-            <Link href={route(routeName)} className={`flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white ${route().current(active) ? 'bg-gray-100' : 'hover:bg-gray-100'} dark:hover:bg-gray-700`}>
+            <Link href={route(routeName)} className={`flex items-center p-2 text-base font-normal rounded-lg ${route().current(active) ? 'bg-base-200' : 'hover:bg-base-200'} `}>
             <span className="ml-3">{name}</span>
             </Link>
         </li>

resources/js/Layouts/AuthenticatedLayout.jsx

@@ -10,14 +10,14 @@ export default function Authenticated({ auth, children }) {
     const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
 
     return (
-        <div className="min-h-screen bg-gray-100">
+        <div className="min-h-screen bg-base-200">
-            <nav className="bg-white border-b border-gray-100">
+            <nav className="bg-base-100 border-b border-base-100">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div className="flex justify-between h-16">
                         <div className="flex">
                             <div className="shrink-0 flex items-center">
                                 <Link href="/">
-                                    <ApplicationLogo className="block h-9 w-auto text-gray-500" />
+                                    <ApplicationLogo className="block h-9 w-auto" />
                                 </Link>
                             </div>
 
@@ -35,7 +35,7 @@ export default function Authenticated({ auth, children }) {
                                         <span className="inline-flex rounded-md">
                                             <button
                                                 type="button"
-                                                className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150"
+                                                className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md bg-base-100 focus:outline-none transition ease-in-out duration-150"
                                             >
                                                 {auth.user.name}
 
@@ -121,7 +121,7 @@ export default function Authenticated({ auth, children }) {
             <div className='flex flex-row md:mt-5 max-w-7xl mx-auto'>
                 <div className='w-auto hidden md:block'>
                     <aside className="ml-5 w-64" aria-label="Sidebar">
-                        <div className="overflow-y-auto py-4 px-3 bg-white rounded dark:bg-gray-800">
+                        <div className="overflow-y-auto py-4 px-3 bg-base-100 rounded">
                             <ul className="space-y-2">
                                 <MenuItem routeName='dashboard' active='dashboard' name='Dashboard' />
                                 <MenuItem routeName='docs.index' active='docs.*' name='Monitoring' />

resources/js/Layouts/GuestLayout.jsx

@@ -4,14 +4,8 @@ import { Link } from '@inertiajs/inertia-react';
 
 export default function Guest({ children }) {
     return (
-        <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+        <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-base-200">
-            <div>
+            <div className="card bg-base-100 w-full sm:max-w-md mt-6 px-6 py-4 shadow-md overflow-hidden sm:rounded-lg">
-                <Link href="/">
-                    <ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
-                </Link>
-            </div>
-
-            <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
                 {children}
             </div>
         </div>

resources/js/Pages/Auth/Login.jsx

@@ -6,6 +6,7 @@ import InputLabel from '@/Components/InputLabel';
 import PrimaryButton from '@/Components/PrimaryButton';
 import TextInput from '@/Components/TextInput';
 import { Head, Link, useForm } from '@inertiajs/inertia-react';
+import ApplicationLogo from '@/Components/ApplicationLogo';
 
 export default function Login({ status, canResetPassword }) {
     const { data, setData, post, processing, errors, reset } = useForm({
@@ -34,6 +35,11 @@ export default function Login({ status, canResetPassword }) {
         <GuestLayout>
             <Head title="Log in" />
 
+            <div className='mx-auto mt-5 mb-10'>
+                <Link href="/">
+                    <ApplicationLogo className="font-bold text-2xl" />
+                </Link>
+            </div>
             {status && <div className="mb-4 font-medium text-sm text-green-600">{status}</div>}
 
             <form onSubmit={submit}>
@@ -72,7 +78,7 @@ export default function Login({ status, canResetPassword }) {
                     <label className="flex items-center">
                         <Checkbox name="remember" value={data.remember} handleChange={onHandleChange} />
 
-                        <span className="ml-2 text-sm text-gray-600">Remember me</span>
+                        <span className="ml-2 text-sm ">Remember me</span>
                     </label>
                 </div>
 

resources/js/Pages/Dashboard.jsx

@@ -11,8 +11,8 @@ export default function Dashboard(props) {
             <Head title="Dashboard" />
 
                 <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                    <div className="bg-base-100 overflow-hidden shadow-sm">
-                        <div className="p-6 bg-white border-b border-gray-200">You're logged in!</div>
+                        <div className="p-6 bg-base-100 border-b border-base-200">You're logged in!</div>
                     </div>
                 </div>
         </AuthenticatedLayout>

resources/js/Pages/User/Index.jsx

@@ -55,16 +55,10 @@ export default function Users(props) {
         <AuthenticatedLayout
             auth={props.auth}
             errors={props.errors}
-            header={
-                <h2 className="font-semibold text-xl text-gray-800 leading-tight">
-                    Users
-                </h2>
-            }
         >
             <Head title="Users" />
-            <div className="">
             <div className="flex flex-col w-full sm:px-6 lg:px-8 space-y-2">
-                    <div className="card bg-white w-full">
+                <div className="card bg-base-100 w-full">
                     <div className="card-body">
                         <div className="flex w-full mb-4 justify-between">
                             <div
@@ -131,7 +125,7 @@ export default function Users(props) {
                     </div>
                 </div>
             </div>
-            </div>
+            
             <UserFormModal
                 isOpen={formModal.isOpen}
                 toggle={toggle}

resources/js/Pages/User/UserFormModal.jsx

@@ -56,7 +56,7 @@ export default function UserFormModal(props) {
 
     return (
         <div
-            className="modal"
+            className="modal modal-bottom sm:modal-middle pb-10"
             style={
                 isOpen
                     ? {

resources/views/app.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="corporate">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">

tailwind.config.js

@@ -21,4 +21,8 @@ module.exports = {
         require('@tailwindcss/forms'),
         require("daisyui")
     ],
+
+    daisyui: {
+        themes: ["light", "dark", "corporate"],
+    },
 };