feat: styles and mark tasks

src/components/menu.module.scss

@@ -5,7 +5,7 @@
 }
 
 .menu_container {
-  @apply fixed right-0 bottom-0 left-0 flex h-[4rem] w-full flex-1 flex-row items-center gap-1 rounded-[44px] bg-[rgba(167,213,246,0.3)] px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:flex-col md:gap-4 md:border-t-0 md:px-5 md:py-5;
+  @apply fixed right-0 bottom-0 left-0 flex h-[4rem] w-full flex-1 flex-row items-center gap-1 rounded-[3rem] bg-[rgba(167,213,246,0.3)] px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:flex-col md:gap-4 md:border-t-0 md:px-5 md:py-5;
 }
 
 .menu_item {

src/components/menu.tsx

@@ -46,13 +46,13 @@ const Avatar: FunctionComponent = () => {
     >
       <div
         class={cn(
-          "h-full flex-row items-center justify-around rounded-[44px] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
+          "h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
         )}
       >
         <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
         <div class="flex flex-col items-center justify-center">
-          <p class="text-3xl font-semibold">Никнейм</p>
+          <p class="text-3xl font-semibold">никнейм</p>
-          <p class="text-xl font-light">Статус</p>
+          <div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">статус</div>
         </div>
       </div>
     </button>

src/components/task.module.scss

@@ -1,5 +1,5 @@
 @reference "../index.scss";
 
 .task {
-  @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];
+  @apply flex h-24 w-[300px] cursor-pointer flex-row items-center justify-start gap-4 rounded-[3rem] 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

@@ -1,16 +1,40 @@
 import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
 import classes from "./task.module.scss";
 
 interface TaskProps {
   name: string;
+  checked?: boolean;
 }
 
-const Task: FunctionComponent<TaskProps> = ({ name }: TaskProps) => {
+const taskStyle = tv({
+  base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
+  variants: {
+    checked: {
+      true: "bg-black",
+      false: "bg-white",
+    },
+  },
+});
+
+const markStyle = tv({
+  base: "text-4xl font-light text-white",
+  variants: {
+    checked: {
+      true: "block",
+      false: "hidden",
+    },
+  },
+});
+
+const Task: FunctionComponent<TaskProps> = ({ name, checked = false }: TaskProps) => {
   return (
     // Временное действие для тестирования
     <button onClick={() => alert(name)}>
       <div class={classes.task}>
-        <div class="aspect-square h-full rounded-full border bg-white"></div>
+        <div class={taskStyle({ checked })}>
+          <p class={markStyle({ checked })}>✓</p>
+        </div>
         {name}
       </div>
     </button>

src/components/ui/Button.module.scss

@@ -1,5 +1,5 @@
 @reference '../../index.scss';
 
 .button {
-  @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;
+  @apply rounded-4xl 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/Input.module.scss

@@ -1,5 +1,5 @@
 @reference "../../index.scss";
 
 .input_field {
-  @apply rounded-[23px] border border-gray-300 bg-white p-2 leading-8 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
+  @apply rounded-[4xl] 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 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];
+  @apply flex min-h-[50vh] w-[95%] min-w-[300px] flex-col justify-around gap-2 rounded-[7rem] 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/profile_settings.module.scss

@@ -1,11 +1,11 @@
 @reference "../index.scss";
 
 .container {
-  @apply flex h-full w-full flex-col items-center px-6 pt-3 md:flex-row md:items-start;
+  @apply flex h-full w-full flex-col items-center px-6 pt-8 md:items-start;
 }
 
 #avatar {
-  @apply flex aspect-square h-40 flex-col items-center justify-center rounded-md border;
+  @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white;
 }
 
 .profile_container {
@@ -17,7 +17,7 @@
 }
 
 .header_block__name {
-  @apply mt-5 flex h-fit w-full flex-col items-center justify-start gap-3;
+  @apply flex h-fit w-full flex-1 flex-col items-center justify-start gap-3 px-10;
 }
 .settings_block {
   @apply mt-12 flex h-full w-full flex-col items-center justify-start md:mt-0 md:justify-center;

src/pages/profile_settings.tsx

@@ -2,6 +2,7 @@ import Button from "@/components/ui/Button";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
+import { cn } from "@/utils/class-merge";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
 import classes from "./profile_settings.module.scss";
@@ -9,15 +10,27 @@ import classes from "./profile_settings.module.scss";
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
+  const status = 12;
+  const maxStatus = 100;
   return (
     <div class={classes.container}>
+      <div class="flex w-full flex-row items-center rounded-[4rem] bg-[linear-gradient(180.00deg,rgb(251,194,199),rgba(206,232,251,0.72)_100%)] px-7 py-5 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]">
         <div id={classes.avatar}>Аватар</div>
-      <div class={classes.profile_container}>
         <div class={classes.header_block__name}>
           <p class="text-5xl font-semibold">Никнейм</p>
           <p class="text-2xl font-light">Статус</p>
+          <div class="h-1.5 w-full overflow-hidden rounded-2xl bg-white">
+            <div
+              class={cn("relative top-0 left-0 h-2 bg-black")}
+              style={{ width: `${(status / maxStatus) * 100}%` }}
+            ></div>
           </div>
-
+          <div class="-mt-3 self-end text-sm font-light">
+            {status}/{maxStatus}
+          </div>
+        </div>
+      </div>
+      <div class={classes.profile_container}>
         <div class={classes.settings_block}>
           <div class={classes.settings_block__buttons}>
             <Button>Сменить тему</Button>

src/pages/profile_tasks.tsx

@@ -18,7 +18,7 @@ const ProfileTasks: FunctionComponent = () => {
       <div class={classes.header}>Сегодня: {getDate}</div>
       <div class={classes.tasks_container}>
         {example_tasks.map((task, index) => (
-          <Task name={task} key={index} />
+          <Task name={task} key={index} checked={index % 2 === 0} />
         ))}
       </div>
     </div>