MM-58183 Post Error Style Fixes (#27015)

* fix alignment of error messages and consistent font size with typing message

* fix lint issues

* Remove unused CSS class from div

---------

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss

@@ -169,8 +169,7 @@
         display: flex;
         flex-direction: column;
         padding: 0 24px;
-        font-size: 13px;
+        font-size: 12px;
-        gap: 8px;
 
         .help__text {
             text-align: right;
@@ -181,20 +180,18 @@
             }
         }
 
-        &--has-error {
+        .has-error,
-            padding: 6px 0 0;
-            color: var(--error-text);
-        }
-
         .post-error {
-            position: absolute;
+            margin: 4px 0 0 0;
-            top: 4px;
+            color: var(--error-text);
-            display: inline-block;
+
-            margin-bottom: 0;
+            label {
-            font-size: 0.85em;
+                margin: 0;
-            font-weight: normal;
+                color: var(--error-text);
+            }
         }
     }
+
 }
 
 @media screen and (max-width: 768px) {
@@ -235,8 +232,8 @@
     overflow: hidden;
     height: 20px;
     margin-bottom: 5px;
-    font-size: 11px;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
-    opacity: 0.7;
+    font-size: 12px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx

@@ -754,7 +754,7 @@ const AdvanceTextEditor = ({
             <div
                 id='postCreateFooter'
                 role='form'
-                className={classNames('AdvancedTextEditor__footer', {'AdvancedTextEditor__footer--has-error': postError || serverError})}
+                className='AdvancedTextEditor__footer'
             >
                 {postError && (
                     <label className={classNames('post-error', {errorClass})}>

webapp/channels/src/sass/components/_post-right.scss

@@ -189,10 +189,10 @@
             max-width: 100%;
             height: 20px;
             margin: 2px 0;
+            color: rgba(var(--center-channel-color-rgb), 0.75);
             float: left;
-            font-size: 11px;
+            font-size: 12px;
             line-height: 16px;
-            opacity: 0.7;
         }
 
         .post-right-comments-upload-in-progress {

webapp/channels/src/sass/components/_post.scss

@@ -424,10 +424,9 @@
         overflow: hidden;
         height: 20px;
         margin: 2px 0;
-        color: var(--center-channel-color);
+        color: rgba(var(--center-channel-color-rgb), 0.75);
-        font-size: 11px;
+        font-size: 12px;
         line-height: 16px;
-        opacity: 0.7;
         text-overflow: ellipsis;
         white-space: nowrap;
     }