UI Improvements

7 files changed, 232 insertions, 170 deletions

diff --git a/web/react/components/admin_console/team_analytics.jsx b/web/react/components/admin_console/team_analytics.jsx
index a945a551c..0c9d1f61b 100644
--- a/web/react/components/admin_console/team_analytics.jsx
+++ b/web/react/components/admin_console/team_analytics.jsx
@@ -210,69 +210,89 @@ export default class TeamAnalytics extends React.Component {
         }
 
         var totalCount = (
-            <div className='total-count text-center'>
-                <div>{'Total Users'}</div>
-                <div>{this.state.users == null ? 'Loading...' : Object.keys(this.state.users).length}</div>
+            <div className='col-sm-3'>
+                <div className='total-count'>
+                    <div className='title'>{'Total Users'}<i className='fa fa-users'/></div>
+                    <div className='content'>{this.state.users == null ? 'Loading...' : Object.keys(this.state.users).length}</div>
+                </div>
             </div>
         );
 
         var openChannelCount = (
-            <div className='total-count text-center'>
-                <div>{'Public Groups'}</div>
-                <div>{this.state.channel_open_count == null ? 'Loading...' : this.state.channel_open_count}</div>
+            <div className='col-sm-3'>
+                <div className='total-count'>
+                    <div className='title'>{'Public Groups'}<i className='fa fa-unlock-alt'/></div>
+                    <div className='content'>{this.state.channel_open_count == null ? 'Loading...' : this.state.channel_open_count}</div>
+                </div>
             </div>
         );
 
         var openPrivateCount = (
-            <div className='total-count text-center'>
-                <div>{'Private Groups'}</div>
-                <div>{this.state.channel_private_count == null ? 'Loading...' : this.state.channel_private_count}</div>
+            <div className='col-sm-3'>
+                <div className='total-count'>
+                    <div className='title'>{'Private Groups'}<i className='fa fa-lock'/></div>
+                    <div className='content'>{this.state.channel_private_count == null ? 'Loading...' : this.state.channel_private_count}</div>
+                </div>
             </div>
         );
 
         var postCount = (
-            <div className='total-count text-center'>
-                <div>{'Total Posts'}</div>
-                <div>{this.state.post_count == null ? 'Loading...' : this.state.post_count}</div>
+            <div className='col-sm-3'>
+                <div className='total-count'>
+                    <div className='title'>{'Total Posts'}<i className='fa fa-comment'/></div>
+                    <div className='content'>{this.state.post_count == null ? 'Loading...' : this.state.post_count}</div>
+                </div>
             </div>
         );
 
         var postCountsByDay = (
-            <div className='total-count-by-day'>
-                <div>{'Total Posts'}</div>
-                <div>{'Loading...'}</div>
+            <div className='col-sm-12'>
+                <div className='total-count by-day'>
+                    <div className='title'>{'Total Posts'}</div>
+                    <div className='content'>{'Loading...'}</div>
+                </div>
             </div>
         );
 
         if (this.state.post_counts_day != null) {
             postCountsByDay = (
-                <div className='total-count-by-day'>
-                    <div>{'Total Posts'}</div>
-                    <LineChart
-                        data={this.state.post_counts_day}
-                        width='740'
-                        height='225'
-                    />
+                <div className='col-sm-12'>
+                    <div className='total-count by-day'>
+                        <div className='title'>{'Total Posts'}</div>
+                        <div className='content'>
+                            <LineChart
+                                data={this.state.post_counts_day}
+                                width='740'
+                                height='225'
+                            />
+                        </div>
+                    </div>
                 </div>
             );
         }
 
         var usersWithPostsByDay = (
-            <div className='total-count-by-day'>
-                <div>{'Total Posts'}</div>
-                <div>{'Loading...'}</div>
+            <div className='col-sm-12'>
+                <div className='total-count by-day'>
+                    <div className='title'>{'Total Posts'}</div>
+                    <div>{'Loading...'}</div>
+                </div>
             </div>
         );
 
         if (this.state.user_counts_with_posts_day != null) {
             usersWithPostsByDay = (
-                <div className='total-count-by-day'>
-                    <div>{'Active Users With Posts'}</div>
-                    <LineChart
-                        data={this.state.user_counts_with_posts_day}
-                        width='740'
-                        height='225'
-                    />
+                <div className='col-sm-12'>
+                    <div className='total-count by-day'>
+                        <div className='title'>{'Active Users With Posts'}</div>
+                        <div className='content'>
+                            <LineChart
+                                data={this.state.user_counts_with_posts_day}
+                                width='740'
+                                height='225'
+                            />
+                        </div>
+                    </div>
                 </div>
             );
         }
@@ -286,22 +306,26 @@ export default class TeamAnalytics extends React.Component {
 
         if (this.state.recent_active_users != null) {
             recentActiveUser = (
-                <div className='recent-active-users'>
-                    <div>{'Recent Active Users'}</div>
-                    <table width='90%'>
-                        <tbody>
-                            {
-                                this.state.recent_active_users.map((user) => {
-                                    return (
-                                        <tr key={user.id}>
-                                            <td className='recent-active-users-td'>{user.email}</td>
-                                            <td className='recent-active-users-td'>{Utils.displayDateTime(user.last_activity_at)}</td>
-                                        </tr>
-                                    );
-                                })
-                            }
-                        </tbody>
-                    </table>
+                <div className='col-sm-6'>
+                    <div className='total-count recent-active-users'>
+                        <div className='title'>{'Recent Active Users'}</div>
+                        <div className='content'>
+                            <table>
+                                <tbody>
+                                    {
+                                        this.state.recent_active_users.map((user) => {
+                                            return (
+                                                <tr key={user.id}>
+                                                    <td>{user.email}</td>
+                                                    <td>{Utils.displayDateTime(user.last_activity_at)}</td>
+                                                </tr>
+                                            );
+                                        })
+                                    }
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
             );
         }
@@ -315,38 +339,50 @@ export default class TeamAnalytics extends React.Component {
 
         if (this.state.newly_created_users != null) {
             newUsers = (
-                <div className='recent-active-users'>
-                    <div>{'Newly Created Users'}</div>
-                    <table width='90%'>
-                        <tbody>
-                            {
-                                this.state.newly_created_users.map((user) => {
-                                    return (
-                                        <tr key={user.id}>
-                                            <td className='recent-active-users-td'>{user.email}</td>
-                                            <td className='recent-active-users-td'>{Utils.displayDateTime(user.create_at)}</td>
-                                        </tr>
-                                    );
-                                })
-                            }
-                        </tbody>
-                    </table>
+                <div className='col-sm-6'>
+                    <div className='total-count recent-active-users'>
+                        <div className='title'>{'Newly Created Users'}</div>
+                        <div className='content'>
+                            <table>
+                                <tbody>
+                                    {
+                                        this.state.newly_created_users.map((user) => {
+                                            return (
+                                                <tr key={user.id}>
+                                                    <td>{user.email}</td>
+                                                    <td>{Utils.displayDateTime(user.create_at)}</td>
+                                                </tr>
+                                            );
+                                        })
+                                    }
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
             );
         }
 
         return (
-            <div className='wrapper--fixed'>
-                <h2>{'Statistics for ' + this.props.team.name}</h2>
+            <div className='wrapper--fixed team_statistics'>
+                <h3>{'Statistics for ' + this.props.team.name}</h3>
                 {serverError}
-                {totalCount}
-                {postCount}
-                {openChannelCount}
-                {openPrivateCount}
-                {postCountsByDay}
-                {usersWithPostsByDay}
-                {recentActiveUser}
-                {newUsers}
+                <div className='row'>
+                    {totalCount}
+                    {postCount}
+                    {openChannelCount}
+                    {openPrivateCount}
+                </div>
+                <div className='row'>
+                    {postCountsByDay}
+                </div>
+                <div className='row'>
+                    {usersWithPostsByDay}
+                </div>
+                <div className='row'>
+                    {recentActiveUser}
+                    {newUsers}
+                </div>
             </div>
         );
     }
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 9cffa2400..f3c0fa0b4 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -42,6 +42,10 @@ export default class PopoverListMembers extends React.Component {
         };
     }
 
+    componentDidUpdate() {
+        $(ReactDOM.findDOMNode(this.refs.memebersPopover)).find('.popover-content').perfectScrollbar();
+    }
+
     handleShowDirectChannel(teammate, e) {
         e.preventDefault();
 
@@ -106,27 +110,27 @@ export default class PopoverListMembers extends React.Component {
                 let button = '';
                 if (currentUserId !== m.id && ch.type !== 'D') {
                     button = (
-                        <button
-                            type='button'
-                            className='btn btn-primary btn-message'
+                        <a
+                            href='#'
+                            className='btn-message'
                             onClick={(e) => this.handleShowDirectChannel(m, e)}
                         >
                             {'Message'}
-                        </button>
+                        </a>
                     );
                 }
 
                 if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) {
                     popoverHtml.push(
                         <div
-                            className='text--nowrap'
+                            className='text-nowrap'
                             key={'popover-member-' + i}
                         >
 
                             <img
-                                className='profile-img pull-left'
-                                width='38'
-                                height='38'
+                                className='profile-img rounded pull-left'
+                                width='26px'
+                                height='26px'
                                 src={`/api/v1/users/${m.id}/image?time=${m.update_at}&${Utils.getSessionIndex()}`}
                             />
                             <div className='pull-left'>
@@ -135,14 +139,9 @@ export default class PopoverListMembers extends React.Component {
                                 >
                                     {m.username}
                                 </div>
-                                <div
-                                    className='more-description'
-                                >
-                                    {details}
-                                </div>
                             </div>
                             <div
-                                className='pull-right profile-action'
+                                className='pull-right'
                             >
                                 {button}
                             </div>
@@ -182,12 +181,11 @@ export default class PopoverListMembers extends React.Component {
                     placement='bottom'
                 >
                     <Popover
+                        ref='memebersPopover'
                         title='Members'
                         id='member-list-popover'
                     >
-                        <div>
-                            {popoverHtml}
-                        </div>
+                        {popoverHtml}
                     </Popover>
                 </Overlay>
             </div>
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss
index 9c65e2d1e..206d5bfca 100644
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/web/sass-files/sass/partials/_admin-console.scss
@@ -2,63 +2,16 @@
     > div {
         height: 100%;
     }
-    .table {
-        background: #fff;
-    }
-
-    .total-count {
-        width: 175px;
-        height: 100px;
-        border: 1px solid #ddd;
-        padding: 22px 10px 10px 10px;
-        margin: 10px 10px 10px 10px;
-        background: #fff;
-        float: left;
-
-        > div {
-            font-size: 18px;
-            font-weight: 300;
-        }
-    }
-
-    .total-count-by-day {
-        width: 760px;
-        height: 275px;
-        border: 1px solid #ddd;
-        padding: 5px 10px 10px 10px;
-        margin: 10px 10px 10px 10px;
-        background: #fff;
-        clear: both;
 
-        > div {
-            font-size: 18px;
-            font-weight: 300;
-        }
+    h3 {
+        font-weight: 600;
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 0.5em;
+        margin: 1em 0;
     }
 
-    .recent-active-users {
-        width: 365px;
-        border: 1px solid #ddd;
-        padding: 5px 10px 10px 10px;
-        margin: 10px 10px 10px 10px;
+    .table {
         background: #fff;
-        float: left;
-
-        > div {
-            font-size: 18px;
-            font-weight: 300;
-        }
-
-        > table {
-            margin: 10px 10px 10px 10px;
-        }
-
-        .recent-active-users-td {
-            font-size: 14px;
-            font-weight: 300;
-            border: 1px solid #ddd;
-            padding: 3px 3px 3px 5px;
-        }
     }
 
     .sidebar--left {
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 8bf163f90..7e776bf76 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -215,7 +215,7 @@
 		color: #999;
 		cursor: pointer;
 		.fa {
-			margin-left: 3px;
+			margin-left: 4px;
 			font-size: 16px;
 		}
 	}
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss
index 4f5f1d215..430813e63 100644
--- a/web/sass-files/sass/partials/_popover.scss
+++ b/web/sass-files/sass/partials/_popover.scss
@@ -41,6 +41,9 @@
         padding: 6px 8px;
         margin: 3px 0;
         @include border-radius(2px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &:hover {
             background: rgba(black, 0.1);
@@ -94,33 +97,20 @@
 
 #member-list-popover {
     max-width: initial;
-    .popover-content > div {
+    .popover-content {
+        position: relative;
+        padding: 0;
+        width: 260px;
         max-height: 350px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        > div {
-            border-bottom: 1px solid rgba(51,51,51,0.1);
-            padding: 8px 8px 8px 15px;
+        .text-nowrap {
+            padding: 6px 10px;
             width: 100%;
-            box-sizing: content-box;
-            @include clearfix;
-            .profile-img {
-                border-radius: 50px;
-                margin-right: 8px;
-            }
-            .more-name {
-                font-weight: 600;
-                font-size: 0.95em;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .more-description {
-                @include opacity(0.7);
-            }
-            .profile-action {
-                margin-left: 8px;
-                margin-right: 18px;
-            }
+            overflow: hidden;
+            line-height: 26px;
+            font-size: 13px;
+        }
+        .more-name {
+            margin-left: 6px;
         }
     }
 }
diff --git a/web/sass-files/sass/partials/_statistics.scss b/web/sass-files/sass/partials/_statistics.scss
new file mode 100644
index 000000000..a2401a70f
--- /dev/null
+++ b/web/sass-files/sass/partials/_statistics.scss
@@ -0,0 +1,84 @@
+.team_statistics {
+	.total-count {
+		margin: 1em 0;
+		text-align: center;
+		background: #fff;
+		border: 1px solid #ddd;
+		width: 100%;
+		@include border-radius(3px);
+
+		.title {
+			font-weight: 400;
+			padding: 7px 10px;
+			border-bottom: 1px solid #ddd;
+			text-align: left;
+
+			.fa {
+				float: right;
+				margin: 3px 0 0;
+				color: #555;
+				font-size: 16px;
+			}
+
+		}
+
+		.content {
+			font-size: 30px;
+			font-weight: 600;
+			color: #555;
+			padding: 0.3em 0 0.35em;
+			overflow: auto;
+		}
+
+	}
+
+	.total-count--day {
+		width: 760px;
+		height: 275px;
+		border: 1px solid #ddd;
+		padding: 5px 10px 10px 10px;
+		margin: 10px 10px 10px 10px;
+		background: #fff;
+		clear: both;
+
+		> div {
+			font-size: 18px;
+			font-weight: 300;
+		}
+	}
+
+	.recent-active-users {
+
+		table {
+			width: 100%;
+			table-layout: fixed;
+		}
+
+		.content {
+			max-height: 400px;
+			overflow: auto;
+			padding: 0;
+		}
+
+		tr {
+			&:first-child {
+				td {
+					border-top: none;
+				}
+			}
+			td {
+				font-weight: 400;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				font-size: 13px;
+				border-left: 1px solid #ddd;
+				border-top: 1px solid #ddd;
+				padding: 5px 5px 6px;
+				@include clearfix;
+				&:first-child {
+					border-left: none;
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss
index c614052da..ad2cae194 100644
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -38,6 +38,7 @@
 @import "partials/loading";
 @import "partials/get-link";
 @import "partials/markdown";
+@import "partials/statistics";
 
 // Responsive Css
 @import "partials/responsive";