From 554ee083ab24e8b695fbcec6a94abef57fa000ce Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Mon, 7 Apr 2025 15:59:04 +0300
Subject: [PATCH] feat: profile styles

---
 src/pages/profile_settings.module.scss |  4 +--
 src/pages/profile_settings.tsx         | 43 ++++++++++++++------------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/pages/profile_settings.module.scss b/src/pages/profile_settings.module.scss
index 134a6b1..735a7c0 100644
--- a/src/pages/profile_settings.module.scss
+++ b/src/pages/profile_settings.module.scss
@@ -9,8 +9,8 @@
 }
 
 .header_block__name {
-  @apply mt-5 flex w-full flex-col items-center justify-start gap-3;
+  @apply mt-5 flex h-fit w-full flex-col items-center justify-start gap-3;
 }
 .settings_block {
-  @apply flex h-full w-full flex-col items-center justify-center;
+  @apply mt-12 flex h-full w-full flex-col items-center justify-start md:mt-0 md:justify-center;
 }
diff --git a/src/pages/profile_settings.tsx b/src/pages/profile_settings.tsx
index 58d9e25..da9497a 100644
--- a/src/pages/profile_settings.tsx
+++ b/src/pages/profile_settings.tsx
@@ -9,27 +9,30 @@ const ProfileSettings: FunctionComponent = () => {
   const { route } = useLocation();
   return (
     <div class={classes.container}>
-      <div class={classes.header_block}>
+      <div class="flex h-full w-full flex-col items-center md:flex-row md:items-start">
         {/* Вынести классы в стили */}
-        <div class="flex aspect-square h-full flex-col items-center justify-center rounded-md border">Аватар</div>
-        <div class={classes.header_block__name}>
-          <p class="text-5xl font-semibold">Никнейм</p>
-          <p class="text-2xl font-light">Статус</p>
-        </div>
-      </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 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 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>
         </div>
       </div>
     </div>