From 17adf587313f5bbae3dba6cb430a400d9ac7022d Mon Sep 17 00:00:00 2001
From: Milad Raeisi <miladsoft@yahoo.com>
Date: Thu, 29 Aug 2024 14:58:12 +0400
Subject: [PATCH] Enhance input and textarea styling

Apply Roboto font with appropriate fallbacks and adjust direction based on language (RTL/LTR).
---
 src/app/components/chat-list/chat-list.component.css | 9 +++++++--
 src/app/components/messages/messages.component.html  | 6 ++++--
 src/styles.css                                       | 5 ++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/components/chat-list/chat-list.component.css b/src/app/components/chat-list/chat-list.component.css
index 76fa70e..d7406a0 100644
--- a/src/app/components/chat-list/chat-list.component.css
+++ b/src/app/components/chat-list/chat-list.component.css
@@ -59,9 +59,14 @@
   display: block;
   width: 100%;
 }
-
-.chat-time {
+.chat-message {
   font-size: 0.9em;
+}
+.chat-name{
+  font-size: 1.2em;
+}
+.chat-time {
+  font-size: 0.7em;
   color: #aaa;
   flex-shrink: 0;
   white-space: nowrap;
diff --git a/src/app/components/messages/messages.component.html b/src/app/components/messages/messages.component.html
index 4e4ae42..fe280e3 100644
--- a/src/app/components/messages/messages.component.html
+++ b/src/app/components/messages/messages.component.html
@@ -29,8 +29,10 @@ <h1 itemprop="name">
 
             </div>
             <div class="chat-input">
-              <textarea [(ngModel)]="message" placeholder="Type your message here"></textarea>
-              <button class="btn-angor" (click)="sendMessage()">Send</button>
+              <textarea [(ngModel)]="message"
+              [dir]="isRTL(message) ? 'rtl' : 'ltr'"
+              placeholder="Type your message here"></textarea>
+                            <button class="btn-angor" (click)="sendMessage()">Send</button>
               <button class="btn-angor" (click)="toggleEmojiPicker()">😊</button>
               <div *ngIf="isEmojiPickerVisible" class="emoji-picker">
                 <span *ngFor="let emoji of customEmojis" (click)="addEmoji(emoji)">{{ emoji }}</span>
diff --git a/src/styles.css b/src/styles.css
index 7cc9e97..a2ced32 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,11 +6,14 @@ textarea {
   padding: 12px 16px !important;
   border: none !important;
   font-size: 14px !important;
-  color: var(--neut-L30) !important;
+  color: var(--neut-L70) !important;
   transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   width: 100%;
   box-sizing: border-box;
+  font: 16px "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
+  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  sans-serif !important;
 }
 
 input[type="text"]::placeholder,