From 249189f2ed62de46a1026b7d18787355ea7a3fd4 Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Mon, 7 Jul 2025 01:56:45 +0330
Subject: [PATCH] fix some styles in index

---
 xroom-dashboard/src/components/Header.vue     | 36 ++++++++---
 xroom-dashboard/src/pages/dashboard/index.vue | 63 ++++++++++++++-----
 2 files changed, 77 insertions(+), 22 deletions(-)

diff --git a/xroom-dashboard/src/components/Header.vue b/xroom-dashboard/src/components/Header.vue
index 9c8bcce..30458b1 100644
--- a/xroom-dashboard/src/components/Header.vue
+++ b/xroom-dashboard/src/components/Header.vue
@@ -8,7 +8,7 @@
         <div class="avatar-wrapper">
           <img class="user-avatar" :src="profileIcon"   />
         </div>
-        <div class="user-name">{{ fullName }}</div>
+        <div class="user-name" style="text-align: left;" :style="{ direction: userNameDirection }">{{ fullName }}</div>
         <span>          
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M7.19922 10L11.9992 14L16.7992 10" stroke="#8D99AB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -76,6 +76,10 @@ export default {
       return customer.profile_img
         ? `${customer.profile_img}`
         : 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg';
+    },
+    userNameDirection() {
+      const persianArabicRegex = /[\u0600-\u06FF\u0750-\u077F]/;
+      return persianArabicRegex.test(this.fullName) ? 'rtl' : 'ltr';
     }
   },
   methods: {
@@ -180,7 +184,7 @@ export default {
 .user-name-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   position: relative;
   cursor: pointer;
 }
@@ -282,38 +286,56 @@ export default {
 /* Mobile (max-width: 520px) */
 @media (max-width: 520px) {
   .header-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    gap: 30px;
     padding: 20px 0;
   }
 
+
   .green-button {
     display: none;
   }
 
   .menu {
     text-align: right;
-    width: 30%;
+    width: 100%;
   }
 
   .welcome-container {
     text-align: left;
-    order: 3;
-    width: 30%;
+    order: 2;
+    width: 100%;
   }
 
   .welcome-message {
     font-size: 15px;
     width: 90px;
+    text-align: center;
   }
 
   .user-info-container {
     justify-content: center;
-    order: 2;
-    width: 40%;
+    order: 3;
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  .user-name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: clip;
+    width: 4.5rem;
   }
 
   .avatar-wrapper {
     display: none;
   }
+
+  .dropdown-menu {
+    right: -6.5rem;
+  }
 }
 
 /* Small tablet (min-width: 520px and max-width: 780px) */
diff --git a/xroom-dashboard/src/pages/dashboard/index.vue b/xroom-dashboard/src/pages/dashboard/index.vue
index efc3bf4..06e7a76 100644
--- a/xroom-dashboard/src/pages/dashboard/index.vue
+++ b/xroom-dashboard/src/pages/dashboard/index.vue
@@ -4,7 +4,7 @@
       <!-- Right Section -->
       <div class="right-section">
         <h2 class="section-title">راهنمای شروع</h2>
-        <swiper
+<!--         <swiper
           :slides-per-view="1.5"
           :space-between="10"
           :loop="true"
@@ -80,7 +80,7 @@
               </span>
             </div>
           </swiper-slide>
-        </swiper>
+        </swiper> -->
         <div class="tutorial-grid">
           <div
             class="tutorial-item"
@@ -579,6 +579,7 @@ export default {
   color: #101010;
   font-weight: 600;
   font-size: 19px;
+  margin: 0 !important;
 }
 
 .tutorial-item span{
@@ -649,14 +650,12 @@ export default {
 
 /* Mobile (max-width: 600px) */
 @media (max-width: 600px) {
-
   .white-button {
     font-size: 12px;
   }
   
   .section-title {
     margin-bottom: 0;
-
   }
 
   .files-title {
@@ -674,29 +673,63 @@ export default {
     gap: 2.5rem;
   }
 
-   .left-section {
-    gap: 10px !important;
-   }
-
-  .my-swiper, .last-files-swiper {
-    margin: 0;
-  }
-
-  .right-section,
   .left-section {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 0.5rem;  
   }
 
   .tutorial-grid {
-    display: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
+
+  .tutorial-item {
+    width: 100%;
+    margin: 0;
+    min-height: 5rem;
+  }
+
+  .tutorial-item h2 {
+    font-size: 15px;
+  }
+
+  .tutorial-item span {
+    font-size: 12px;
+    line-height: 160%;
+  }
+
+  .tutorial-item svg {
+    width: 30px !important;
+    height: 30px !important;
+  }
+
+  .tutorial-item div {
+    gap: 0.5rem;
+  }
+
+  .last-files-swiper {
+    margin: 0;
   }
 
   .meeting-card {
     width: 250px;
     flex-shrink: 0;
   }
+
+  .right-section {
+    gap: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-image {
+    height: 7.5rem;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 }
 
 /* Small Tablet (min-width: 600px and max-width: 780px) */