From 71af218a0979227004f7aa520b3f251f00faf178 Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Sat, 24 May 2025 00:19:05 +0700
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ProfileView.vue | 111 +++++++++++++++++++++++++++++++-------
 1 file changed, 91 insertions(+), 20 deletions(-)

diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index f267c79..1bf128b 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -8,14 +8,16 @@
             <h1 class="section-title">Мой профиль</h1>
             <p class="subtitle">Управление личными данными и настройками</p>
           </div>
-          <div class="header-actions">
+          <!-- Переносим кнопку редактирования в заголовок и делаем её меньше -->
+          <div class="header-actions" v-if="profileData && !initialLoading">
             <button 
-              class="action-btn primary"
+              class="edit-btn"
               @click="toggleEditMode"
               :disabled="loading"
             >
-              <i class="icon" :class="isEditMode ? 'bi-eye' : 'bi-pencil'"></i>
-              {{ isEditMode ? 'Просмотр' : 'Редактировать' }}
+              <i v-if="!isEditMode" class="bi-pencil"></i>
+              <i v-else class="bi-check"></i>
+              {{ isEditMode ? 'Сохранить' : 'Редактировать' }}
             </button>
           </div>
         </div>
@@ -76,11 +78,13 @@
                     <span class="badge member-since">С {{ formatShortDate(profileData.createdAt) }}</span>
                   </div>
                   
-                  <!-- Кнопка выхода из аккаунта -->
-                  <button @click="logoutUser" class="logout-btn">
-                    <i class="bi-box-arrow-right"></i>
-                    Выйти из аккаунта
-                  </button>
+                  <!-- Центрируем кнопку выхода из аккаунта -->
+                  <div class="logout-section">
+                    <button @click="logoutUser" class="logout-btn">
+                      <i class="bi-box-arrow-right"></i>
+                      Выйти из аккаунта
+                    </button>
+                  </div>
                 </div>
               </div>
 
@@ -120,7 +124,7 @@
           <!-- Details Section -->
           <div class="details-section">
             <!-- Basic Info -->
-            <div class="info-card">
+            <div class="info-card basic-info-card">
               <div class="card-header">
                 <h3><i class="bi-person-lines-fill"></i> Основная информация</h3>
               </div>
@@ -251,7 +255,7 @@
             </div>
 
             <!-- Photos Section -->
-            <div class="info-card" id="photos-section">              
+            <div class="info-card photos-card" id="photos-section">              
               <div class="card-header">
                 <h3><i class="bi-images"></i> Мои фотографии</h3>
                 <div class="header-actions" v-if="profileData.photos && profileData.photos.length > 0">
@@ -1171,8 +1175,8 @@ onUnmounted(() => {
 .profile-title {
   flex: 1;
   text-align: center;
-  /* Добавляем отступы чтобы заголовок не перекрывался кнопкой */
-  padding: 0 60px;
+  /* Уменьшаем отступы для лучшего баланса */
+  padding: 0 20px;
 }
 
 .section-title {
@@ -1194,14 +1198,69 @@ onUnmounted(() => {
 }
 
 .header-actions {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  /* Уменьшаем z-index чтобы не перекрывать заголовок */
+  /* Убираем абсолютное позиционирование для лучшего отображения */
+  display: flex;
+  align-items: center;
   z-index: 2;
 }
 
+/* Стили для кнопки редактирования в заголовке */
+.edit-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  backdrop-filter: blur(10px);
+}
+
+.edit-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: translateY(-1px);
+}
+
+.edit-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Центрирование кнопки выхода */
+.logout-section {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+
+.logout-btn {
+  background: none;
+  border: none;
+  color: #dc3545;
+  cursor: pointer;
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+}
+
+.logout-btn:hover {
+  color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
+}
+
 /* Main Content - ИСПРАВЛЕНО */
 .profile-content {
   flex: 1;
@@ -1362,12 +1421,16 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   gap: 0.3rem;
-  padding: 0.25rem 0;
-  transition: color 0.3s ease;
+  padding: 0.5rem 1rem;
+  border-radius: 25px;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
 }
 
 .logout-btn:hover {
   color: #c82333;
+  background: rgba(220, 53, 69, 0.1);
+  border-color: rgba(220, 53, 69, 0.2);
 }
 
 /* Stats Section */
@@ -1433,6 +1496,14 @@ onUnmounted(() => {
   margin-bottom: 1rem;
 }
 
+.basic-info-card {
+  margin-bottom: 2rem;
+}
+
+.photos-card {
+  margin-top: 2rem;
+}
+
 .card-header {
   display: flex;
   justify-content: space-between;