Merge pull request #1475 from Chia-Network/flowbite1

TheLastCicada · web-flow · commit bd8abcf6b7b0 · 2025-09-05T11:59:24.000-07:00
Fix flowbite styling to for new flowbite version
diff --git a/README.md b/README.md
@@ -133,3 +133,8 @@ The "subject" of the commit follows. It should be a short indication of the chan
 ### Commit linting
 
 Each time you commit the message will be checked against these standards in a pre-commit hook. Additionally all the commits in a PR branch will be linted before it can be merged to master.
+
+## Attribution
+
+* [Document Object Model](https://www.w3.org/TR/DOM-Requirements/) by [W3C](https://www.w3.org/) licensed under [CC BY 4.0](http://creativecommons.org/licenses/by/4.0/)
+* [caniuselite](https://github.com/browserslist/caniuse-lite) by [Browserlist](https://browsersl.ist/) licensed under [CC BY 4.0](http://creativecommons.org/licenses/by/4.0/)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cadt-ui",
   "private": true,
-  "version": "2.0.5",
+  "version": "2.0.6",
   "type": "module",
   "main": "build/main.js",
   "engineStrict": true,
@@ -39,14 +39,15 @@
     "diff": "^7.0.0",
     "express": "^4.21.2",
     "flowbite": "^3.1.2",
-    "flowbite-react": "^0.10.2",
+    "flowbite-react": "^0.12.8",
     "flowbite-typography": "^1.0.5",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",
     "qrcode.react": "^3.2.0",
     "react": "^18.3.1",
     "react-content-loader": "^7.0.2",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.5.0",
     "react-intl": "^7.1.5",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.28.2",
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -57,6 +57,12 @@ function App() {
     if (!configFileLoading) setTimeout(() => setAppLoading(false), 400);
   }, [configFileLoading]);
 
+  // Initialize theme mode on app startup
+  useEffect(() => {
+    // Ensure the body class matches the initial theme state
+    document.body.classList.toggle('dark', appStore.isDarkTheme);
+  }, [appStore.isDarkTheme]);
+
   if (!translationTokens || configFileLoading || themeColorsFileLoading || appLoading) {
     return <ComponentCenteredSpinner />;
   }
diff --git a/src/renderer/components/blocks/modals/CommitTransferErrorModal.tsx b/src/renderer/components/blocks/modals/CommitTransferErrorModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface Props {
diff --git a/src/renderer/components/blocks/modals/CommitTransferSuccessModal.tsx b/src/renderer/components/blocks/modals/CommitTransferSuccessModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface Props {
diff --git a/src/renderer/components/blocks/modals/StagedProjectSuccessModal.tsx b/src/renderer/components/blocks/modals/StagedProjectSuccessModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface StagedProjectSuccessModalProps {
diff --git a/src/renderer/components/blocks/modals/StagedUnitSuccessModal.tsx b/src/renderer/components/blocks/modals/StagedUnitSuccessModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'flowbite-react';
+import { Modal } from '@/components';
 import { FormattedMessage } from 'react-intl';
 
 interface StagedUnitSuccessModalProps {
diff --git a/src/renderer/components/proxy/Button.tsx b/src/renderer/components/proxy/Button.tsx
@@ -1,11 +1,26 @@
-import { Button as FlowbiteButton, ButtonGroupProps, ButtonProps } from 'flowbite-react';
+import {
+  Button as FlowbiteButton,
+  ButtonGroup as FlowbiteButtonGroup,
+  ButtonGroupProps,
+  ButtonProps,
+  Spinner,
+} from 'flowbite-react';
 
-function Button({ children, ...props }: ButtonProps) {
-  return <FlowbiteButton {...props}>{children}</FlowbiteButton>;
+interface CustomButtonProps extends ButtonProps {
+  isProcessing?: boolean;
+}
+
+function Button({ children, isProcessing, disabled, ...props }: CustomButtonProps) {
+  return (
+    <FlowbiteButton disabled={disabled || isProcessing} {...props}>
+      {isProcessing && <Spinner size="sm" className="mr-2" />}
+      {children}
+    </FlowbiteButton>
+  );
 }
 
 function Group({ children, ...props }: ButtonGroupProps) {
-  return <FlowbiteButton.Group {...props}>{children}</FlowbiteButton.Group>;
+  return <FlowbiteButtonGroup {...props}>{children}</FlowbiteButtonGroup>;
 }
 
 Button.Group = Group;
diff --git a/src/renderer/components/proxy/Dropdown.tsx b/src/renderer/components/proxy/Dropdown.tsx
@@ -1,11 +1,16 @@
-import { Dropdown as FlowbiteDropDown, DropdownItemProps, DropdownProps } from 'flowbite-react';
+import {
+  Dropdown as FlowbiteDropDown,
+  DropdownItem as FlowbiteDropdownItem,
+  DropdownItemProps,
+  DropdownProps,
+} from 'flowbite-react';
 
 function Dropdown({ children, ...props }: DropdownProps) {
   return <FlowbiteDropDown {...props}>{children}</FlowbiteDropDown>;
 }
 
 function Item({ children, ...props }: DropdownItemProps) {
-  return <FlowbiteDropDown.Item {...props}>{children}</FlowbiteDropDown.Item>;
+  return <FlowbiteDropdownItem {...props}>{children}</FlowbiteDropdownItem>;
 }
 
 Dropdown.Item = Item;
diff --git a/src/renderer/components/proxy/Modal.tsx b/src/renderer/components/proxy/Modal.tsx
@@ -1,5 +1,8 @@
 import {
   Modal as FlowbiteModal,
+  ModalBody as FlowbiteModalBody,
+  ModalFooter as FlowbiteModalFooter,
+  ModalHeader as FlowbiteModalHeader,
   ModalBodyProps,
   ModalFooterProps,
   ModalHeaderProps,
@@ -19,15 +22,15 @@ function Modal({ children, show = true, ...props }: ModalProps) {
 }
 
 function Body({ children, ...props }: ModalBodyProps) {
-  return <FlowbiteModal.Body {...props}>{children}</FlowbiteModal.Body>;
+  return <FlowbiteModalBody {...props}>{children}</FlowbiteModalBody>;
 }
 
 function Header({ children, ...props }: ModalHeaderProps) {
-  return <FlowbiteModal.Header {...props}>{children}</FlowbiteModal.Header>;
+  return <FlowbiteModalHeader {...props}>{children}</FlowbiteModalHeader>;
 }
 
 function Footer({ children, ...props }: ModalFooterProps) {
-  return <FlowbiteModal.Footer {...props}>{children}</FlowbiteModal.Footer>;
+  return <FlowbiteModalFooter {...props}>{children}</FlowbiteModalFooter>;
 }
 
 Modal.Body = Body;
diff --git a/src/renderer/components/proxy/Sidebar.tsx b/src/renderer/components/proxy/Sidebar.tsx
@@ -1,5 +1,8 @@
 import {
   Sidebar as FlowbiteSidebar,
+  SidebarItem as FlowbiteSidebarItem,
+  SidebarItemGroup as FlowbiteSidebarItemGroup,
+  SidebarItems as FlowbiteSidebarItems,
   SidebarItemGroupProps,
   SidebarItemProps,
   SidebarItemsProps,
@@ -26,15 +29,15 @@ function Sidebar({ children, ...props }: SidebarProps) {
 }
 
 function Items({ children, ...props }: SidebarItemsProps) {
-  return <FlowbiteSidebar.Items {...props}>{children}</FlowbiteSidebar.Items>;
+  return <FlowbiteSidebarItems {...props}>{children}</FlowbiteSidebarItems>;
 }
 
 function ItemGroup({ children, ...props }: SidebarItemGroupProps) {
-  return <FlowbiteSidebar.ItemGroup {...props}>{children}</FlowbiteSidebar.ItemGroup>;
+  return <FlowbiteSidebarItemGroup {...props}>{children}</FlowbiteSidebarItemGroup>;
 }
 
 function Item({ children, ...props }: SidebarItemProps) {
-  return <FlowbiteSidebar.Item {...props}>{children}</FlowbiteSidebar.Item>;
+  return <FlowbiteSidebarItem {...props}>{children}</FlowbiteSidebarItem>;
 }
 
 Sidebar.Item = Item;
diff --git a/src/renderer/components/proxy/Tabs.tsx b/src/renderer/components/proxy/Tabs.tsx
@@ -1,14 +1,14 @@
-import { TabItemProps, Tabs as FlowbiteTabs, TabsProps } from 'flowbite-react';
+import { TabItem as FlowbiteTabItem, TabItemProps, Tabs as FlowbiteTabs, TabsProps } from 'flowbite-react';
 
 function Tabs({ children, ...props }: TabsProps) {
   return <FlowbiteTabs {...props}>{children}</FlowbiteTabs>;
 }
 
 function Item({ children, ...props }: TabItemProps) {
   return (
-    <FlowbiteTabs.Item className="active:on:bg-gray-100 text-cyan-600 dark:bg-gray-800 dark:text-cyan-500" {...props}>
+    <FlowbiteTabItem className="active:on:bg-gray-100 text-cyan-600 dark:bg-gray-800 dark:text-cyan-500" {...props}>
       {children}
-    </FlowbiteTabs.Item>
+    </FlowbiteTabItem>
   );
 }
 
diff --git a/src/renderer/index.css b/src/renderer/index.css
@@ -7,3 +7,32 @@ html, body, #root {
     width: 100%;
 }
 
+/* Ensure light mode is the default and override Flowbite 3.x dark mode defaults */
+html:not(.dark) {
+    color-scheme: light;
+}
+
+html:not(.dark) body {
+    background-color: white;
+    color: #111827; /* gray-900 */
+}
+
+/* Override any Flowbite 3.x default dark mode styles when not in dark mode */
+html:not(.dark) .flowbite {
+    --flowbite-primary-50: #eff6ff;
+    --flowbite-primary-100: #dbeafe;
+    --flowbite-primary-200: #bfdbfe;
+    --flowbite-primary-300: #93c5fd;
+    --flowbite-primary-400: #60a5fa;
+    --flowbite-primary-500: #3b82f6;
+    --flowbite-primary-600: #2563eb;
+    --flowbite-primary-700: #1d4ed8;
+    --flowbite-primary-800: #1e40af;
+    --flowbite-primary-900: #1e3a8a;
+}
+
+/* Ensure consistent font family across the application */
+html, body {
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,8 +1,7 @@
-import * as flowbite from 'flowbite-react/tailwind';
-
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}', flowbite.content()],
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/flowbite/**/*.js', './node_modules/flowbite-react/**/*.js'],
+  darkMode: 'class', // Use class-based dark mode to match your theme toggle system
   theme: {
     extend: {
       colors: {
