Ui improvements (#5948)

* PLT-5849 - Code block wrap on IOS

* PLT-5972 - Comment has first line indented

* PLT-6048 - Adjusting UI for link previews

* PLT-5733 - Adding error text theme option

webapp/components/user_settings/custom_theme_chooser.jsx

@@ -83,6 +83,10 @@ const messages = defineMessages({
         id: 'user.settings.custom_theme.buttonColor',
         defaultMessage: 'Button Text'
     },
+    errorTextColor: {
+        id: 'user.settings.custom_theme.errorTextColor',
+        defaultMessage: 'Error Text Color'
+    },
     mentionHighlightBg: {
         id: 'user.settings.custom_theme.mentionHighlightBg',
         defaultMessage: 'Mention Highlight BG'

webapp/sass/layout/_forms.scss

@@ -69,8 +69,10 @@
         color: $red;
     }
 
-    .control-label {
+    .form__label {
-        color: inherit;
+        &.control-label {
+            color: inherit;
+        }
     }
 
     &.radio,

webapp/sass/layout/_webhooks.scss

@@ -46,7 +46,7 @@
             border-radius: 4px;
             border-style: solid;
             border-width: 1px;
-            margin: 0 0 5px 0;
+            margin-top: 5px;
             padding: 2px 5px;
         }
 
@@ -140,7 +140,7 @@
             &.attachment__image--openraph {
                 margin-bottom: 0;
                 max-height: 80px;
-                max-width: 200px;
+                max-width: 100%;
 
                 &.loading {
                     height: 80px;

webapp/sass/responsive/_desktop.scss

@@ -76,23 +76,6 @@
                 }
             }
         }
-
-        &.move--left {
-            .post {
-                &.post--root,
-                &.other--root {
-                    .post__header {
-                        padding-right: 70px;
-                    }
-                }
-
-                &.post--comment {
-                    .post__header {
-                        padding-right: 70px;
-                    }
-                }
-            }
-        }
     }
 }
 

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,10 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .post-code {
+        word-wrap: normal;
+    }
+
     .table-responsive {
         border: none;
     }

webapp/sass/routes/_settings.scss

@@ -80,6 +80,10 @@
 
         label {
             font-weight: 600;
+
+            &.has-error {
+                font-weight: normal;
+            }
         }
 
         .no-padding--left {

webapp/utils/constants.jsx

@@ -449,6 +449,7 @@ export const Constants = {
             linkColor: '#2f81b7',
             buttonBg: '#1dacfc',
             buttonColor: '#FFFFFF',
+            errorTextColor: '#a94442',
             mentionHighlightBg: '#f3e197',
             mentionHighlightLink: '#2f81b7',
             codeTheme: 'github',
@@ -474,6 +475,7 @@ export const Constants = {
             linkColor: '#2389d7',
             buttonBg: '#23A2FF',
             buttonColor: '#FFFFFF',
+            errorTextColor: '#a94442',
             mentionHighlightBg: '#f3e197',
             mentionHighlightLink: '#2f81b7',
             codeTheme: 'github',
@@ -499,6 +501,7 @@ export const Constants = {
             linkColor: '#A4FFEB',
             buttonBg: '#4CBBA4',
             buttonColor: '#FFFFFF',
+            errorTextColor: '#ff6461',
             mentionHighlightBg: '#984063',
             mentionHighlightLink: '#A4FFEB',
             codeTheme: 'solarized-dark',
@@ -524,6 +527,7 @@ export const Constants = {
             linkColor: '#0D93FF',
             buttonBg: '#0177e7',
             buttonColor: '#FFFFFF',
+            errorTextColor: '#ff6461',
             mentionHighlightBg: '#784098',
             mentionHighlightLink: '#A4FFEB',
             codeTheme: 'monokai',
@@ -606,6 +610,11 @@ export const Constants = {
             id: 'newMessageSeparator',
             uiName: 'New Message Separator'
         },
+        {
+            group: 'centerChannelElements',
+            id: 'errorTextColor',
+            uiName: 'Error Text Color'
+        },
         {
             group: 'centerChannelElements',
             id: 'mentionHighlightBg',

webapp/utils/utils.jsx

@@ -707,6 +707,10 @@ export function applyTheme(theme) {
         changeCss('.app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor);
     }
 
+    if (theme.errorTextColor) {
+        changeCss('.app__body .has-error .help-block, .app__body .has-error .control-label, .app__body .has-error .radio, .app__body .has-error .checkbox, .app__body .has-error .radio-inline, .app__body .has-error .checkbox-inline, .app__body .has-error.radio label, .app__body .has-error.checkbox label, .app__body .has-error.radio-inline label, .app__body .has-error.checkbox-inline label', 'color:' + theme.errorTextColor);
+    }
+
     if (theme.mentionHighlightBg) {
         changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg);
         changeCss('.app__body .post.post--comment .post__body.mention-comment', 'border-color:' + theme.mentionHighlightBg);