updated chat UI

Author: eugen-strukov

samples/chat/css/dashboard.css

@@ -3,7 +3,6 @@
     height: 35px;
     background-color: #FFFFFF;
     color: #687A97;
-    font-family: "Open Sans";
     font-size: 12px;
     font-weight: 600;
     line-height: 12px;
@@ -13,12 +12,14 @@
 
 .j-update_dialog_form, .j-update_chat__title_button, .j-back_to_dialog, .j-update_dialog_link {
     display: none;
+    color: #3978FC;
 }
 
 .j-update_dialog_form.active, .j-update_chat__title_button.active, .j-back_to_dialog.active {
     display: block;
     margin-top: 4px;
     margin: 15px 0 0 12px;
+    color: #000;
 }
 
 .j-update_dialog_link.active {
@@ -28,14 +29,12 @@
 
 .j-update_dialog h5 {
     color: #6C7A92;
-    font-family: "Open Sans";
     font-size: 12px;
     line-height: 17px;
     top: 29px;
     left: 16px;
     display: none;
     margin-left: 11px;
-    margin-top: -4px;
 }
 
 .j-update_dialog h5.active {
@@ -44,10 +43,9 @@
 
 .j-update_dialog h3 {
     position: absolute;
-    top: 13px;
-    right: 15px;
+    top: 19px;
+    right: 13px;
     color: #3978FC;
-    font-family: "Open Sans";
     font-size: 16px;
     font-weight: 600;
     line-height: 22px;
@@ -65,18 +63,18 @@
 }
 
 .j-update_dialog_btn, .j-create_dialog_btn, .j-forward_dialog_btn {
-     position: absolute;
-     top: 6px;
-     right: 2px;
-     color: #3978FC;
-     font-family: "Open Sans";
-     font-size: 15px;
-     height: 22px;
-     width: 67px;
-     font-weight: 600;
-     line-height: 22px;
-     text-align: right;
-     z-index: 2;
+    position: absolute;
+    top: 6px;
+    right: 2px;
+    color: #3978FC;
+    font-size: 16px;
+    height: 22px;
+    width: 67px;
+    font-weight: 600;
+    line-height: 22px;
+    text-align: right;
+    z-index: 2;
+    font-family: Open Sans Regular;
  }
 
 .j-forward_dialog_btn {
@@ -85,11 +83,15 @@
 
 .j-delete_dialog_btn {
     color: #3978FC;
-    font-family: "Open Sans";
     font-size: 15px;
     font-weight: 600;
     padding: 0;
-    margin: 15px 16px 0 0;
+    margin: 0px 16px 0 0;
+    font-family: Open Sans Regular;
+    position: absolute;
+    right: 2px;
+    line-height: 60px;
+    height: 40px;
 }
 
 .j-occupants_chat__user_list .container {
@@ -104,16 +106,15 @@
     background-color: #D9E3F7;
     padding: 2px 20px 2px 20px;
     color: #6C7A92;
-    font-family: "Open Sans";
     font-size: 12px;
     line-height: 17px;
     text-align: center;
 }
 
 .sidebar__dilog_list {
     flex: 1 1 100%;
-    overflow-y: auto;
     text-align: left;
+    overflow-y: scroll;
 }
 
 .sidebar__dilog_list.loading:after {
@@ -147,7 +148,7 @@
 
 
 .dialog__item_link {
-    padding: 16px 10px;
+    padding: 10px 16px 10px 7.3px;
     display: flex;
     flex-wrap: nowrap;
     text-decoration: none;
@@ -317,25 +318,28 @@
 .dialog__name {
     display: block;
     width: 100%;
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 500;
     line-height: 18px;
-    color: #4A4A4A;
+    color: #000000;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     margin: 0 10px 6px 0;
+    letter-spacing: 0;
 }
 
 .dialog__last_message {
     display: block;
     width: 100%;
-    font-size: 13px;
-    line-height: 15px;
-    color: #778594;
+    font-size: 14px;
+    line-height: 17px;
+    color: #6C7A92;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    letter-spacing: normal;
+    margin-top: -2px;
 }
 
 .dialog__last_message.attachment {
@@ -382,7 +386,6 @@
 #is__typing {
     height: 38px;	width: 375px;
     color: #6C7A92;
-    font-family: "Open Sans";
     font-size: 12px;
     font-style: italic;
     line-height: 17px;

samples/chat/css/dialogs.css

@@ -10,7 +10,7 @@
 .login__container {
     display: flex;
     height: 100%;
-    width: 343px;
+    max-width: 343px;
     flex-direction: column;
     padding-bottom: 13px;
     margin: 0 auto;
@@ -28,7 +28,7 @@
 }
 
 .login__logo {
-    display: block;
+    display: none;
     width: 100px;
     margin-left: 16px;
 }
@@ -64,7 +64,6 @@
     width: 184px;
     opacity: 0.5;
     color: #333333;
-    font-family: "Open Sans";
     font-size: 14px;
     line-height: 19px;
     display: inline-block;
@@ -73,11 +72,14 @@
 
 .login_form__row input {
     height: 44px;
-    width: 343px;
+    max-width: 343px;
     border-radius: 4px;
     background-color: #FFFFFF;
     box-shadow: 0 6px 11px 0 #D8E5FF;
     border: none;
+    width: 100%;
+    font-size: 16px;
+    font-family: Open Sans Regular;
 }
 
 .login_form__row.error input {
@@ -108,6 +110,7 @@
     text-align: left;
     padding: 16px 20px 0;
 }
+
 .login__footer:after {
     content: '';
     display: table;
@@ -162,7 +165,6 @@
     }
 
     .login__logo {
-        display: inline-block;
         vertical-align: middle;
         width: 36px;
     }
@@ -177,7 +179,6 @@
         height: 44px;
         width: 198px;
         color: #333333;
-        font-family: "Open Sans";
         font-size: 16px;
         line-height: 22px;
         text-align: center;
@@ -188,12 +189,18 @@
     }
 }
 
+@media screen and (min-height: 540px) {
+    .login__container {
+        height: inherit;
+        padding-top: 129px;
+    }
+}
+
 .use-alphanumeric-cha {
     display: none;
     height: 34px;
     width: 342px;
     color: #6B7992;
-    font-family: "Open Sans";
     font-size: 12px;
     line-height: 17px;
     margin-top: 10px;
@@ -204,7 +211,6 @@
     height: 34px;
     width: 342px;
     color: #6B7992;
-    font-family: "Open Sans";
     font-size: 12px;
     line-height: 17px;
     margin-top: 10px;
@@ -218,13 +224,11 @@
     height: 44px;
     width: 198px;
     color: #333333;
-    font-family: 'Open Sans';
     font-size: 16px;
     letter-spacing: 0;
     line-height: 22px;
     text-align: center;
-    margin: 0 auto;
-    margin-bottom: 25px;
+    margin: 0 auto 25px;
 }
 
 @media screen and (min-height: 400px) {