Merge pull request #466 from danditomaso/fix/tailwind-4-styling-updates

dark mode styling updates

src/pages/Dashboard/index.tsx

@@ -17,7 +17,6 @@ import { useMemo } from "react";
 export const Dashboard = () => {
   const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
   const { getDevices } = useDeviceStore();
-  const { darkMode } = useAppStore();
 
   const devices = useMemo(() => getDevices(), [getDevices]);
 
@@ -35,7 +34,7 @@ export const Dashboard = () => {
 
         <div className="flex h-[450px] rounded-md border border-dashed border-slate-200 p-3 dark:border-slate-700">
           {devices.length ? (
-            <ul className="grow divide-y divide-gray-200">
+            <ul className="grow divide-y divide-slate-200">
               {devices.map((device) => {
                 return (
                   <li key={device.id}>
@@ -73,10 +72,10 @@ export const Dashboard = () => {
                         </div>
                       </div>
                       <div className="mt-2 sm:flex sm:justify-between">
-                        <div className="flex gap-2 text-sm text-gray-500">
+                        <div className="flex gap-2 text-sm text-slate-500">
                           <UsersIcon
                             size={20}
-                            className="text-gray-400"
+                            className="text-slate-400"
                             aria-hidden="true"
                           />
                           {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
@@ -93,7 +92,7 @@ export const Dashboard = () => {
               <H3>No Devices</H3>
               <Subtle>Connect at least one device to get started</Subtle>
               <Button
-                className="gap-2"
+                className="gap-2 dark:bg-white dark:text-slate-900 dark:hover:text-slate-100"
                 variant={"default"}
                 onClick={() => setConnectDialogOpen(true)}
               >

src/pages/Messages.tsx

@@ -62,7 +62,7 @@ export const MessagesPage = () => {
               placeholder="Search nodes..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full p-2 border border-gray-300 rounded-sm bg-white text-slate-900"
+              className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
             />
           </div>
           <div className="flex flex-col gap-4">

src/pages/Nodes.tsx

@@ -79,7 +79,7 @@ const NodesPage = (): JSX.Element => {
             placeholder="Search nodes..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full p-2 border border-gray-300 rounded-sm bg-white text-slate-900"
+            className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
           />
         </div>
         <div className="overflow-y-auto h-full">