fix: updates to overall site styling in dark mode

src/components/Dialog/DeviceNameDialog.tsx

@@ -26,7 +26,7 @@ export interface DeviceNameDialogProps {
 export const DeviceNameDialog = ({
   open,
   onOpenChange,
-}: DeviceNameDialogProps): JSX.Element => {
+}: DeviceNameDialogProps) => {
   const { hardware, nodes, connection } = useDevice();
 
   const myNode = nodes.get(hardware.myNodeNum);
@@ -60,9 +60,13 @@ export const DeviceNameDialog = ({
         <div className="gap-4">
           <form onSubmit={onSubmit}>
             <Label>Long Name</Label>
-            <Input {...register("longName")} />
+            <Input className="dark:text-slte-900" {...register("longName")} />
             <Label>Short Name</Label>
-            <Input maxLength={4} {...register("shortName")} />
+            <Input
+              className="dark:text-slte-900"
+              maxLength={4}
+              {...register("shortName")}
+            />
           </form>
         </div>
         <DialogFooter>

src/components/Dialog/ImportDialog.tsx

@@ -104,6 +104,7 @@ export const ImportDialog = ({
           <Input
             value={importDialogInput}
             suffix={validUrl ? "✅" : "❌"}
+            className="dark:text-slate-900"
             onChange={(e) => {
               setImportDialogInput(e.target.value);
             }}

src/components/Dialog/NodeDetailsDialog.tsx

@@ -44,12 +44,12 @@ export const NodeDetailsDialog = ({
         <DialogFooter>
           <div className="w-full">
             <DeviceImage
-              className="w-32 h-32 mx-auto rounded-lg border-4 border-gray-200 dark:border-gray-800"
+              className="w-32 h-32 mx-auto rounded-lg border-4 border-slate-200 dark:border-slate-800"
               deviceType={
                 Protobuf.Mesh.HardwareModel[device.user?.hwModel ?? 0]
               }
             />
-            <div className="mt-5 bg-gray-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+            <div className="bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
               <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
                 Details:
               </p>
@@ -78,7 +78,7 @@ export const NodeDetailsDialog = ({
             </div>
 
             {device.position ? (
-              <div className="mt-5 bg-gray-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+              <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
                 <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
                   Position:
                 </p>
@@ -103,7 +103,7 @@ export const NodeDetailsDialog = ({
             ) : null}
 
             {device.deviceMetrics ? (
-              <div className="mt-5 bg-gray-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+              <div className="mt-5 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
                 <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
                   Device Metrics:
                 </p>
@@ -138,7 +138,7 @@ export const NodeDetailsDialog = ({
             ) : null}
 
             {device ? (
-              <div className="mt-5 w-full max-w-[464px] bg-gray-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
+              <div className="mt-5 w-full max-w-[464px] bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
                 <Accordion className="AccordionRoot" type="single" collapsible>
                   <AccordionItem className="AccordionItem" value="item-1">
                     <AccordionTrigger>

src/components/Dialog/QRDialog.tsx

@@ -100,7 +100,7 @@ export const QRDialog = ({
           <div className="flex justify-center">
             <button
               type="button"
-              className={`border-black border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${
+              className={`border-slate-900 border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${
                 qrCodeAdd
                   ? "focus:ring-green-800 bg-green-800 text-white"
                   : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
@@ -111,7 +111,7 @@ export const QRDialog = ({
             </button>
             <button
               type="button"
-              className={`border-black border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${
+              className={`border-slate-900 border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2 ${
                 !qrCodeAdd
                   ? "focus:ring-green-800 bg-green-800 text-white"
                   : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
@@ -127,6 +127,7 @@ export const QRDialog = ({
           <Input
             value={qrCodeUrl}
             disabled={true}
+            className="dark:text-slate-900"
             action={{
               icon: ClipboardIcon,
               onClick() {

src/components/Dialog/RebootDialog.tsx

@@ -36,6 +36,7 @@ export const RebootDialog = ({
         <div className="flex gap-2 p-4">
           <Input
             type="number"
+            className="dark:text-slate-900"
             value={time}
             onChange={(e) => setTime(Number.parseInt(e.target.value))}
             action={{

src/components/Dialog/ShutdownDialog.tsx

@@ -39,6 +39,7 @@ export const ShutdownDialog = ({
             type="number"
             value={time}
             onChange={(e) => setTime(Number.parseInt(e.target.value))}
+            className="dark:text-slate-900"
             suffix="Minutes"
           />
           <Button