feat: updated app to tailwind 4.x

src/pages/Channels.tsx

@@ -52,9 +52,13 @@ const ChannelsPage = () => {
         ]}
       >
         <Tabs defaultValue="0">
-          <TabsList>
+          <TabsList className="dark:bg-slate-800 ">
             {allChannels.map((channel) => (
-              <TabsTrigger key={channel.index} value={channel.index.toString()}>
+              <TabsTrigger
+                key={channel.index}
+                value={channel.index.toString()}
+                className="dark:text-white"
+              >
                 {getChannelName(channel)}
               </TabsTrigger>
             ))}

src/pages/Config/DeviceConfig.tsx

@@ -12,11 +12,8 @@ import {
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.tsx";
-import { useDevice } from "@core/stores/deviceStore.ts";
 
 export const DeviceConfig = (): JSX.Element => {
-  const { metadata } = useDevice();
-
   const tabs = [
     {
       label: "Device",
@@ -56,9 +53,13 @@ export const DeviceConfig = (): JSX.Element => {
 
   return (
     <Tabs defaultValue="Device">
-      <TabsList>
+      <TabsList className="dark:bg-slate-800">
         {tabs.map((tab) => (
-          <TabsTrigger key={tab.label} value={tab.label}>
+          <TabsTrigger
+            key={tab.label}
+            value={tab.label}
+            className="dark:text-white"
+          >
             {tab.label}
           </TabsTrigger>
         ))}

src/pages/Config/ModuleConfig.tsx

@@ -71,9 +71,13 @@ export const ModuleConfig = (): JSX.Element => {
 
   return (
     <Tabs defaultValue="MQTT">
-      <TabsList>
+      <TabsList className="dark:bg-slate-800">
         {tabs.map((tab) => (
-          <TabsTrigger key={tab.label} value={tab.label}>
+          <TabsTrigger
+            key={tab.label}
+            value={tab.label}
+            className="dark:text-white"
+          >
             {tab.label}
           </TabsTrigger>
         ))}

src/pages/Dashboard/index.tsx

@@ -41,7 +41,7 @@ export const Dashboard = () => {
                   <li key={device.id}>
                     <button
                       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"}`}
+                      className="w-full px-4 py-4 sm:px-6"
                       onClick={() => {
                         setSelectedDevice(device.id);
                       }}
@@ -89,11 +89,12 @@ export const Dashboard = () => {
             </ul>
           ) : (
             <div className="m-auto flex flex-col gap-3 text-center">
-              <ListPlusIcon size={48} className="mx-auto text-textSecondary" />
+              <ListPlusIcon size={48} className="mx-auto text-text-secondary" />
               <H3>No Devices</H3>
               <Subtle>Connect at least one device to get started</Subtle>
               <Button
                 className="gap-2"
+                variant={"default"}
                 onClick={() => setConnectDialogOpen(true)}
               >
                 <PlusIcon size={16} />

src/pages/Map/index.tsx

@@ -1,11 +1,12 @@
 import { NodeDetail } from "@app/components/PageComponents/Map/NodeDetail";
 import { Avatar } from "@app/components/UI/Avatar";
+import { useTheme } from "@app/core/hooks/useTheme";
 import { PageLayout } from "@components/PageLayout.tsx";
 import { Sidebar } from "@components/Sidebar.tsx";
-import { useAppStore } from "@core/stores/appStore.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Protobuf } from "@meshtastic/js";
 import { bbox, lineString } from "@turf/turf";
+import { current } from "immer";
 import { MapPinIcon } from "lucide-react";
 import { type JSX, useCallback, useEffect, useMemo, useState } from "react";
 import {
@@ -34,9 +35,11 @@ const convertToLatLng = (position: {
 
 const MapPage = (): JSX.Element => {
   const { nodes, waypoints } = useDevice();
-  const { darkMode } = useAppStore();
+  const currentTheme = useTheme();
   const { default: map } = useMap();
 
+  const darkMode = currentTheme === "dark";
+
   const [selectedNode, setSelectedNode] =
     useState<Protobuf.Mesh.NodeInfo | null>(null);
 

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 bg-white text-black"
+              className="w-full p-2 border border-gray-300 rounded-sm bg-white text-slate-900"
             />
           </div>
           <div className="flex flex-col gap-4">
@@ -88,7 +88,7 @@ export const MessagesPage = () => {
           </div>
         </SidebarSection>
       </Sidebar>
-      <div className="flex flex-col flex-grow">
+      <div className="flex flex-col grow">
         <PageLayout
           label={`Messages: ${
             chatType === "broadcast" && currentChannel

src/pages/Nodes.tsx

@@ -4,7 +4,6 @@ import { TracerouteResponseDialog } from "@app/components/Dialog/TracerouteRespo
 import Footer from "@app/components/UI/Footer";
 import { Sidebar } from "@components/Sidebar.tsx";
 import { Avatar } from "@components/UI/Avatar.tsx";
-import { Button } from "@components/UI/Button.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
 import { Table } from "@components/generic/Table/index.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
@@ -79,7 +78,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 bg-white text-black"
+            className="w-full p-2 border border-gray-300 rounded-sm bg-white text-slate-900"
           />
         </div>
         <div className="overflow-y-auto h-full">