Fix timeout and daisyui

2025-11-09 13:10:40 +07:00
parent f3b1d93db3
commit 2ecd4a6306
13 changed files with 148 additions and 233 deletions
--- a/src/Managing.WebApp/package.json
+++ b/src/Managing.WebApp/package.json
@@ -22,6 +22,7 @@
    "@privy-io/react-auth": "^2.7.2",
    "@privy-io/wagmi": "^1.0.3",
    "@tailwindcss/typography": "^0.5.0",
+    "@tailwindcss/vite": "^4.1.17",
    "@tanstack/react-query": "^5.67.1",
    "@tanstack/react-table": "^8.21.3",
    "@wagmi/chains": "^0.2.9",
@@ -57,7 +58,6 @@
    "react-table": "^7.8.0",
    "react-toastify": "^9.0.1",
    "reactflow": "^11.8.3",
-    "tailwindcss": "^3.0.23",
    "viem": "^2.x",
    "wagmi": "^2.15.0",
    "web3": "^4.16.0",
@@ -82,7 +82,7 @@
    "postcss": "^8.4.13",
    "prettier": "^2.6.1",
    "prettier-plugin-tailwind-css": "^1.5.0",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^4.1.17",
    "typescript": "^5.7.3",
    "vite": "^6.3.6",
    "whatwg-fetch": "^3.6.2"
--- a/src/Managing.WebApp/postcss.config.js
+++ b/src/Managing.WebApp/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
  plugins: {
    autoprefixer: {},
-    tailwindcss: {},
  },
 }
--- a/src/Managing.WebApp/src/components/mollecules/Tabs/Tabs.tsx
+++ b/src/Managing.WebApp/src/components/mollecules/Tabs/Tabs.tsx
@@ -29,21 +29,20 @@ const Tabs: FC<ITabsProps> = ({
    >
      <div className="overflow-x-auto scrollbar-hide -mx-4 px-4 mb-6">
        <div 
-          className="tabs tabs-boxed bg-base-200/50 p-1.5 rounded-lg shadow-sm border border-base-300 flex-nowrap min-w-max gap-1" 
+          className="tabs tabs-box" 
          role="tablist" 
          aria-orientation={orientation}
        >
          {tabs.map((tab: any) => (
-            <button
+            <a
              className={
-                'tab whitespace-nowrap flex-shrink-0 px-5 py-2.5 text-sm font-medium transition-all duration-200 rounded-md flex items-center justify-center ' +
-                (selectedTab === tab.index 
-                  ? 'tab-active bg-primary text-primary-content shadow-md font-semibold' 
-                  : 'text-base-content/70 hover:text-base-content hover:bg-base-300/50')
+                'tab' + (selectedTab === tab.index ? ' tab-active' : '')
              }
-              onClick={() => onClick(tab.index)}
+              onClick={(e) => {
+                e.preventDefault()
+                onClick(tab.index)
+              }}
              key={tab.index}
-              type="button"
              role="tab"
              aria-selected={selectedTab === tab.index}
              aria-controls={`tabpanel-${tab.index}`}
@@ -51,22 +50,24 @@ const Tabs: FC<ITabsProps> = ({
              id={`btn-${tab.index}`}
            >
              {tab.label}
-            </button>
+            </a>
          ))}
          {addButton && (
-            <button
-              className="tab whitespace-nowrap flex-shrink-0 px-5 py-2.5 text-sm font-medium transition-all duration-200 rounded-md flex items-center justify-center text-base-content/70 hover:text-base-content hover:bg-base-300/50"
-              onClick={onAddButton}
+            <a
+              className="tab"
+              onClick={(e) => {
+                e.preventDefault()
+                onAddButton?.()
+              }}
              key={'add'}
-              type="button"
              role="tab"
              aria-selected={false}
-              aria-controls={`tabpanel-${'add'}`}
+              aria-controls={`tabpanel-add`}
              tabIndex={-1}
-              id={`btn-${'add'}`}
+              id={`btn-add`}
            >
              +
-            </button>
+            </a>
          )}
        </div>
      </div>
--- a/src/Managing.WebApp/src/hooks/useTheme.tsx
+++ b/src/Managing.WebApp/src/hooks/useTheme.tsx
@@ -157,7 +157,51 @@ const useTheme = () => {

  useEffect(() => {
    if (typeof window !== 'undefined') {
-      document.documentElement.setAttribute('data-theme', themeName)
+      const key = '[data-theme=' + themeName + ']'
+      const theme = themes[key]
+      
+      if (theme) {
+        // Set data-theme attribute
+        document.documentElement.setAttribute('data-theme', themeName)
+        
+        // Apply CSS custom properties from JavaScript theme definitions
+        const root = document.documentElement
+        Object.entries(theme).forEach(([key, value]) => {
+          if (key.startsWith('--')) {
+            // Already a CSS custom property, apply directly
+            root.style.setProperty(key, value)
+          } else {
+            // Convert color values to CSS custom properties format
+            // Map daisyUI color names to CSS variables
+            const cssVarMap: Record<string, string> = {
+              accent: '--color-accent',
+              'base-100': '--color-base-100',
+              'base-200': '--color-base-200',
+              'base-300': '--color-base-300',
+              'base-content': '--color-base-content',
+              error: '--color-error',
+              'error-content': '--color-error-content',
+              info: '--color-info',
+              'info-content': '--color-info-content',
+              neutral: '--color-neutral',
+              'neutral-content': '--color-neutral-content',
+              'neutral-focus': '--color-neutral-focus',
+              primary: '--color-primary',
+              'primary-content': '--color-primary-content',
+              secondary: '--color-secondary',
+              'secondary-content': '--color-secondary-content',
+              success: '--color-success',
+              'success-content': '--color-success-content',
+              warning: '--color-warning',
+              'warning-content': '--color-warning-content',
+              'accent-content': '--color-accent-content',
+            }
+            
+            const cssVarName = cssVarMap[key] || `--color-${key}`
+            root.style.setProperty(cssVarName, value)
+          }
+        })
+      }
    }
  }, [themeName])

--- a/src/Managing.WebApp/src/styles/app.css
+++ b/src/Managing.WebApp/src/styles/app.css
@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .App-logo {
  width: 1.5em;
 }
@@ -17,8 +19,14 @@
  }
 }

-button {
-  font-size: calc(10px + 2vmin);
+/* Base button font size - daisyUI size classes (btn-sm, btn-xs, btn-lg) will override this */
+button.btn:not(.btn-xs):not(.btn-sm):not(.btn-lg) {
+  font-size: 0.875rem; /* 14px - standard button text size */
+}
+
+/* Ensure buttons without daisyUI classes also have reasonable font size */
+button:not(.btn) {
+  font-size: 0.875rem;
 }

 .notificationWrapper {
--- a/src/Managing.WebApp/src/styles/globals.css
+++ b/src/Managing.WebApp/src/styles/globals.css
@@ -1,6 +1,36 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: black, coffee, cyberpunk, lofi, retro, kaigen;
+};
+
+@plugin "daisyui/theme" {
+  name: "kaigen";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+  
+  --animation-btn: 0;
+  --animation-input: 0;
+  --btn-focus-scale: 1;
+  --btn-text-case: lowercase;
+  --rounded-badge: 0;
+  --rounded-box: 0;
+  --rounded-btn: 0;
+  --tab-radius: 0;
+  
+  --color-accent: #343232;
+  --color-base-100: #0B0B0B;
+  --color-base-200: #0D0D0D;
+  --color-base-300: #0B0B0B;
+  --color-error: #FF5340;
+  --color-info: #B0DB43;
+  --color-neutral: #151515;
+  --color-neutral-focus: #343232;
+  --color-primary: #54B5F9;
+  --color-secondary: #a3d9fe;
+  --color-success: #08C25F;
+  --color-warning: #EB6F22;
+};

@layer base {
  html, body {
--- a/src/Managing.WebApp/vite.config.ts
+++ b/src/Managing.WebApp/vite.config.ts
@@ -1,5 +1,6 @@
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import {defineConfig} from 'vite'

 export default defineConfig({
  build: {
@@ -12,7 +13,7 @@ export default defineConfig({
      target: 'es2022',
    },
  },
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
  publicDir: 'assets',
  server: {
    host: true,