updated color scheme

1 year ago · 0b0c571f5d
28 changed files with 48 additions and 43 deletions
--- a/src/components/Dialog/DeviceNameDialog.tsx
+++ b/src/components/Dialog/DeviceNameDialog.tsx
@ -83,6 +83,7 @@ export const DeviceNameDialog = ({
                label: "Long Name",
                type: "text",
                properties: {
+                  className: 'text-slate-900 dark:text-slate-200',
                  fieldLength: {
                    currentValueLength: currentLongNameLength ?? 0,
                    max: MAX_LONG_NAME_BYTE_LENGTH,
--- a/src/components/Dialog/ImportDialog.tsx
+++ b/src/components/Dialog/ImportDialog.tsx
@ -109,7 +109,6 @@ export const ImportDialog = ({
          <Input
            value={importDialogInput}
            suffix={validUrl ? "✅" : "❌"}
-            className="dark:text-slate-900"
            onChange={(e) => {
              setImportDialogInput(e.target.value);
            }}
--- a/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
+++ b/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
@ -131,7 +131,7 @@ export const NodeDetailsDialog = ({

              {device.deviceMetrics && (
                <div className="text-slate-900 dark:text-slate-100 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">
+                  <p className="text-lg font-semibold text-slate-900 dark:text-slate-0">
                    Device Metrics:
                  </p>
                  {deviceMetricsMap.map(
--- a/src/components/Dialog/QRDialog.tsx
+++ b/src/components/Dialog/QRDialog.tsx
@ -133,8 +133,8 @@ export const QRDialog = ({
          <Input
            value={qrCodeUrl}
            disabled
-            className="dark:text-slate-900"
            action={{
+              key: 'copy-value',
              icon: ClipboardIcon,
              onClick() {
                void navigator.clipboard.writeText(qrCodeUrl);
--- a/src/components/Dialog/ShutdownDialog.tsx
+++ b/src/components/Dialog/ShutdownDialog.tsx
@ -41,7 +41,6 @@ export const ShutdownDialog = ({
            type="number"
            value={time}
            onChange={(e) => setTime(Number.parseInt(e.target.value))}
-            className="dark:text-slate-900"
            suffix="Minutes"
          />
          <Button
--- a/src/components/Form/FormInput.tsx
+++ b/src/components/Form/FormInput.tsx
@ -6,6 +6,7 @@ import { Input } from "@components/UI/Input.tsx";
 import type { ChangeEventHandler } from "react";
 import { useState } from "react";
 import { useController, type FieldValues } from "react-hook-form";
+import { cn } from "@core/utils/cn.ts";

 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
  type: "text" | "number" | "password";
@ -15,6 +16,7 @@ export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
    prefix?: string;
    suffix?: string;
    step?: number;
+    className?: string;
    fieldLength?: {
      min?: number;
      max?: number;
@ -63,6 +65,7 @@ export function GenericInput<T extends FieldValues>({
        onChange={handleInputChange}
        showCopyButton={field.properties?.showCopyButton}
        showPasswordToggle={field.properties?.showPasswordToggle || field.type === "password"}
+        className={field.properties?.className}
        {...restProperties}
        disabled={disabled}
      />
--- a/src/components/PageComponents/Config/Bluetooth.tsx
+++ b/src/components/PageComponents/Config/Bluetooth.tsx
@ -1,5 +1,5 @@
 import { useAppStore } from "../../../core/stores/appStore.ts";
-import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
+import type { BluetoothValidation } from "@app/validation/config/bluetooth.ts";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
--- a/src/components/PageComponents/Connect/BLE.tsx
+++ b/src/components/PageComponents/Connect/BLE.tsx
@ -43,7 +43,7 @@ export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) =
        {bleDevices.map((device) => (
          <Button
            key={device.id}
-            className="dark:bg-slate-900 dark:text-white"
+            variant="default"
            onClick={() => {
              setConnectionInProgress(true);
              onConnect(device);
@ -57,8 +57,10 @@ export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) =
        )}
      </div>
      <Button
-        className="dark:bg-slate-900 dark:text-white"
+        variant="default"
        onClick={async () => {
+
+
          await navigator.bluetooth
            .requestDevice({
              filters: [{ services: [ServiceUuid] }],
--- a/src/components/PageComponents/Connect/HTTP.tsx
+++ b/src/components/PageComponents/Connect/HTTP.tsx
@ -74,7 +74,7 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
          <Input
            prefix={tlsValue ? "https://" : "http://"}
            placeholder="000.000.000.000 / meshtastic.local"
-            className="text-slate-900 dark:text-slate-900"
+            className="text-slate-900 dark:text-slate-100"
            {...register("ip")}
          />
        </div>
@ -120,7 +120,7 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
      </div>
      <Button
        type="submit"
-        className="dark:bg-slate-900 dark:text-white"
+        variant={"default"}
      >
        <span>{connectionInProgress ? "Connecting..." : "Connect"}</span>
      </Button>
--- a/src/components/PageComponents/Connect/Serial.tsx
+++ b/src/components/PageComponents/Connect/Serial.tsx
@ -52,7 +52,7 @@ export const Serial = ({ setConnectionInProgress, closeDialog }: TabElementProps
            <Button
              key={`${usbVendorId ?? "UNK"}-${usbProductId ?? "UNK"}-${index}`}
              disabled={port.readable !== null}
-              className="dark:bg-slate-900 dark:text-white"
+              variant="default"
              onClick={async () => {
                setConnectionInProgress(true);
                await onConnect(port);
@ -68,7 +68,7 @@ export const Serial = ({ setConnectionInProgress, closeDialog }: TabElementProps
        )}
      </div>
      <Button
-        className="dark:bg-slate-900 dark:text-white"
+        variant="default"
        onClick={async () => {
          await navigator.serial.requestPort().then((port) => {
            setSerialPorts(serialPorts.concat(port));
--- a/src/components/PageComponents/Map/NodeDetail.tsx
+++ b/src/components/PageComponents/Map/NodeDetail.tsx
@ -49,7 +49,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
  }

  return (
-    <div className="dark:text-slate-900 p-1">
+    <div className="p-1">
      <div className="flex gap-2">
        <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
          <Avatar text={shortName} size="sm" />
--- a/src/components/PageComponents/Messages/MessageInput.tsx
+++ b/src/components/PageComponents/Messages/MessageInput.tsx
@ -96,7 +96,8 @@ export const MessageInput = ({

          <Button
            type="submit"
-            className="dark:bg-white dark:text-slate-900 dark:hover:bg-slate-400 dark:hover:text-white"
+            variant={"default"}
+          // className=" dark:text-slate-900 dark:hover:bg-slate-400 dark:hover:text-white"
          >
            <SendIcon size={16} />
          </Button>
--- a/src/components/PageComponents/Messages/MessageItem.tsx
+++ b/src/components/PageComponents/Messages/MessageItem.tsx
@ -40,9 +40,9 @@ const StatusTooltip = ({ status, children }: { status: MessageStatus; children:
  <TooltipProvider delayDuration={300}>
    <Tooltip>
      <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <TooltipContent className="bg-gray-800 text-white px-2 py-1 rounded text-xs">
+      <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-2 py-1 rounded text-xs">
        {status.displayText}
-        <TooltipArrow className="fill-gray-800" />
+        <TooltipArrow className="fill-slate-800" />
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
@ -50,7 +50,7 @@ const StatusTooltip = ({ status, children }: { status: MessageStatus; children:

 const StatusIcon = ({ status, className }: { status: MessageStatus; className?: string }) => {
  const Icon = status.icon;
-  const iconClass = cn("w-3.5 h-3.5 shrink-0", className);
+  const iconClass = cn("size-4 shrink-0", className);
  return (
    <StatusTooltip status={status}>
      <span aria-label={status.ariaLabel} role="img">
@ -110,10 +110,10 @@ export const MessageItem = ({ message }: MessageProps) => {
  // const avatarSizeClass = "size-11";
  const gridGapClass = "gap-x-2";

-  const baseTextStyle = "text-sm text-gray-800 dark:text-gray-200";
-  const nameTextStyle = "font-medium text-gray-900 dark:text-gray-100 mr-2";
-  const dateTextStyle = "text-gray-500 dark:text-gray-400";
-  const statusIconBaseColor = "text-gray-400 dark:text-gray-500";
+  const baseTextStyle = "text-sm text-slate-800 dark:text-slate-200";
+  const nameTextStyle = "font-medium text-slate-900 dark:text-slate-100 mr-2";
+  const dateTextStyle = "text-slate-500 dark:text-slate-400";
+  const statusIconBaseColor = "text-slate-400 dark:text-slate-400";
  const statusIconFailedColor = "text-red-500 dark:text-red-400";

  return (
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@ -22,11 +22,11 @@ export interface PageLayoutProps {
  children: React.ReactNode;
  leftBar?: React.ReactNode;
  rightBar?: React.ReactNode;
-  className?: string;
  noPadding?: boolean;
  leftBarClassName?: string;
  rightBarClassName?: string;
  topBarClassName?: string;
+  contentClassName?: string;
 }

 export const PageLayout = ({
@ -35,11 +35,11 @@ export const PageLayout = ({
  children,
  leftBar,
  rightBar,
-  className,
  noPadding,
  leftBarClassName,
  rightBarClassName,
  topBarClassName,
+  contentClassName
 }: PageLayoutProps) => {
  return (
    <ErrorBoundary FallbackComponent={ErrorPage}>
@ -100,7 +100,7 @@ export const PageLayout = ({
              "flex-1 flex flex-col",
              "overflow-hidden",
              !noPadding && "px-2",
-              className
+              contentClassName
            )}
          >
            {children}
--- a/src/components/UI/Button.tsx
+++ b/src/components/UI/Button.tsx
@ -8,13 +8,13 @@ const buttonVariants = cva(
    variants: {
      variant: {
        default:
-          "bg-slate-900 text-white dark:bg-slate-900 hover:dark:bg-slate-700 dark:text-slate-100 hover:bg-slate-800 ",
+          "bg-slate-900 text-white dark:bg-slate-200 hover:dark:bg-slate-300 dark:text-slate-900 hover:bg-slate-500",
        destructive:
          "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
        success:
          "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600",
        outline:
-          "bg-transparent border border-slate-400 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-500",
+          "bg-transparent border border-slate-400 hover:text-slate-100 dark:hover:text-slate-300 dark:border-slate-400 dark:text-slate-100 ",
        subtle:
          "bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-500 dark:text-white dark:hover:bg-slate-400",
        ghost:
--- a/src/components/UI/Checkbox/index.tsx
+++ b/src/components/UI/Checkbox/index.tsx
@ -71,7 +71,7 @@ export function Checkbox({
          >
            {isChecked && (
              <div className="animate-fade-in scale-100 opacity-100">
-                <Check className="w-4 h-4 text-slate-900 dark:text-slate-900" />
+                <Check className="w-4 h-4 text-slate-900 dark:text-slate-200" />
              </div>
            )}
          </div>
--- a/src/components/UI/Command.tsx
+++ b/src/components/UI/Command.tsx
@ -88,7 +88,7 @@ const CommandGroup = React.forwardRef<
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
-      "overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 dark:[&_[cmdk-group-heading]]:text-slate-300",
+      "overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-200 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 dark:[&_[cmdk-group-heading]]:text-slate-300",
      className,
    )}
    {...props}
@ -103,7 +103,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
-    className={cn("-mx-1 h-px bg-slate-100 dark:bg-slate-700", className)}
+    className={cn("-mx-1 h-px bg-slate-100 dark:bg-slate-200", className)}
    {...props}
  />
 ));
--- a/src/components/UI/Dialog.tsx
+++ b/src/components/UI/Dialog.tsx
@ -44,7 +44,7 @@ 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 dark:text-slate-900",
+        "fixed z-50 grid w-full bg-slate-100 dark:bg-slate-700 dark:text-slate-200 text-slate-900 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",
        className,
      )}
      {...props}
@ -106,7 +106,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
-    className={cn("text-lg font-semibold text-slate-900", className)}
+    className={cn("text-lg font-semibold text-slate-900 dark:text-slate-100", className)}
    {...props}
  />
 ));
@ -118,7 +118,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
-    className={cn("text-sm text-slate-700", className)}
+    className={cn("text-sm text-slate-800 dark:text-slate-200", className)}
    {...props}
  />
 ));
--- a/src/components/UI/Input.tsx
+++ b/src/components/UI/Input.tsx
@ -6,11 +6,11 @@ import { useCopyToClipboard } from "@core/hooks/useCopyToClipboard.ts";
 import { usePasswordVisibilityToggle } from "@core/hooks/usePasswordVisibilityToggle.ts";

 const inputVariants = cva(
-  "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-600",
+  "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-transparet dark:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-600",
  {
    variants: {
      variant: {
-        default: "border-slate-300 dark:border-slate-700",
+        default: "border-slate-300 dark:border-slate-500",
        invalid:
          "border-red-500 dark:border-red-500 focus:ring-red-500 dark:focus:ring-red-500",
      },
@ -26,7 +26,7 @@ type InputActionType = {
  icon: LucideIcon;
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  ariaLabel: string;
-  tooltip?: string;
+  tooltip?: string
  condition?: boolean;
 };

@ -128,7 +128,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
    return (
      <div className={cn("relative flex w-full items-stretch", containerClassName)}>
        {prefix && (
-          <span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-100/80 px-3 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300">
+          <span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-100/80 px-3 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-200 dark:text-slate-700">
            {prefix}
          </span>
        )}
--- a/src/components/UI/Tabs.tsx
+++ b/src/components/UI/Tabs.tsx
@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
  <TabsPrimitive.List
    ref={ref}
    className={cn(
-      "inline-flex flex-wrap items-center rounded-md  p-1 mt-2 bg-slate-200 dark:bg-slate-200",
+      "inline-flex flex-wrap items-center rounded-md  p-1 mt-2 bg-slate-200 dark:bg-slate-100",
      className,
    )}
    {...props}
--- a/src/components/UI/Toast.tsx
+++ b/src/components/UI/Toast.tsx
@ -28,7 +28,7 @@ const toastVariants = cva(
    variants: {
      variant: {
        default:
-          "border bg-backgound-primary text-foreground dark:bg-white dark:border-slate-600 dark:text-slate-900",
+          "border bg-backgound-primary text-foreground dark:bg-slate-100 dark:border-slate-600 dark:text-slate-900",
        destructive:
          "group destructive bg-red-600 text-white dark:border-red-900 dark:bg-red-900 dark:text-red-50",
      },
--- a/src/components/UI/Tooltip.tsx
+++ b/src/components/UI/Tooltip.tsx
@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
-      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200",
      className,
    )}
    {...props}
--- a/src/components/UI/Typography/Link.tsx
+++ b/src/components/UI/Typography/Link.tsx
@ -12,7 +12,7 @@ export const Link = ({ href, children, className }: LinkProps) => (
    target="_blank"
    rel="noopener noreferrer"
    className={cn(
-      "font-medium text-slate-900 underline underline-offset-4 dark:text-slate-900",
+      "font-medium text-slate-900 underline underline-offset-4 dark:text-slate-200",
      className,
    )}
  >
--- a/src/components/UI/Typography/Subtle.tsx
+++ b/src/components/UI/Typography/Subtle.tsx
@ -6,7 +6,7 @@ export interface SubtleProps {
 }

 export const Subtle = ({ className, children }: SubtleProps) => (
-  <p className={cn("text-sm text-slate-500 dark:text-slate-400", className)}>
+  <p className={cn("text-sm text-slate-500 dark:text-slate-300", className)}>
    {children}
  </p>
 );
--- a/src/pages/Config/DeviceConfig.tsx
+++ b/src/pages/Config/DeviceConfig.tsx
@ -52,7 +52,7 @@ export const DeviceConfig = () => {

  return (
    <Tabs defaultValue="Device">
-      <TabsList className="dark:bg-slate-800">
+      <TabsList className="dark:bg-slate-700">
        {tabs.map((tab) => (
          <TabsTrigger
            key={tab.label}
--- a/src/pages/Config/index.tsx
+++ b/src/pages/Config/index.tsx
@ -93,6 +93,7 @@ const ConfigPage = () => {
    <>

      <PageLayout
+        contentClassName="overflow-auto"
        leftBar={leftSidebar}
        label={activeConfigSection === "device"
          ? "Radio Config"
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@ -99,7 +99,7 @@ export const Dashboard = () => {
                <Heading as="h3">No Devices</Heading>
                <Subtle>Connect at least one device to get started</Subtle>
                <Button
-                  className="gap-2 dark:bg-white dark:text-slate-900 dark:hover:text-slate-100"
+                  className="gap-2"
                  variant="default"
                  onClick={() => setConnectDialogOpen(true)}
                >
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@ -113,7 +113,6 @@ export const MessagesPage = () => {
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          showClearButton={!!searchTerm}
-          className={cn('relative w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100 focus:outline-none focus:ring-1 focus:ring-slate-700 focus:dark:ring-slate-100')}
        />
      </label>
      <div className={cn(