feat: styles update

src/components/task.module.scss

@@ -1,5 +1,5 @@
 @reference "../index.scss";
 
 .task {
-  @apply flex h-24 w-[300px] flex-col items-center justify-center rounded-md border-2 text-xl md:w-[500px];
+  @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];
 }

src/pages/profile.module.scss

@@ -1 +1,13 @@
 @reference "../index.scss";
+
+#main_container {
+  @apply flex h-screen flex-col md:flex-row;
+}
+
+#router_container {
+  @apply flex-1 overflow-y-auto px-3 pb-[6rem] break-all md:pb-5;
+}
+
+#menu_container {
+  @apply md:sticky md:top-0 md:h-screen;
+}

src/pages/profile.tsx

@@ -1,12 +1,13 @@
 import Menu from "@/components/menu";
 import { FunctionComponent } from "preact";
 import { lazy, Route, Router, useLocation } from "preact-iso";
+import ids from "./profile.module.scss";
 
 const ProfilePage: FunctionComponent = () => {
   const { route } = useLocation();
   return (
-    <div class="flex h-screen flex-col md:flex-row">
+    <div id={ids.main_container}>
-      <div class="flex-1 overflow-y-auto px-3 pb-20 break-all md:pb-0">
+      <div id={ids.router_container}>
         <Router>
           <Route path="/settings" component={lazy(() => import("./profile_settings"))} />
           <Route path="/tasks" component={lazy(() => import("./profile_tasks"))} />
@@ -20,7 +21,7 @@ const ProfilePage: FunctionComponent = () => {
           />
         </Router>
       </div>
-      <div className="md:sticky md:top-0 md:h-screen">
+      <div id={ids.menu_container}>
         <Menu />
       </div>
     </div>

src/pages/profile_settings.module.scss

@@ -1,11 +1,19 @@
 @reference "../index.scss";
 
 .container {
-  @apply flex h-full w-full flex-col items-center gap-4 px-6 pt-3;
+  @apply flex h-full w-full flex-col items-center px-6 pt-3 md:flex-row md:items-start;
 }
 
-.header_block {
+#avatar {
-  @apply flex h-[12rem] w-full flex-row justify-between;
+  @apply flex aspect-square h-40 flex-col items-center justify-center rounded-md border;
+}
+
+.profile_container {
+  @apply flex h-full w-full flex-col items-center;
+}
+
+.settings_block__buttons {
+  @apply flex w-[300px] flex-col gap-10;
 }
 
 .header_block__name {

src/pages/profile_settings.tsx

@@ -9,29 +9,26 @@ const ProfileSettings: FunctionComponent = () => {
   const { route } = useLocation();
   return (
     <div class={classes.container}>
-      <div class="flex h-full w-full flex-col items-center md:flex-row md:items-start">
+      <div id={classes.avatar}>Аватар</div>
-        {/* Вынести классы в стили */}
+      <div class={classes.profile_container}>
-        <div class="flex aspect-square h-40 flex-col items-center justify-center rounded-md border">Аватар</div>
+        <div class={classes.header_block__name}>
-        <div className="flex h-full w-full flex-col items-center">
+          <p class="text-5xl font-semibold">Никнейм</p>
-          <div class={classes.header_block__name}>
+          <p class="text-2xl font-light">Статус</p>
-            <p class="text-5xl font-semibold">Никнейм</p>
+        </div>
-            <p class="text-2xl font-light">Статус</p>
-          </div>
 
-          <div class={classes.settings_block}>
+        <div class={classes.settings_block}>
-            <div class="flex w-[300px] flex-col gap-10">
+          <div class={classes.settings_block__buttons}>
-              <Button>Сменить тему</Button>
+            <Button>Сменить тему</Button>
-              <Button>Настройки</Button>
+            <Button>Настройки</Button>
-              <Button
+            <Button
-                color="secondary"
+              color="secondary"
-                onClick={() => {
+              onClick={() => {
-                  isLoggedIn.value = false;
+                isLoggedIn.value = false;
-                  route("/login", true);
+                route("/login", true);
-                }}
+              }}
-              >
+            >
-                Выйти
+              Выйти
-              </Button>
+            </Button>
-            </div>
           </div>
         </div>
       </div>

src/pages/profile_tasks.module.scss

@@ -1,7 +1,7 @@
 @reference "../index.scss";
 
 .container {
-  @apply flex h-full w-full flex-col items-center gap-4 px-6 pt-3;
+  @apply flex h-fit w-full flex-col items-center gap-4 px-6 pt-3;
 }
 
 .header {