tailwind fixes

NetCoreTemplates · Feb 28, 2024 · d28c2fa · d28c2fa
1 parent 527ab5e
commit d28c2fa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/MyApp.Client/src/assets/styles/index.css b/MyApp.Client/src/assets/styles/index.css
@@ -59,6 +59,12 @@ code[class*=language-], pre[class*=language-] {
   background-color: transparent !important;
 }
 
+/* dark mode forms fixes */
+.dark select, .dark textarea {
+  background-color: #000;
+}
+
+
 /*markdown containers*/
 .copy p, .copy p code { color:#fff }
 .sh-copy { max-height: 34px; }

diff --git a/MyApp.Client/src/components/Form.tsx b/MyApp.Client/src/components/Form.tsx
@@ -168,10 +168,10 @@ export const TextAreaInput: FC<TextAreaInputProps> = ({ status, id, className, p
     }
 
     return (<div>
-        {!useLabel ? null : <label htmlFor={id} className="block text-sm font-medium text-gray-700">{useLabel}</label>}
+        {!useLabel ? null : <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-200">{useLabel}</label>}
         <div className="mt-1 relative rounded-md shadow-sm">
             <textarea className={classNames(['shadow-sm block w-full sm:text-sm rounded-md', ...cssClass(
-                'text-gray-900 focus:ring-indigo-500 focus:border-indigo-500 border-gray-300',
+                'text-gray-900 dark:text-gray-50 focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600',
                 'text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300')])}
                    id={id} name={id} placeholder={usePlaceholder} {...remaining}/>
         </div>
@@ -211,9 +211,9 @@ export const SelectInput: FC<SelectInputProps> = ({ status, id, className, place
             : []
 
     return (<>
-        {!useLabel ? null : <label htmlFor={id} className="block text-sm font-medium text-gray-700">{useLabel}</label>}
-        <select className={classNames(['mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 sm:text-sm rounded-md', ...cssClass(
-            'text-gray-900 focus:ring-indigo-500 focus:border-indigo-500',
+        {!useLabel ? null : <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-200">{useLabel}</label>}
+        <select className={classNames(['mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none border-gray-300 dark:border-gray-600 sm:text-sm rounded-md', ...cssClass(
+            'text-gray-900 dark:text-gray-50 focus:ring-indigo-500 focus:border-indigo-500',
             'text-red-900 focus:ring-red-500 focus:border-red-500')])}
                 id={id} name={id} placeholder={usePlaceholder} {...remaining}>
             {kvpValues().map(({key,value}:{key:string,value:string}) => <option key={key} value={key}>{value}</option>)}

diff --git a/MyApp.Client/src/components/ui/button.tsx b/MyApp.Client/src/components/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary dark:bg-indigo-700 dark:text-white text-primary-foreground hover:bg-primary/90 dark:hover:bg-indigo-600",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: