From 790f93322e70550824aad8cf43e56c7fcad4e66c Mon Sep 17 00:00:00 2001
From: Kyle Wistrand <kyle.wistrand@gmail.com>
Date: Sat, 11 Jan 2025 20:56:03 -0800
Subject: [PATCH 1/2] feat: Make nodes on dashboard clickable

---
 src/pages/Dashboard/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index ee2c4693..bdfc660b 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -15,7 +15,7 @@ import {
 import { useMemo } from "react";
 
 export const Dashboard = () => {
-  const { setConnectDialogOpen } = useAppStore();
+  const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
   const { getDevices } = useDeviceStore();
 
   const devices = useMemo(() => getDevices(), [getDevices]);
@@ -38,7 +38,12 @@ export const Dashboard = () => {
               {devices.map((device) => {
                 return (
                   <li key={device.id}>
-                    <div className="px-4 py-4 sm:px-6">
+                    <button
+                      className="w-full px-4 py-4 sm:px-6 hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-100"
+                      onClick={() => {
+                        setSelectedDevice(device.id);
+                      }}
+                    >
                       <div className="flex items-center justify-between">
                         <p className="truncate text-sm font-medium text-accent">
                           {device.nodes.get(device.hardware.myNodeNum)?.user
@@ -75,7 +80,7 @@ export const Dashboard = () => {
                           {device.nodes.size === 0 ? 0 : device.nodes.size - 1}
                         </div>
                       </div>
-                    </div>
+                    </button>
                   </li>
                 );
               })}

From 2bdfbedeeaa527bd51543037c009c7dd1f9ada25 Mon Sep 17 00:00:00 2001
From: Hunter275 <hunter@hunterthornsberry.com>
Date: Wed, 29 Jan 2025 23:50:38 -0500
Subject: [PATCH 2/2] add dark mode classes and biome fixes

---
 src/pages/Dashboard/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index bdfc660b..34dc7aad 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -17,6 +17,7 @@ import { useMemo } from "react";
 export const Dashboard = () => {
   const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
   const { getDevices } = useDeviceStore();
+  const { darkMode } = useAppStore();
 
   const devices = useMemo(() => getDevices(), [getDevices]);
 
@@ -39,7 +40,8 @@ export const Dashboard = () => {
                 return (
                   <li key={device.id}>
                     <button
-                      className="w-full px-4 py-4 sm:px-6 hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-100"
+                      type="button"
+                      className={`w-full px-4 py-4 sm:px-6 ${darkMode ? "hover:bg-slate-800 focus:bg-slate-400 active:bg-slate-600" : "hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-100"}`}
                       onClick={() => {
                         setSelectedDevice(device.id);
                       }}