style: update icons in home template with Font Awesome.

fix: #73

Author: jitendra-ky

templates/base.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://kit.fontawesome.com/7d1113a0df.js" crossorigin="anonymous"></script>
     <script>
         // here i will unpack the env_var dict from the context
         var env_var = {

templates/home.html

@@ -8,12 +8,12 @@
     <div class="cont">
         <div class="left-list">
             <ul>
-                <li class="one">📥</li>
+                <li class="one"><i class="fas fa-bars"></i></li>
             </ul>
         </div>
         <div class="right-list">
             <ul>
-                <li class="user-profile">👤</li>
+                <li class="user-profile"><i class="fas fa-user"></i></li>
             </ul>
         </div>
     </div>
@@ -23,7 +23,7 @@
         <div class="header">
             <!-- <button id="sidebar-toggle">|||</button> -->
             <h3>Chat App</h3>
-            <button id="new-message-btn">+</button>
+            <button id="new-message-btn"><i class="fas fa-plus"></i></button>
         </div>
         <div class="search-bar">
             <input type="text" placeholder="Search..." />
@@ -59,7 +59,7 @@ <h4>Dragonfly</h4>
                 <p>dragonfly.jitendra.me</p>
             </div>
             <div class="chat-header-options">
-                <button>...</button>
+                <button><i class="fas fa-ellipsis-h"></i></button>
             </div>
         </div>
         <div class="chat-body">
@@ -87,7 +87,7 @@ <h4>Dragonfly</h4>
         </div>
         <div class="chat-footer">
             <textarea placeholder="Type your message here..." id="message-box"></textarea>
-            <button id="chat-msg-send-btn">Send</button>
+            <button id="chat-msg-send-btn"><i class="fas fa-paper-plane"></i></button>
         </div>
     </div>
 </div>
@@ -96,14 +96,14 @@ <h4>Dragonfly</h4>
 <div id="new-message-modal" class="modal">
     <div class="modal-content">
         <div>
-            <span class="close">&times;</span>
+            <span class="close"><i class="fas fa-times"></i></span>
             <h2>Send Message</h2>
         </div>
         <select id="user-select">
             <option value="">Select User</option>
         </select>
         <textarea id="new-message-content" rows="4" placeholder="Type your message here..."></textarea>
-        <button id="send-new-message-btn">Send</button>
+        <button id="send-new-message-btn"><i class="fas fa-paper-plane"></i> Send</button>
     </div>
 </div>