Merge pull request #925 from asaadmahmoodspin/ui-improvements

Multiple UI Improvements

web/react/components/popover_list_members.jsx

@@ -67,9 +67,6 @@ export default class PopoverListMembers extends React.Component {
             >
                 <div
                     id='member_tooltip'
-                    data-placement='left'
-                    data-toggle='tooltip'
-                    title='View Channel Members'
                 >
                     {countText}
                     <span

web/react/components/user_settings/import_theme_modal.jsx

@@ -150,7 +150,9 @@ export default class ImportThemeModal extends React.Component {
                                         className='form-control'
                                         onChange={this.handleChange}
                                     />
-                                    {this.state.inputError}
+                                    <div className='input__help'>
+                                        {this.state.inputError}
+                                    </div>
                                 </div>
                             </div>
                         </Modal.Body>

web/react/utils/utils.jsx

@@ -471,7 +471,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelColor) {
-        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .command-name, .modal .modal-content, .dropdown-menu, .popover, .mentions-name', 'color:' + theme.centerChannelColor, 1);
         changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.mentions--top, .command-box', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
         changeCss('.mentions--top, .command-box', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2);
@@ -479,7 +479,7 @@ export function applyTheme(theme) {
         changeCss('.dropdown-menu, .popover ', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 3);
         changeCss('.dropdown-menu, .popover ', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 2);
         changeCss('.dropdown-menu, .popover ', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.1) + ' 0px 6px 12px', 1);
-        changeCss('.post-body hr', 'background:' + theme.centerChannelColor, 1);
+        changeCss('.post-body hr, .loading-screen .loading__content .round', 'background:' + theme.centerChannelColor, 1);
         changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1);
         changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);

web/sass-files/sass/partials/_base.scss

@@ -36,14 +36,13 @@ body {
 
 .popover {
   color: #333;
-  a {
+  &.bottom {
-    color: $primary-color;
+    >.arrow:after {
-    &:hover, &:focus {
+      border-bottom-color: rgba(white, 0.5);
-      color: $primary-color;
     }
   }
   .popover-title {
-    background: rgba(black, 0.1);
+    background: rgba(black, 0.05);
   }
 }
 
@@ -60,7 +59,7 @@ body {
 }
 
 .word-break--all {
-    word-break: break-all;
+  word-break: break-all;
 }
 
 a {
@@ -165,9 +164,9 @@ a:focus, a:hover {
 }
 
 .emoji {
-    width: 1.5em;
+  width: 1.5em;
-    height: 1.5em;
+  height: 1.5em;
-    display: inline-block;
+  display: inline-block;
-    margin-bottom: 0.25em;
+  margin-bottom: 0.25em;
-    background-size: contain;
+  background-size: contain;
 }

web/sass-files/sass/partials/_forms.scss

@@ -16,11 +16,12 @@
 		}
 	}
 	.input__help {
-		color: #777;
+		color: inherit;
 		margin: 10px 0 0 10px;
 	    word-break: break-word;
+	    @include opacity(0.8);
 		&.dark {
-			color: #222;
+			@include opacity(1);
 		}
 		&.error {
 			color: #a94442;

web/sass-files/sass/partials/_headers.scss

@@ -37,7 +37,7 @@
 		&.description {
 			overflow: hidden;
 			text-overflow: ellipsis;
-			color: #888;
+			@include opacity(0.6);
 			margin-top: 2px;
 			max-height: 45px;
 		}

web/sass-files/sass/partials/_mentions.scss

@@ -55,10 +55,6 @@
 	padding-left: 10px;
 }
 
-.mention-link {
-	color: $primary-color;
-}
-
 .mention-highlight {
 	background-color:#fff2bb;
 	color: #333;

web/sass-files/sass/partials/_settings.scss

@@ -81,6 +81,7 @@
 
             .appearance-section {
                 .premade-themes {
+                    margin-bottom: 10px;
                     .theme-label {
                         font-weight: 400;
                         margin-top: 5px;