From d1ee55d57f25bb18516f39288556bdfff046da78 Mon Sep 17 00:00:00 2001
From: julianajlk <jkang@edx.org>
Date: Thu, 30 Apr 2020 11:01:46 -0400
Subject: [PATCH] Add alert banner to Contact Us Page with Covid-19 message
 (#23825)

PROD-1480
---
 .../support/jsx/single_support_form.jsx       | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/lms/djangoapps/support/static/support/jsx/single_support_form.jsx b/lms/djangoapps/support/static/support/jsx/single_support_form.jsx
index 2d71e377fe..ad36870ca2 100644
--- a/lms/djangoapps/support/static/support/jsx/single_support_form.jsx
+++ b/lms/djangoapps/support/static/support/jsx/single_support_form.jsx
@@ -5,7 +5,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { StatusAlert } from '@edx/paragon';
 
 import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
 
@@ -150,23 +149,10 @@ class RenderForm extends React.Component {
     return (
       <div className="contact-us-wrapper">
 
-        <StatusAlert
-          alertType="info"
-          open
-          dialog={(
-            <div>
-              <span>Due to the recent increase in interest in online education and edX, we are currently experiencing an unusually high volume of support requests. We appreciate your patience as we work to review each request. Please check the </span>
-              <a
-                href="https://support.edx.org/hc/en-us"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Help Center
-              </a>
-              <span> as many questions may have already been answered.</span>
-            </div>
-          )}
-        />
+         {/* Note: not using Paragon bc component shows in the DOM but not rendered, even when using version 2.6.4. */}
+        <div className="alert alert-warning" role="alert" style={{ marginBottom: '1rem', padding: '1.5rem', left: '0px', fontSize: '16px', backgroundColor: '#fffaed', color: '#171C29', border: '1px solid #FFD875', borderRadius: '0.3rem' }}>
+          <div>{gettext('Due to the recent increase in interest in online education and edX, we are currently experiencing an unusually high volume of support requests. We appreciate your patience as we work to review each request. Please check the ')}<a href="https://support.edx.org/hc/en-us" className="alert-link">Help Center</a>{gettext(' as many questions may have already been answered.')}</div>
+        </div>
 
         <div className="row">
           <div className="col-sm-12">