added classes to torrentRow and globas.css for dark mode

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

@@ -7,7 +7,7 @@ import Logo from "../../assets/logo.svg?react";
 export const Header = ({ title }: { title: string }) => {
   const [name, version] = title.split("-");
   return (
-    <header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center mb-3 dark:bg-slate-800">
+    <header className="bg-slate-50 drop-shadow-lg flex flex-wrap justify-center lg:justify-between items-center dark:bg-slate-800">
       <div className="flex flex-nowrap items-center justify-between m-2">
         <Logo className="w-10 h-10 p-1" alt="logo" />
         <h1 className="flex items-center dark:text-white">

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

@@ -1,5 +1,4 @@
 import {
-  MdCheck,
   MdCheckCircle,
   MdDownload,
   MdError,

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

@@ -45,7 +45,7 @@ export const TorrentRow: React.FC<{
   };
 
   return (
-    <section className="flex flex-col sm:flex-row items-center gap-2 border p-2 border-gray-200 rounded-xl shadow-xs hover:drop-shadow-sm">
+    <section className="flex flex-col sm:flex-row items-center gap-2 border p-2 border-gray-200 rounded-xl shadow-xs hover:drop-shadow-sm dark:bg-slate-800 dark:border-slate-900">
       {/* Icon */}
       <div className="hidden md:block">{statusIcon("w-10 h-10")}</div>
       {/* Name, progress, stats */}
@@ -53,7 +53,7 @@ export const TorrentRow: React.FC<{
         {detailsResponse && (
           <div className="flex items-center gap-2">
             <div className="md:hidden">{statusIcon("w-5 h-5")}</div>
-            <div className="text-left text-lg text-gray-900 text-ellipsis break-all">
+            <div className="text-left text-lg text-gray-900 text-ellipsis break-all dark:text-slate-200">
               {getLargestFileName(detailsResponse)}
             </div>
           </div>

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

@@ -22,7 +22,7 @@ export const TorrentsList = (props: {
     );
   }
   return (
-    <div className="flex flex-col gap-2 mx-2">
+    <div className="flex flex-col gap-2 mx-2 mt-3">
       {props.torrents.map((t: TorrentId) => (
         <Torrent id={t.id} key={t.id} torrent={t} />
       ))}

crates/librqbit/webui/src/globals.css

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

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

@@ -67,7 +67,7 @@ export const RqbitWebUI = (props: {
   return (
     <AppContext.Provider value={context}>
       <Header title={props.title} />
-      <div className="relative">
+      <div className="relative dark:bg-gray-900 pt-3 min-h-screen h-full">
         {/* Menu buttons */}
         <div className="absolute top-0 start-0 pl-2 z-10">
           {props.menuButtons &&