fix: standardize textarea and input colors

This commit is contained in:
vilm3r
2023-01-11 19:05:06 -06:00
parent 9c99c87698
commit 342a6da84e
4 changed files with 29 additions and 25 deletions

View File

@@ -15,7 +15,7 @@ export const Input = forwardRef(
return (
<div className={className}>
<input
className="bg-gray-100 dark:bg-gray-800 border-2 border-custom-black rounded w-full p-3"
className="border-2 border-custom-black rounded w-full p-3"
ref={ref}
value={value}
onChange={onChange}

View File

@@ -3,38 +3,42 @@
@tailwind utilities;
:root {
--orange: #fb8500;
--orange-light: #ffb703;
--green: #004f2d;
--green-light: #7dc95e;
--red: #ff4e33;
--red-light:#ff8370;
--orange: #fb8500;
--orange-light: #ffb703;
--green: #004f2d;
--green-light: #7dc95e;
--red: #ff4e33;
--red-light: #ff8370;
}
.light {
--primary: var(--orange);
--secondary: var(--green);
--warning: var(--red);
--primary: var(--orange);
--secondary: var(--green);
--warning: var(--red);
}
.dark {
--primary: var(--orange-light);
--secondary: var(--green-light);
--warning: var(--red-light);
--primary: var(--orange-light);
--secondary: var(--green-light);
--warning: var(--red-light);
}
@layer base {
body {
@apply dark:bg-black dark:text-gray-100 bg-white text-gray-900
}
body {
@apply dark:bg-black dark:text-gray-100 bg-white text-gray-900;
}
textarea {
@apply dark:placeholder-gray-300 placeholder-gray-500;
}
}
@layer components {
.btn-main {
@apply bg-primary rounded-md px-6 py-3 w-full h-full shadow text-gray-100 dark:text-gray-900 font-semibold
}
.primary-hover {
@apply transition duration-300 hover:text-primary
}
.btn-main {
@apply bg-primary rounded-md px-6 py-3 w-full h-full shadow text-gray-100 dark:text-gray-900 font-semibold;
}
.primary-hover {
@apply transition duration-300 hover:text-primary;
}
}

View File

@@ -17,7 +17,7 @@ const Message = ({ message, onChange }: MessageProps) => {
<section className="p-4">
<div className="border-0">
<textarea
className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] placeholder-gray-50 p-1"
className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] p-1"
value={message}
onChange={(e) => onChange(e.currentTarget.value || "")}
placeholder="Start typing here..."

View File

@@ -21,7 +21,7 @@ const Message = ({ message, onChange }: MessageProps) => {
<section className="p-4">
<div className="border-0">
<textarea
className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] placeholder-gray-50 p-1"
className="bg-custom-green-dark border-2 border-custom-black rounded w-full min-h-[100px] max-h-[700px] p-1"
value={message}
onChange={(e) => onChange(e.currentTarget.value || "")}
placeholder="Start typing here..."