aljaz/sendstr-web
1
0
Fork 0
mirror of https://github.com/aljazceru/sendstr-web.git synced 2025-12-18 23:14:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: standardize textarea and input colors

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/input/index.tsx
View File

@@ -15,7 +15,7 @@ export const Input = forwardRef(
return ( return (
<div className={className}> <div className={className}>
<input <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} ref={ref}
value={value} value={value}
onChange={onChange} onChange={onChange}

48
src/styles/global.css
View File

@@ -3,38 +3,42 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--orange: #fb8500; --orange: #fb8500;
--orange-light: #ffb703; --orange-light: #ffb703;
--green: #004f2d; --green: #004f2d;
--green-light: #7dc95e; --green-light: #7dc95e;
--red: #ff4e33; --red: #ff4e33;
--red-light:#ff8370; --red-light: #ff8370;
} }
.light { .light {
--primary: var(--orange); --primary: var(--orange);
--secondary: var(--green); --secondary: var(--green);
--warning: var(--red); --warning: var(--red);
} }
.dark { .dark {
--primary: var(--orange-light); --primary: var(--orange-light);
--secondary: var(--green-light); --secondary: var(--green-light);
--warning: var(--red-light); --warning: var(--red-light);
} }
@layer base { @layer base {
body { body {
@apply dark:bg-black dark:text-gray-100 bg-white text-gray-900 @apply dark:bg-black dark:text-gray-100 bg-white text-gray-900;
} }
textarea {
@apply dark:placeholder-gray-300 placeholder-gray-500;
}
} }
@layer components { @layer components {
.btn-main { .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 @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
}
} }
.primary-hover {
@apply transition duration-300 hover:text-primary;
}
}

2
src/views/receive/index.tsx
View File

@@ -17,7 +17,7 @@ const Message = ({ message, onChange }: MessageProps) => {
<section className="p-4"> <section className="p-4">
<div className="border-0"> <div className="border-0">
<textarea <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} value={message}
onChange={(e) => onChange(e.currentTarget.value || "")} onChange={(e) => onChange(e.currentTarget.value || "")}
placeholder="Start typing here..." placeholder="Start typing here..."

2
src/views/send/index.tsx
View File

@@ -21,7 +21,7 @@ const Message = ({ message, onChange }: MessageProps) => {
<section className="p-4"> <section className="p-4">
<div className="border-0"> <div className="border-0">
<textarea <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} value={message}
onChange={(e) => onChange(e.currentTarget.value || "")} onChange={(e) => onChange(e.currentTarget.value || "")}
placeholder="Start typing here..." placeholder="Start typing here..."