Merge pull request #1319 from asaadmahmoodspin/ui-improvements

UI Improvements for Slack and post dropdown

3 files changed, 29 insertions, 21 deletions

diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx
index 24da106d0..4d594bb1b 100644
--- a/web/react/components/user_settings/import_theme_modal.jsx
+++ b/web/react/components/user_settings/import_theme_modal.jsx
@@ -50,7 +50,7 @@ export default class ImportThemeModal extends React.Component {
         theme.sidebarText = colors[5];
         theme.sidebarUnreadText = colors[5];
         theme.sidebarTextHoverBg = colors[4];
-        theme.sidebarTextActiveBg = colors[2];
+        theme.sidebarTextActiveBorder = colors[2];
         theme.sidebarTextActiveColor = colors[3];
         theme.sidebarHeaderBg = colors[1];
         theme.sidebarHeaderTextColor = colors[5];
@@ -59,9 +59,13 @@ export default class ImportThemeModal extends React.Component {
         theme.mentionColor = '#ffffff';
         theme.centerChannelBg = '#ffffff';
         theme.centerChannelColor = '#333333';
+        theme.newMessageSeparator = '#F80';
         theme.linkColor = '#2389d7';
         theme.buttonBg = '#26a970';
         theme.buttonColor = '#ffffff';
+        theme.mentionHighlightBg = '#fff2bb';
+        theme.mentionHighlightLink = '#2f81b7';
+        theme.codeTheme = 'github';
 
         let user = UserStore.getCurrentUser();
         user.theme_props = theme;
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index 3c12ead23..43c8d33d1 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -172,13 +172,13 @@ export default class UserSettingsDisplay extends React.Component {
                         </label>
                         <br/>
                     </div>
-                    <div><br/>{'How should other users be shown in Direct Messages list?'}</div>
+                    <div><br/>{'Set what name to display in the Direct Messages list.'}</div>
                 </div>
             ];
 
             nameFormatSection = (
                 <SettingItemMax
-                    title='Show real names, nick names or usernames?'
+                    title='Teammate Name Display'
                     inputs={inputs}
                     submit={this.handleSubmit}
                     server_error={serverError}
@@ -200,7 +200,7 @@ export default class UserSettingsDisplay extends React.Component {
 
             nameFormatSection = (
                 <SettingItemMin
-                    title='Show real names, nick names or usernames?'
+                    title='Teammate Name Display'
                     describe={describe}
                     updateSection={() => {
                         this.props.updateSection('name_format');
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index ad31e3eb6..ef19ac601 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -182,16 +182,16 @@ body.ios {
 }
 
 #post-list {
-    flex: 1 1 auto;
-    position: relative;
-    overflow-y: hidden;
+	flex: 1 1 auto;
+	position: relative;
+	overflow-y: hidden;
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
 		width: 100%;
 		padding: 1em 0 0;
 		position: absolute;
-        height: 100%;
+		height: 100%;
 		-webkit-overflow-scrolling: touch;
 		&::-webkit-scrollbar {
 			width: 0px !important;
@@ -212,6 +212,20 @@ body.ios {
 		.post-list__content {
 			display: table-cell;
 			vertical-align: bottom;
+			div {
+				&:last-child {
+					.post {
+						.post-header {
+							.post-header-col.post-header__reply {
+								.dropdown-menu {
+									top: auto;
+									bottom: 25px;
+								}
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 	.more-messages-text {
@@ -387,16 +401,6 @@ body.ios {
 			}
 		}
 	}
-	&.post--last {
-		.post-header {
-			.post-header-col.post-header__reply {
-				.dropdown-menu {
-					top: auto;
-					bottom: 25px;
-				}
-			}
-		}
-	}
 	.post-create-footer {
 		padding: 0;
 	}
@@ -445,10 +449,10 @@ body.ios {
 		&.post-profile-img__container {
 			float: left;
 			.post-profile-img {
-                width: 36px;
-                height: 36px;
+				width: 36px;
+				height: 36px;
 				margin-right: 10px;
-                vertical-align: inherit;
+				vertical-align: inherit;
 				@include border-radius(50px);
 			}
 		}