update ui

src/js/components/Avatar/index.js

@@ -1,6 +1,5 @@
 
 import React, { Component, PropTypes } from 'react';
-import clazz from 'classname';
 
 import './style.global.css';
 
@@ -27,7 +26,7 @@ export default class Avatar extends Component {
 
         return (
             <img
-                className={clazz('Avatar', 'fade fadein', this.props.className)}
+                className={`Avatar fade fadein ${this.props.className}`}
                 src={this.props.src}
                 onClick={this.props.onClick}
                 onLoad={e => this.handleLoad(e)}

src/js/pages/BatchSend/style.css

@@ -56,7 +56,7 @@
     padding-top: 8px;
     margin: 0;
     list-style: none;
-    height: calc(100vh - 90px - 60px - 8px);
+    height: calc(100vh - 90px - 60px - 8px); /* Height - Header - Search Input - Message Input - Padding */
     overflow: hidden;
     overflow-y: auto;
 
@@ -168,7 +168,7 @@
     }
 
     .list {
-        height: calc(100vh - 70px - 46px - 8px);
+        height: calc(100vh - 80px - 46px - 8px);
 
         & li {
             padding: 2px 14px;

src/js/pages/Contacts/style.css

@@ -1,7 +1,6 @@
 
 .columns {
     display: flex;
-    height: calc(100vh - 60px - 40px);
     padding: 30px 17px 0;
     justify-content: space-between;
 }
@@ -122,7 +121,6 @@
 
 @media (width <= 800px) {
     .columns {
-        height: calc(100vh - 46px - 60px);
         padding: 20px 17px 0;
     }
 

src/js/pages/Header/style.css

@@ -18,8 +18,6 @@
 
 @media (width <= 800px) {
     .container h1 {
-        height: 30px;
-        line-height: 30px;
         font-size: 12px;
     }
 }

src/js/pages/Home/ChatContent/index.js

@@ -629,7 +629,7 @@ export default class ChatContent extends Component {
                             [classes.noselected]: !user,
                         })}>
                             <img src="assets/images/noselected.png" className="disabledDrag" />
-                            <h1>No Chat selected.</h1>
+                            <h1>No Chat selected :(</h1>
                         </div>
                     )
                 }

src/js/pages/Home/ChatContent/style.css

@@ -85,7 +85,7 @@
 
 .messages {
     width: 100%;
-    height: calc(100vh - 160px - 16px);
+    height: calc(100vh - 160px - 16px); /* Height - Header - Footer - Subtitle - Padding top */
     padding-top: 16px;
     overflow-x: hidden;
     overflow-y: auto;
@@ -715,7 +715,7 @@
     }
 
     .messages {
-        height: calc(100vh - 92px - 30px - 12px);
+        height: calc(100vh - 92px - 40px - 12px);
         padding-top: 12px;
 
         & :global(.qqemoji) {

src/js/pages/Home/Chats/style.css

@@ -4,7 +4,7 @@
 }
 
 .chats {
-    height: calc(100vh - 160px);
+    height: calc(100vh - 160px); /* Height - Header - Footer - Search Input */
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -57,6 +57,7 @@
     max-width: 170px;
     margin: 0;
     padding: 0;
+    padding-right: 4px;
     margin-bottom: 12px;
     font-family: 'Helvetica';
     font-size: 15px;
@@ -106,7 +107,7 @@
 
 @media (width <= 800px) {
     .chats {
-        height: calc(100vh - 76px - 46px);
+        height: calc(100vh - 86px - 46px);
     }
 
     .chat {

src/js/pages/Home/SearchBar/style.css

@@ -33,7 +33,7 @@
     width: 100%;
     top: 60px;
     left: 0;
-    height: calc(100vh - 100px - 60px);
+    height: calc(100vh - 100px - 60px); /* Height - Header - Footer - Search input */
     overflow-y: auto;
     overflow-x: hidden;
 
@@ -134,7 +134,7 @@
 
     .dropdown {
         top: 46px;
-        height: calc(100vh - 76px - 46px);
+        height: calc(100vh - 86px - 46px);
 
         & header {
             padding: 6px 16px;

src/js/pages/Layout.css

@@ -4,6 +4,7 @@
     overflow: hidden;
     overflow-y: auto;
     background: rgba(255, 255, 255, .8);
+    box-shadow: inset 0 1px 0 0 #eaedea;
     filter: blur(0);
     transition: .2s;
 
@@ -62,6 +63,6 @@
 
 @media (width <= 800px) {
     .container {
-        height: calc(100vh - 76px);
+        height: calc(100vh - 86px);
     }
 }

src/js/pages/Members/style.css

@@ -137,8 +137,6 @@
 
 @media (width <= 800px) {
     .container {
-        top: 30px;
-
         & header {
             padding: 0 10px;
             height: 40px;
@@ -148,7 +146,7 @@
     }
 
     .list {
-        height: calc(100vh - 70px - 46px);
+        height: calc(100vh - 80px - 46px);
 
         & li {
             padding: 0 10px;