From 2ef4b967f3a2ec91d7e5d51f92802593ad5029ff Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Mon, 7 Apr 2025 16:37:59 +0300
Subject: [PATCH] feat: styles update

---
 src/components/task.module.scss        |  2 +-
 src/pages/profile.module.scss          | 12 ++++++++
 src/pages/profile.tsx                  |  7 +++--
 src/pages/profile_settings.module.scss | 14 +++++++--
 src/pages/profile_settings.tsx         | 41 ++++++++++++--------------
 src/pages/profile_tasks.module.scss    |  2 +-
 6 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/components/task.module.scss b/src/components/task.module.scss
index 3360d89..0165375 100644
--- a/src/components/task.module.scss
+++ b/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];
 }
diff --git a/src/pages/profile.module.scss b/src/pages/profile.module.scss
index 0be3cf1..29a3374 100644
--- a/src/pages/profile.module.scss
+++ b/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;
+}
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index cf9d61c..6e1d0d9 100644
--- a/src/pages/profile.tsx
+++ b/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>
diff --git a/src/pages/profile_settings.module.scss b/src/pages/profile_settings.module.scss
index 735a7c0..a081e0d 100644
--- a/src/pages/profile_settings.module.scss
+++ b/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 {
diff --git a/src/pages/profile_settings.tsx b/src/pages/profile_settings.tsx
index da9497a..85ca195 100644
--- a/src/pages/profile_settings.tsx
+++ b/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 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 class={classes.header_block__name}>
-            <p class="text-5xl font-semibold">Никнейм</p>
-            <p class="text-2xl font-light">Статус</p>
-          </div>
+      <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">
-              <Button>Сменить тему</Button>
-              <Button>Настройки</Button>
-              <Button
-                color="secondary"
-                onClick={() => {
-                  isLoggedIn.value = false;
-                  route("/login", true);
-                }}
-              >
-                Выйти
-              </Button>
-            </div>
+        <div class={classes.settings_block}>
+          <div class={classes.settings_block__buttons}>
+            <Button>Сменить тему</Button>
+            <Button>Настройки</Button>
+            <Button
+              color="secondary"
+              onClick={() => {
+                isLoggedIn.value = false;
+                route("/login", true);
+              }}
+            >
+              Выйти
+            </Button>
           </div>
         </div>
       </div>
diff --git a/src/pages/profile_tasks.module.scss b/src/pages/profile_tasks.module.scss
index cc2e463..da89932 100644
--- a/src/pages/profile_tasks.module.scss
+++ b/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 {