feat: input colors and some improvements

src/pages/profile_tasks.tsx

@@ -24,7 +24,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { Checkbox } from "primereact/checkbox";
+import { Checkbox, CheckboxPassThroughMethodOptions } from "primereact/checkbox";
 import { Nullable } from "primereact/ts-helpers";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { v4 as uuid } from "uuid";
@@ -259,7 +259,9 @@ const ProfileTasks: FunctionComponent = () => {
             <div class="flex w-full flex-row items-start justify-between">
               <div class="flex flex-1 flex-col gap-1 pe-2">
                 <input
-                  class="w-full text-2xl outline-0"
+                  class={cn("w-full p-2 text-2xl outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
                   disabled={!isEditModal}
                   placeholder="Название"
                   {...register("name", {
@@ -268,7 +270,9 @@ const ProfileTasks: FunctionComponent = () => {
                   })}
                 />
                 <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
+                  class={cn("h-[5rem] w-full resize-none p-2 outline-0", {
+                    "rounded-md bg-gray-400/30 ring-1 ring-gray-400": isEditModal,
+                  })}
                   disabled={!isEditModal}
                   placeholder={isEditModal ? "Описание" : ""}
                   {...register("description", {
@@ -283,7 +287,7 @@ const ProfileTasks: FunctionComponent = () => {
                 />
                 <input type="checkbox" hidden {...register("checked")} />
               </div>
-              <div class="flex flex-row gap-4">
+              <div class="flex flex-col gap-4 md:flex-row">
                 <div
                   className="flex cursor-pointer flex-col items-center gap-3"
                   onClick={() => {
@@ -373,13 +377,13 @@ const ProfileTasks: FunctionComponent = () => {
             <div class="flex w-full flex-1 flex-row items-start justify-between">
               <div class="flex flex-1 flex-col gap-1 pe-2">
                 <input
-                  class="w-full text-2xl outline-0"
+                  class="w-full rounded-md bg-gray-400/30 p-2 text-2xl ring-1 ring-gray-400 outline-0"
                   maxLength={20}
                   placeholder="Название"
                   {...register("name", { required: "Заполните название" })}
                 />
                 <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
+                  class="h-[5rem] w-full resize-none rounded-md bg-gray-400/30 p-2 ring-1 ring-gray-400 outline-0"
                   placeholder="Описание"
                   maxLength={200}
                   {...register("description")}
@@ -392,7 +396,7 @@ const ProfileTasks: FunctionComponent = () => {
                 />
                 <input type="checkbox" checked={false} hidden {...register("checked")} />
               </div>
-              <div class="flex flex-row gap-3 self-start">
+              <div class="flex flex-col gap-3 self-start md:flex-row">
                 <CalendarDaysIcon
                   class="size-8 cursor-pointer"
                   onClick={() => {
@@ -665,7 +669,7 @@ const ProfileTasks: FunctionComponent = () => {
                         "absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer"
                       ),
                     },
-                    box: ({ props, context }) => ({
+                    box: ({ props, context }: CheckboxPassThroughMethodOptions) => ({
                       className: cn(
                         "flex items-center justify-center",
                         "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
@@ -680,7 +684,9 @@ const ProfileTasks: FunctionComponent = () => {
                         }
                       ),
                     }),
-                    icon: "w-4 h-4 transition-all duration-200 text-white text-base",
+                    icon: {
+                      className: "w-4 h-4 transition-all duration-200 text-white text-base",
+                    },
                   }}
                 ></Checkbox>
                 <label htmlFor="overdue" class="cursor-pointer">