feat: task 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>
   );
 };