Enhance input and textarea styling

Apply Roboto font with appropriate fallbacks and adjust direction based on language (RTL/LTR).
block-core · Aug 29, 2024 · 17adf58 · 17adf58
1 parent 052b878
commit 17adf58
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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,