style: make the form textbox match the Homepage theme

This commit is contained in:
Lewis England 2023-05-22 15:58:05 +01:00
parent cc5e365abf
commit a874dfc4b8
2 changed files with 8 additions and 3 deletions

View File

@ -13,9 +13,10 @@ export default function TaskBox({submitAction}) {
} }
return ( return (
<div> <div className="flex block w-full text-left transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10">
<form onSubmit={handleSubmit}> <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-l font-large rounded-l-md">+</div>
<input type="text" id="title" name="title" value={formVal} placeholder="Add new task..." onChange={(e) => setFormVal(e.target.value)} /> <form className="flex-1 flex items-center justify-between rounded-r-md " onSubmit={handleSubmit}>
<input type="text" className="textinput text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 flex-1 grow pl-3 py-2 text-xs" id="title" name="title" value={formVal} placeholder="Add new task..." onChange={(e) => setFormVal(e.target.value)} />
</form> </form>
</div> </div>
); );

View File

@ -62,3 +62,7 @@ body {
.checkbox { .checkbox {
border-radius: 0.25em; border-radius: 0.25em;
} }
.textinput {
border: none;
}