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

dark mode styling updates

Author: danditomaso

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

src/components/Form/FormWrapper.tsx

@@ -22,7 +22,7 @@ export const FieldWrapper = ({
         <Label>{label}</Label>
         <div className="sm:col-span-2">
           <div className="max-w-lg">
-            <p className="text-sm text-gray-500">{description}</p>
+            <p className="text-sm text-slate-500">{description}</p>
             <p hidden={valid ?? true} className="text-sm text-red-500">
               {validationText}
             </p>

src/components/PageComponents/Connect/HTTP.tsx

@@ -57,7 +57,7 @@ export const HTTP = ({ closeDialog }: TabElementProps): JSX.Element => {
         <Input
           prefix={https ? "https://" : "http://"}
           placeholder="000.000.000.000 / meshtastic.local"
-          className="text-black dark:text-black"
+          className="text-slate-900 dark:text-slate-900"
           disabled={connectionInProgress}
           {...register("ip")}
         />

src/components/PageComponents/Map/NodeDetail.tsx

@@ -121,7 +121,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
 
       <div className="flex mt-2 text-sm">
         <div className="flex items-center grow">
-          <div className="border-2 border-black rounded-sm px-0.5 mr-1">
+          <div className="border-2 border-slate-900 rounded-sm px-0.5 mr-1">
             {Number.isNaN(node.hopsAway) ? "?" : node.hopsAway}
           </div>
           <div>{node.hopsAway === 1 ? "Hop" : "Hops"}</div>

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -51,19 +51,19 @@ export const ChannelChat = ({
 
   if (!messages?.length) {
     return (
-      <div className="flex flex-col h-full w-full container mx-auto">
+      <div className="flex flex-col h-full container mx-auto">
         <div className="flex-1 flex items-center justify-center">
           <EmptyState />
         </div>
-        <div className="shrink-0 p-4 w-full dark:bg-gray-900">
+        <div className="shrink-0 p-4 w-full dark:bg-slate-900">
           <MessageInput to={to} channel={channel} maxBytes={200} />
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full w-full container mx-auto">
+    <div className="flex flex-col h-full container mx-auto">
       <div className="flex-1 overflow-y-auto" ref={scrollContainerRef}>
         <div className="w-full h-full flex flex-col justify-end pl-4 pr-44">
           {messages.map((message, index) => {
@@ -81,7 +81,7 @@ export const ChannelChat = ({
           <div ref={messagesEndRef} className="w-full" />
         </div>
       </div>
-      <div className="shrink-0 mt-2 p-4 w-full dark:bg-gray-900">
+      <div className="shrink-0 mt-2 p-4 w-full dark:bg-slate-900">
         <MessageInput to={to} channel={channel} maxBytes={200} />
       </div>
     </div>

src/components/PageComponents/Messages/Message.tsx

@@ -76,7 +76,7 @@ const StatusIcon = ({ state, className, ...otherProps }: StatusIconProps) => {
   const isFailed = state === MESSAGE_STATES.FAILED;
   const iconClass = cn(
     className,
-    "text-gray-500 dark:text-gray-400 w-4 h-4 shrink-0",
+    "text-slate-500 dark:text-slate-400 w-4 h-4 shrink-0",
   );
 
   const Icon = STATUS_ICON_MAP[state];
@@ -100,7 +100,7 @@ const getMessageTextStyles = (state: MessageState) => {
     "break-words overflow-hidden",
     isAcknowledged
       ? "text-slate-900 dark:text-white"
-      : "text-slate-900 dark:text-gray-400",
+      : "text-slate-900 dark:text-slate-400",
     isFailed && "text-red-500 dark:text-red-500",
   );
 };
@@ -110,10 +110,10 @@ const TimeDisplay = ({
   className,
 }: { date: Date; className?: string }) => (
   <div className={cn("flex items-center gap-2 shrink-0", className)}>
-    <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+    <span className="text-xs text-slate-500 dark:text-slate-400 font-mono">
       {date.toLocaleDateString()}
     </span>
-    <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">
+    <span className="text-xs text-slate-500 dark:text-slate-400 font-mono">
       {date.toLocaleTimeString(undefined, {
         hour: "2-digit",
         minute: "2-digit",
@@ -149,7 +149,7 @@ export const Message = ({ lastMsgSameUser, message, sender }: MessageProps) => {
             <div className="flex place-items-center gap-2 mb-1">
               <Avatar text={messageUser?.shortName} />
               <div className="flex flex-col">
-                <span className="font-medium text-gray-900 dark:text-white truncate">
+                <span className="font-medium text-slate-900 dark:text-white truncate">
                   {messageUser?.longName}
                 </span>
               </div>

src/components/UI/Accordion.tsx

@@ -16,7 +16,7 @@ export const AccordionTrigger = forwardRef<
   <AccordionPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex justify-between items-center w-full p-4 border-b border-gray-200 dark:border-gray-800 group",
+      "flex justify-between items-center w-full p-4 border-b border-slat-200 dark:border-slat-800 group",
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ export const AccordionContent = forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "p-4 border-b border-gray-200 dark:border-gray-800",
+      "p-4 border-b border-slat-200 dark:border-slat-800",
       className,
     )}
     {...props}

src/components/UI/Button.tsx

@@ -9,7 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-slate-900 text-white dark:bg-white dark:text-slate-900 bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-50",
+          "bg-slate-900 text-white dark:bg-slate-900 hover:dark:bg-slate-700 dark:text-slate-100 hover:bg-slate-800 ",
         destructive:
           "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
         success:

src/components/UI/Dialog.tsx

@@ -44,13 +44,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full bg-white max-w-[512px] max-h-[100vh] overflow-y-auto scale-100 gap-4  p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0",
+        "fixed z-50 grid w-full bg-white  max-w-[512px] max-h-[100vh] overflow-y-auto scale-100 gap-4 p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 dark:text-slate-900",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=open]:bg-slate-800">
+      <DialogPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

src/components/UI/Input.tsx

@@ -5,7 +5,7 @@ import { type VariantProps, cva } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 
 const inputVariants = cva(
-  "flex h-10 w-full rounded-md border bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
+  "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:open-dialog:text-slate-900",
   {
     variants: {
       variant: {
@@ -35,7 +35,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="relative w-full">
         {prefix && (
-          <span className="inline-flex items-center rounded-l-md bg-gray-100/90 px-3 font-mono text-sm text-slate-600">
+          <span className="inline-flex items-center rounded-l-md bg-slate-100/80 px-3 font-mono text-sm text-slate-600">
             {prefix}
           </span>
         )}
@@ -50,14 +50,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {suffix && (
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-9 font-mono text-slate-500">
-            <span className="text-gray-100/40 sm:text-sm">{suffix}</span>
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-9 font-mono text-slate-500 dark:text-slate-900">
+            <span className="text-slate-100/40 sm:text-sm">{suffix}</span>
           </div>
         )}
         {action && (
           <button
             type="button"
-            className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-400 focus:outline-hidden "
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-500 hover:text-slate-400 focus:outline-hidden "
             onClick={action.onClick}
           >
             <action.icon size={20} />

src/index.css

@@ -74,7 +74,7 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--color-slate-200, currentColor);
   }
 }
 

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">