1 files changed, 52 insertions, 39 deletions

diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index b942a5a40..1dcdbf348 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -140,7 +140,7 @@
 			padding: 0;
 		}
 	}
-	.more-channel-table {
+	.more-table {
 		margin: 0;
 		table-layout: fixed;
 		p {
@@ -150,9 +150,11 @@
 			@include opacity(0.8);
 			margin: 5px 0;
 		}
-		.more-channel-name {
+		.more-name {
 			font-weight: 600;
 			font-size: 0.95em;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 		tbody {
 			> tr {
@@ -175,6 +177,9 @@
 						padding: 8px 15px 8px 8px;
 						width: 80px;
 						vertical-align: middle;
+						&.lg {
+							width: 110px;
+						}
 					}
 				}
 			}
@@ -189,7 +194,7 @@
 			position: relative;
 			max-width: 90%;
 			min-height: 100px;
-			min-width: 240px;
+			min-width: 320px;
 			@include border-radius(3px);
 			display: table;
 			margin: 0 auto;
@@ -223,11 +228,24 @@
 				background: #FFF;
 				display: table-cell;
 				vertical-align: middle;
+				position: relative;
+
+				&:hover .file-playback-controls.stop {
+			        @include opacity(1);
+			    }
 			}
 			img {
 				max-width: 100%;
 				max-height: 100%;
 			}
+			.spinner.file__loading {
+				z-index: 2;
+				position: absolute;
+				left: 50%;
+				margin-left: -16px;
+				top: 50%;
+				margin-top: -16px;
+			}
 		}
 		.modal-content{
 			box-shadow: none;
@@ -331,47 +349,42 @@
 }
 
 .modal-direct-channels {
-    .user-list {
-        list-style-type: none;
-        margin: 15px 0px 0px;
-        max-height: 600px;
-        padding: 0px;
-        overflow: auto;
 
-        li {
-            border-bottom: 1px solid #ddd;
-            height: 60px;
-            padding: 10px 0px;
+	.user-list {
+		margin-top: 10px;
+		overflow: auto;
+		-webkit-overflow-scrolling: touch;
+		max-height: 500px;
+		position: relative;
+	}
 
-            .image-div {
-                padding: 0px;
+	.table {
+		margin-top: 10px;
+	}
 
-                .profile-image {
-                    width: 40px;
-                    height: 40px;
-                    @include border-radius(20px);
-                }
-            }
+	.modal-body {
+		padding: 20px 0 0;
+		@include clearfix;
+	}
 
-            .username {
-                font-weight: bold;
-            }
+	.filter-row {
+		padding: 0 15px;
+	}
 
-            .nickname {
-                color: #888;
-            }
+	.member-count {
+		margin-top: 5px;
+		float: right;
+		@include opacity(0.8);
+	}
 
-            .btn-div {
-                padding: 0px;
-                .btn-message {
-                    position: relative;
-                    top: 5px;
-                }
-            }
+	.more-description {
+		@include opacity(0.7);
+	}
 
-            &:last-child {
-                border-bottom: 0px;
-            }
-        }
-    }
+	.profile-img {
+		-moz-border-radius: 50px;
+		-webkit-border-radius: 50px;
+		border-radius: 50px;
+		margin-right: 8px;
+	}
 }