Merge pull request #1311 from Chia-Network/theme-toggle-visibility

feat: theme mode toggle invisible

Author: TheLastCicada

public/config.example.json

@@ -0,0 +1,3 @@
+{
+  "apiHost": "http://foobar.com"
+}

src/renderer/components/blocks/widgets/OrganizationSelector.tsx

@@ -66,7 +66,7 @@ const OrganizationSelector: React.FC<OrganizationSelectorProps> = ({ onSelect, d
           onClick={() => handleSelect(organization)}
           className="flex justify-between items-center"
         >
-          <span className="mr-2.5">{organization.name}</span>
+          {organization.name}
           <SyncIndicator orgUid={organization.orgUid} detailed={false} />
         </Dropdown.Item>
       ))}

src/renderer/components/form/Field.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { FormikValues, useFormikContext } from 'formik';
 import { Checkbox, Datepicker, Label, Textarea, TextInput } from 'flowbite-react';
 import { TagInput } from './TagInput';
-import dayjs from 'dayjs';
 import { Select, SelectOption } from '@/components';
 
 interface FieldProps {
@@ -64,27 +63,27 @@ const Field: React.FC<FieldProps> = ({
 
       switch (type) {
         case 'picklist':
-          return <div className="break-words">{renderOption(options, initialValue)}</div>;
+          return <p className="dark:text-white">{renderOption(options, initialValue)}</p>;
         case 'link':
           return (
             <a href={initialValue} target="_blank" rel="noreferrer" className="text-blue-500 break-words">
               {initialValue}
             </a>
           );
         case 'date':
-          return dayjs(new Date(initialValue)).format('MMMM D, YYYY');
+          return <p className="dark:text-white"> dayjs(new Date(initialValue)).format('MMMM D, YYYY'); </p>;
         case 'tag':
           return (
             <TagInput defaultValue={initialValue} onChange={(tags) => setFieldValue(name, tags)} readonly={readonly} />
           );
         default:
-          return <div className="break-words">{initialValue}</div>;
+          return <p className="dark:text-white">{initialValue}</p>;
       }
     };
     return (
       <div className="mb-4">
         {label && <Label htmlFor={name}>{label}</Label>}
-        <div id={name} className="py-2 text-gray-800 rounded">
+        <div id={name} className="py-2 rounded">
           {renderReadOnlyField()}
         </div>
         {isError && <p className="text-red-500 text-xs italic">{get(errors, name)}</p>}

src/renderer/components/layout/Header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppLogo, ConnectButton, ThemeModeSelector } from '@/components';
+import { AppLogo, ConnectButton } from '@/components';
 
 const Header: React.FC = () => {
   return (
@@ -14,7 +14,6 @@ const Header: React.FC = () => {
           {/* Right-aligned elements with explicit right margin on larger breakpoints */}
           <div className="flex items-center gap-5 text-white">
             <ConnectButton />
-            <ThemeModeSelector />
           </div>
         </div>
       </div>

src/renderer/components/proxy/Sidebar.tsx

@@ -12,7 +12,7 @@ const SidebarTheme = {
     inner: 'h-full overflow-y-auto overflow-x-hidden bg-leftNavBg px-3 py-4 dark:bg-gray-800',
   },
   item: {
-    base: 'flex items-center justify-center rounded-lg p-2 text-base font-normal text-leftNavText hover:text-black hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
+    base: 'flex items-center justify-center rounded-lg p-2 text-leftNavText font-normal text-leftNavText hover:text-black hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
     active: 'bg-leftNavItemActive dark:bg-gray-700 text-black',
   },
 };

src/renderer/pages/AuditPage.tsx

@@ -68,8 +68,8 @@ const AuditPage: React.FC = () => {
   if (!orgUid) {
     return (
       <>
-        <div className="flex flex-col md:flex-row gap-6 px-1 py-2.5 ml-2.5 items-center justify-center min-h-screen bg-gray-800 bg-opacity-50">
-          <div className="p-6 bg-white rounded-lg shadow-xl z-40">
+        <div className="flex flex-col md:flex-row gap-6 px-1 py-2.5 items-center justify-center min-h-screen bg-gray-800 bg-opacity-50">
+          <div className="p-6 bg-white dark:bg-gray-700 rounded-lg shadow-xl z-40">
             <OrganizationSelector onSelect={handleOrganizationSelected} defaultOrgUid={orgUid} />
           </div>
         </div>