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 class="flex-1 overflow-y-auto px-3 pb-20 break-all md:pb-0">
+    <div id={ids.main_container}>
+      <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 {
-  @apply flex h-[12rem] w-full flex-row justify-between;
+#avatar {
+  @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,17 +9,15 @@ 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 class="flex aspect-square h-40 flex-col items-center justify-center rounded-md border">Аватар</div>
-        <div className="flex h-full w-full flex-col items-center">
+      <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>
 
         <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
@@ -35,7 +33,6 @@ const ProfileSettings: FunctionComponent = () => {
         </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 {