From 99c9de82f6b2126b9b9795e58c426e0c98caf2b5 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 19 Nov 2023 14:21:25 +0300
Subject: [PATCH] added template, how looking chat with users

---
 .../src/assets/css/ElementsStyles/chat.css    | 12 ++-
 luckydiamond/src/pages/ChatElement.vue        | 79 ++++++++++++++++++-
 2 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/luckydiamond/src/assets/css/ElementsStyles/chat.css b/luckydiamond/src/assets/css/ElementsStyles/chat.css
index 0f81d56..97248b9 100644
--- a/luckydiamond/src/assets/css/ElementsStyles/chat.css
+++ b/luckydiamond/src/assets/css/ElementsStyles/chat.css
@@ -61,5 +61,13 @@
     align-items: center;
     text-align: center;
     flex-direction: column;
-    margin-left: 23px;
-}
\ No newline at end of file
+    margin-left: 13px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 800;
+    font-family: Montserrat;
+}
+
+.content p {
+    margin-top: 5px;
+}
diff --git a/luckydiamond/src/pages/ChatElement.vue b/luckydiamond/src/pages/ChatElement.vue
index b8ebd90..2c383b4 100644
--- a/luckydiamond/src/pages/ChatElement.vue
+++ b/luckydiamond/src/pages/ChatElement.vue
@@ -16,10 +16,87 @@
           <img src="@/assets/icons-test/person-icon-chat.png">
         </div>
         <div class="content">
-          <h3>User Name</h3>
+          <h1>User Name</h1>
           <p>msg content</p>
         </div>
       </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+      <div class="card__user">
+        <div class="user__icon">
+          <img src="@/assets/icons-test/person-icon-chat.png">
+        </div>
+        <div class="content">
+          <h1>User Name</h1>
+          <p>msg content</p>
+        </div>
+      </div>
+    </div>
+    <div class="write">
+      <div class="write__content">
+        <h1>123</h1>
+      </div>
     </div>
   </aside>
 </template>