2/n Fixing dark mode bugs

crates/librqbit/webui/dist/manifest.json

@@ -4,14 +4,14 @@
     "src": "assets/logo.svg"
   },
   "index.css": {
-    "file": "assets/index-6a152703.css",
+    "file": "assets/index-7996684a.css",
     "src": "index.css"
   },
   "index.html": {
     "css": [
-      "assets/index-6a152703.css"
+      "assets/index-7996684a.css"
     ],
-    "file": "assets/index-ba274e55.js",
+    "file": "assets/index-b4a910b9.js",
     "isEntry": true,
     "src": "index.html"
   }

crates/librqbit/webui/src/components/ErrorComponent.tsx

@@ -36,7 +36,7 @@ export const ErrorComponent = (props: {
       {error.details?.statusText && (
         <div className="pb-2 text-md">{error.details?.statusText}</div>
       )}
-      <div className="whitespace-pre-line text-sm">{error.details?.text}</div>
+      <div className="whitespace-pre text-sm">{error.details?.text}</div>
     </AlertDanger>
   );
 };

crates/librqbit/webui/src/components/Spinner.tsx

@@ -1,9 +1,9 @@
-export const Spinner = () => {
+export const Spinner = ({ label }: { label?: string }) => {
   return (
-    <div role="status">
+    <div className="flex gap-2 items-center w-full justify-center">
       <svg
         aria-hidden="true"
-        className="inline w-8 h-8 text-gray-200 animate-spin  fill-blue-600"
+        className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -17,7 +17,11 @@ export const Spinner = () => {
           fill="currentFill"
         />
       </svg>
-      <span className="sr-only">Loading...</span>
+      {label ? (
+        <span className="text-sm">{label} ...</span>
+      ) : (
+        <span className="sr-only">Loading...</span>
+      )}
     </div>
   );
 };

crates/librqbit/webui/src/components/TorrentsList.tsx

@@ -6,26 +6,21 @@ export const TorrentsList = (props: {
   torrents: Array<TorrentId> | null;
   loading: boolean;
 }) => {
-  if (props.torrents === null && props.loading) {
-    return <Spinner />;
-  }
-  // The app either just started, or there was an error loading torrents.
-  if (props.torrents === null) {
-    return;
-  }
-
-  if (props.torrents.length === 0) {
-    return (
-      <div className="text-center">
-        <p>No existing torrents found.</p>
-      </div>
-    );
-  }
   return (
-    <div className="flex flex-col gap-2 mx-2">
+    <div className="flex flex-col gap-2 mx-2 pb-3 sm:px-7">
-      {props.torrents.map((t: TorrentId) => (
+      {props.torrents === null ? (
-        <Torrent id={t.id} key={t.id} torrent={t} />
+        props.loading ? (
-      ))}
+          <Spinner label="Loading torrent list" />
+        ) : null
+      ) : props.torrents.length === 0 ? (
+        <p className="text-center">No existing torrents found.</p>
+      ) : (
+        props.torrents.map((t: TorrentId) => (
+          <>
+            <Torrent id={t.id} key={t.id} torrent={t} />
+          </>
+        ))
+      )}
     </div>
   );
 };

crates/librqbit/webui/src/components/forms/FormCheckbox.tsx

@@ -24,7 +24,11 @@ export const FormCheckbox: React.FC<{
       </div>
       <div className="text-sm flex flex-col gap-1">
         <label htmlFor={name}>{label}</label>
-        {help && <div className="text-xs text-slate-500 mb-3">{help}</div>}
+        {help && (
+          <div className="text-xs text-slate-500 dark:text-slate-300 mb-3">
+            {help}
+          </div>
+        )}
       </div>
     </div>
   );

crates/librqbit/webui/src/components/forms/FormInput.tsx

@@ -25,7 +25,7 @@ export const FormInput: React.FC<{
 }) => {
   return (
     <div className="flex flex-col gap-2 text-sm mb-2">
-      <label htmlFor={name} className="dark:text-slate-500">
+      <label htmlFor={name} className="dark:text-white">
         {label}
       </label>
       <input
@@ -40,7 +40,9 @@ export const FormInput: React.FC<{
         onKeyDown={onKeyDown}
         onChange={onChange}
       />
-      {help && <div className="text-xs text-slate-500">{help}</div>}
+      {help && (
+        <div className="text-xs text-slate-500 dark:text-slate-300">{help}</div>
+      )}
     </div>
   );
 };

crates/librqbit/webui/src/components/modal/FileSelectionModal.tsx

@@ -101,7 +101,7 @@ export const FileSelectionModal = (props: {
 
   const getBody = () => {
     if (listTorrentLoading) {
-      return <Spinner />;
+      return <Spinner label="Loading torrent contents" />;
     } else if (listTorrentError) {
       return <ErrorComponent error={listTorrentError}></ErrorComponent>;
     } else if (listTorrentResponse) {

crates/librqbit/webui/src/components/modal/Modal.tsx

@@ -40,7 +40,7 @@ export const Modal: React.FC<ModalProps> = ({
 }) => {
   const renderBackdrop = () => {
     return (
-      <div className="fixed inset-0 bg-black/30 z-[300] dark:bg-black/60"></div>
+      <div className="fixed inset-0 bg-black/30 z-[300] dark:bg-black/60 backdrop-blur"></div>
     );
   };
   return (
@@ -51,7 +51,7 @@ export const Modal: React.FC<ModalProps> = ({
       className="fixed z-[301] top-0 left-0 w-full h-full block overflow-x-hidden overflow-y-auto"
     >
       <div
-        className={`bg-white shadow-lg my-8 mx-auto max-w-2xl rounded ${className} dark:bg-slate-800`}
+        className={`bg-white shadow-lg my-8 mx-auto max-w-2xl rounded ${className} dark:bg-slate-800 dark:text-zinc-50`}
       >
         <ModalHeader onClose={onClose} title={title} />
         {children}

crates/librqbit/webui/src/globals.css

@@ -1,8 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-
-.dark {
-    @apply bg-gray-800 text-zinc-50
-  }

crates/librqbit/webui/src/rqbit-web.tsx

@@ -67,29 +67,34 @@ export const RqbitWebUI = (props: {
 
   return (
     <AppContext.Provider value={context}>
-      <Header title={props.title} />
+      <div className="dark:bg-gray-900 dark:text-zinc-50 min-h-screen">
-      <div className="relative dark:bg-gray-900">
+        <Header title={props.title} />
-        {/* Menu buttons */}
+        <div className="relative">
-        <div className="absolute top-0 start-0 pl-2 z-10">
+          {/* Menu buttons */}
-          {props.menuButtons &&
+          <div className="absolute top-0 start-0 pl-2 z-10">
-            props.menuButtons.map((b, i) => <span key={i}>{b}</span>)}
+            {props.menuButtons &&
-          <IconButton onClick={() => setLogsOpened(true)}>
+              props.menuButtons.map((b, i) => <span key={i}>{b}</span>)}
-            <BsBodyText />
+            <IconButton onClick={() => setLogsOpened(true)}>
-          </IconButton>
+              <BsBodyText />
-          <IconButton onClick={DarkMode.toggle}>
+            </IconButton>
-            <BsMoon />
+            <IconButton onClick={DarkMode.toggle}>
-          </IconButton>
+              <BsMoon />
+            </IconButton>
+          </div>
+
+          <RootContent
+            closeableError={closeableError}
+            otherError={otherError}
+            torrents={torrents}
+            torrentsLoading={torrentsLoading}
+          />
         </div>
 
-        <RootContent
+        <LogStreamModal
-          closeableError={closeableError}
+          show={logsOpened}
-          otherError={otherError}
+          onClose={() => setLogsOpened(false)}
-          torrents={torrents}
-          torrentsLoading={torrentsLoading}
         />
       </div>
-
-      <LogStreamModal show={logsOpened} onClose={() => setLogsOpened(false)} />
     </AppContext.Provider>
   );
 };

crates/librqbit/webui/tailwind.config.js

@@ -1,26 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    "./index.html",
+  darkMode: "class",
-    "./src/**/*.{js,ts,jsx,tsx}",
+};
-  ],
-  theme: {
-    extend: {
-      fadeIn: {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-      },
-      fadeOut: {
-        from: { opacity: 1 },
-        to: { opacity: 0 },
-      },
-    },
-    animation: {
-      'fade-in': 'fadeIn 0.3s ease-in-out',
-      'fade-out': 'fadeOut 0.3s ease-in-out',
-    },
-  },
-  darkMode: 'class',
-  plugins: [],
-}
-

desktop/src/configure.tsx

@@ -184,7 +184,8 @@ export const ConfigModal: React.FC<{
             const isActive = t === tab;
             let classNames = "text-slate-300";
             if (isActive) {
-              classNames = "text-slate-800 border-b-2 border-blue-800";
+              classNames =
+                "text-slate-800 border-b-2 border-blue-800 dark:border-blue-200 dark:text-white";
             }
             return (
               <button

desktop/tailwind.config.js

@@ -4,8 +4,5 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
     "../crates/librqbit/webui/src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {
+  darkMode: "class",
-    extend: {},
-  },
-  plugins: [],
 };