From 827d2b6225b0edd84b72242da269c9fc7150fd97 Mon Sep 17 00:00:00 2001
From: diazz <dat.nguyen.supper@gmail.com>
Date: Fri, 2 Dec 2022 21:44:35 +0700
Subject: [PATCH] fix: update error message modal

---
 .../containers/timeline-wall/modal-event-add/index.jsx    | 8 ++++++--
 .../containers/timeline-wall/modal-event-add/styles.scss  | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/shared/containers/timeline-wall/modal-event-add/index.jsx b/src/shared/containers/timeline-wall/modal-event-add/index.jsx
index c4cde0570c..e4fd5517b9 100644
--- a/src/shared/containers/timeline-wall/modal-event-add/index.jsx
+++ b/src/shared/containers/timeline-wall/modal-event-add/index.jsx
@@ -3,6 +3,7 @@ import PT from 'prop-types';
 import { Modal } from 'topcoder-react-ui-kit';
 import IconCloseGreen from 'assets/images/icon-close-green.svg';
 import LoadingIndicator from 'components/LoadingIndicator';
+import cn from 'classnames';
 
 import style from './styles.scss';
 
@@ -17,14 +18,17 @@ function ModalEventAdd({
       onCancel={onClose}
     >
       <div styleName="header">
-        <span styleName="text-title">Confirmation</span>
+        <span styleName="text-title">{uploadResult ? 'Error' : 'Confirmation'}</span>
         <button styleName="btn-close" onClick={onClose} type="button"><IconCloseGreen /></button>
       </div>
       {
         uploading ? (
           <LoadingIndicator />
         ) : (
-          <span styleName="text-description">
+          <span styleName={cn('text-description', {
+            error: !!uploadResult,
+          })}
+          >
             {
               uploadResult || successMessage
             }
diff --git a/src/shared/containers/timeline-wall/modal-event-add/styles.scss b/src/shared/containers/timeline-wall/modal-event-add/styles.scss
index 58b03c1cc9..7aed3cb770 100644
--- a/src/shared/containers/timeline-wall/modal-event-add/styles.scss
+++ b/src/shared/containers/timeline-wall/modal-event-add/styles.scss
@@ -44,6 +44,10 @@
   strong {
     @include roboto-bold;
   }
+
+  &.error {
+    color: #ef476f;
+  }
 }
 
 .separator {