feat: input styles

src/components/task.module.scss

@@ -1,5 +1,5 @@
 @reference "../index.scss";
 
 .task {
-  @apply flex h-24 w-[300px] cursor-pointer flex-col items-center justify-center rounded-md border-2 text-xl transition-transform hover:scale-[1.05] active:scale-[1.05] md:w-[500px];
+  @apply flex h-24 w-[300px] cursor-pointer flex-row items-center justify-start gap-4 rounded-[39px] bg-[rgba(251,194,199,0.53)] px-5 py-6 text-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-transform hover:scale-[1.05] hover:bg-[rgba(251,194,199,0.7)] active:scale-[1.05] md:w-[500px];
 }

src/components/task.tsx

@@ -9,7 +9,10 @@ const Task: FunctionComponent<TaskProps> = ({ name }: TaskProps) => {
   return (
     // Временное действие для тестирования
     <button onClick={() => alert(name)}>
-      <div class={classes.task}>{name}</div>
+      <div class={classes.task}>
+        <div class="aspect-square h-full rounded-full border bg-white"></div>
+        {name}
+      </div>
     </button>
   );
 };

src/components/ui/Button.module.scss

@@ -1,5 +1,5 @@
 @reference '../../index.scss';
 
 .button {
-  @apply rounded-2xl border-2 px-4 py-3 font-semibold text-white transition-colors hover:cursor-pointer;
+  @apply rounded-[23px] px-4 py-3 text-xl text-black shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-colors hover:cursor-pointer;
 }

src/components/ui/Button.tsx

@@ -5,8 +5,8 @@ const button = tv({
   base: classes.button,
   variants: {
     color: {
-      primary: "bg-blue-400 hover:bg-blue-500",
-      secondary: "bg-red-400 hover:bg-red-500",
+      primary: "bg-[rgba(206,232,251,0.7)] hover:bg-[rgba(206,232,251,0.9)]",
+      secondary: "bg-[rgba(255,251,197,0.68)] hover:bg-[rgba(255,251,197,0.9)]",
     },
   },
 });

src/components/ui/Input.module.scss

@@ -1,5 +1,5 @@
 @reference "../../index.scss";
 
 .input_field {
-  @apply rounded-md border border-gray-300 p-2 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
+  @apply rounded-[23px] border border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
 }

src/pages/login.module.scss

@@ -5,7 +5,7 @@
 }
 
 .login_card {
-  @apply flex w-[95%] min-w-[300px] flex-col justify-center gap-2 rounded-md border-gray-400 p-5 shadow-md md:w-[350px];
+  @apply flex min-h-[50vh] w-[95%] min-w-[300px] flex-col justify-around gap-2 rounded-[103px] bg-[linear-gradient(180.00deg,_rgba(239,251,194,0.53),rgb(206,232,251)_100%)] p-7 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] md:w-[350px];
 }
 
 .login_card_name {

src/pages/login.tsx

@@ -16,15 +16,16 @@ const LoginPage: FunctionComponent = () => {
     <div class={classes.login_container}>
       <div class={classes.login_card}>
         <p class={classes.login_card_name}>Антихвост</p>
-        <Input placeholder="Login" textAlign="center" />
-        <Input isPassword placeholder="Password" textAlign="center" />
+        <Input placeholder="Логин" textAlign="center" />
+        <Input isPassword placeholder="Пароль" textAlign="center" />
         <Button
+          color="secondary"
           onClick={() => {
             isLoggedIn.value = true;
             route("/profile/tasks", true);
           }}
         >
-          Login
+          Войти
         </Button>
       </div>
     </div>