From 3de0edf0f91d305c1d1c8087772952d707fd77d1 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 3 Mar 2023 07:54:19 -0800
Subject: [PATCH] Fix tailwind dark selector

---
 src-web/components/Dialog.tsx   |  5 ++---
 src-web/components/Dropdown.tsx | 10 ++++++----
 src-web/components/Input.tsx    |  9 ++++-----
 src-web/main.css                |  5 ++++-
 tailwind.config.cjs             |  1 +
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src-web/components/Dialog.tsx b/src-web/components/Dialog.tsx
index 80c62ad2..3527d860 100644
--- a/src-web/components/Dialog.tsx
+++ b/src-web/components/Dialog.tsx
@@ -1,7 +1,6 @@
+import * as D from '@radix-ui/react-dialog';
 import classnames from 'classnames';
 import React from 'react';
-import * as D from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
 import { IconButton } from './IconButton';
 import { HStack, VStack } from './Stacks';
 
@@ -17,7 +16,7 @@ export function Dialog({ children, open, onOpenChange, title, description }: Pro
   return (
     <D.Root open={open} onOpenChange={onOpenChange}>
       <D.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
-        <D.Overlay className="fixed inset-0 bg-background/80" />
+        <D.Overlay className="fixed inset-0 bg-gray-900 dark:bg-background opacity-80" />
         <D.Content
           className={classnames(
             'fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] bg-gray-50 w-[20rem] max-h-[20rem]',
diff --git a/src-web/components/Dropdown.tsx b/src-web/components/Dropdown.tsx
index 56287345..d6eb4b80 100644
--- a/src-web/components/Dropdown.tsx
+++ b/src-web/components/Dropdown.tsx
@@ -91,8 +91,6 @@ export function Dropdown({ children, items }: DropdownProps) {
   );
 }
 
-const dropdownMenuClasses = 'bg-background rounded-md shadow-lg p-1.5 border border-gray-100';
-
 interface DropdownMenuPortalProps {
   children: ReactNode;
 }
@@ -137,7 +135,11 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
       <D.Content
         ref={initDivRef}
         align="start"
-        className={classnames(className, dropdownMenuClasses, 'overflow-auto m-1')}
+        className={classnames(
+          className,
+          'bg-background rounded-md shadow-lg p-1.5 border border-gray-100',
+          'overflow-auto m-1',
+        )}
         style={styles}
         {...props}
       >
@@ -161,7 +163,7 @@ function DropdownMenuItem({
     <D.Item
       asChild
       disabled={disabled}
-      className={classnames(className, { 'opacity-30': disabled })}
+      className={classnames(className, disabled && 'opacity-30')}
       {...props}
     >
       <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
diff --git a/src-web/components/Input.tsx b/src-web/components/Input.tsx
index 277d2b81..bf7d9432 100644
--- a/src-web/components/Input.tsx
+++ b/src-web/components/Input.tsx
@@ -1,8 +1,7 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
-import classnames from 'classnames';
-import { placeholders } from './Editor/widgets';
-import { HStack, VStack } from './Stacks';
-import Editor from './Editor/Editor';
+import classnames from "classnames";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import Editor from "./Editor/Editor";
+import { HStack, VStack } from "./Stacks";
 
 interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
   name: string;
diff --git a/src-web/main.css b/src-web/main.css
index 117be274..1b1637a4 100644
--- a/src-web/main.css
+++ b/src-web/main.css
@@ -18,8 +18,11 @@
 html, body, #root {
     width: 100%;
     height: 100%;
-    background-color: hsl(var(--color-background));
     overflow: hidden;
+
+    /* Default colors */
+    background-color: hsl(var(--color-background));
+    color: hsl(var(--color-gray-900));
 }
 
 * {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index c7fd17d3..d69bf5c5 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+    darkMode: ['class', '[data-theme="dark"]'],
     content: [
         "./index.html",
         "./src-web/**/*.{js,ts,jsx,tsx}",