Merge pull request #70 from jitendra-ky/65-home-default-view

UX: add welcome page with dragonfly icon and styling.

Author: jitendra-ky

static/images/dragonfly-icon-200.png

@@ -166,6 +166,7 @@ function rerender_contacts_view() {
 
 function onClickContact() {
   // on click of a contact, set the selectedContactId and rerender the message view
+  $('.mainbox .welcome-page').hide()
   const contactId = $(this).attr('id')
   app_states.setSelectedContactId(contactId)
   render_msg_view()

static/js/home.js

@@ -192,6 +192,31 @@ body {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
+
+  .welcome-page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    background-color: #dddddd;
+    .img-holder {
+      height: 200px;
+      width: 200px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      margin: 20px auto;
+      align-items: center;
+      overflow: hidden;
+      img {
+        width: 80%;
+        height: 80%;
+      }
+    }
+  }
 
   .chat-header {
     display: flex;

static/styles/home.css

@@ -44,6 +44,14 @@ <h4>Dragonfly</h4>
         </div>
     </div>
     <div class="mainbox">
+        <div class="welcome-page">
+            <!-- this would be welcome page with dragonfly icon -->
+            <div class="img-holder">
+                <img src="/static/images/dragonfly-icon-200.png" alt="Dragonfly App icon" class="profile-pic">
+            </div>
+            <h2>Welcome to Dragonfly</h2>
+            <p>Chat with your friends and family</p>
+        </div>
         <div class="chat-header">
             <div class="chat-header-profile"></div>
             <div class="chat-header-details">