From 96825e23d8f26142765495e15ee1f9391a7e5041 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 28 May 2024 18:03:39 -0400
Subject: [PATCH] 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>
---
 .../advanced_text_editor.scss                 | 27 +++++++++----------
 .../advanced_text_editor.tsx                  |  2 +-
 .../src/sass/components/_post-right.scss      |  4 +--
 .../channels/src/sass/components/_post.scss   |  5 ++--
 4 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
index c977915dfa..19ef839ff8 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
+++ b/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;
-        gap: 8px;
+        font-size: 12px;
 
         .help__text {
             text-align: right;
@@ -181,20 +180,18 @@
             }
         }
 
-        &--has-error {
-            padding: 6px 0 0;
-            color: var(--error-text);
-        }
-
+        .has-error,
         .post-error {
-            position: absolute;
-            top: 4px;
-            display: inline-block;
-            margin-bottom: 0;
-            font-size: 0.85em;
-            font-weight: normal;
+            margin: 4px 0 0 0;
+            color: var(--error-text);
+
+            label {
+                margin: 0;
+                color: var(--error-text);
+            }
         }
     }
+
 }
 
 @media screen and (max-width: 768px) {
@@ -235,8 +232,8 @@
     overflow: hidden;
     height: 20px;
     margin-bottom: 5px;
-    font-size: 11px;
-    opacity: 0.7;
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
index 6f0346a7bb..437464b058 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
+++ b/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})}>
diff --git a/webapp/channels/src/sass/components/_post-right.scss b/webapp/channels/src/sass/components/_post-right.scss
index 88b1a307ad..8f6be3bc55 100644
--- a/webapp/channels/src/sass/components/_post-right.scss
+++ b/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 {
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index caabeebde6..8c5414cc24 100644
--- a/webapp/channels/src/sass/components/_post.scss
+++ b/webapp/channels/src/sass/components/_post.scss
@@ -424,10 +424,9 @@
         overflow: hidden;
         height: 20px;
         margin: 2px 0;
-        color: var(--center-channel-color);
-        font-size: 11px;
+        color: rgba(var(--center-channel-color-rgb), 0.75);
+        font-size: 12px;
         line-height: 16px;
-        opacity: 0.7;
         text-overflow: ellipsis;
         white-space: nowrap;
     }