Merge pull request #5471 from topcoder-platform/outage-banner

Outage banner

Author: luizrrodrigues

__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap

@@ -8,6 +8,14 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
   <Connect(Container)
     setFilterState={[MockFunction]}
   />
+  <div
+    className="src-shared-components-challenge-listing-___style__outage-banner___JSVnq"
+  >
+    <strong>
+      Heads up!
+    </strong>
+     We will be doing testing work on our Community Platform on April 12, 2021 between 7:30-9:30 UTC-4. We will do our best to ensure a smooth experience for our users but please be aware there may be unforeseen issues during that time. Thank you!
+  </div>
   <div
     className="src-shared-components-challenge-listing-___style__tc-content-wrapper___1MqlF"
   >
@@ -64,6 +72,14 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
   <Connect(Container)
     setFilterState={[MockFunction]}
   />
+  <div
+    className="src-shared-components-challenge-listing-___style__outage-banner___JSVnq"
+  >
+    <strong>
+      Heads up!
+    </strong>
+     We will be doing testing work on our Community Platform on April 12, 2021 between 7:30-9:30 UTC-4. We will do our best to ensure a smooth experience for our users but please be aware there may be unforeseen issues during that time. Thank you!
+  </div>
   <div
     className="src-shared-components-challenge-listing-___style__tc-content-wrapper___1MqlF"
   >

src/shared/components/challenge-listing/index.jsx

@@ -167,6 +167,13 @@ export default function ChallengeListing(props) {
           )
       }
 
+      <div styleName="outage-banner">
+        <strong>Heads up!</strong> We will be doing testing work on our Community Platform on
+        April 12, 2021 between 7:30-9:30 UTC-4. We will do our best to ensure a smooth experience
+        for our users but please be aware there may be unforeseen issues during that time.
+        Thank you!
+      </div>
+
       <div styleName="tc-content-wrapper">
         <div styleName={desktop ? 'sidebar-container-desktop' : 'sidebar-container-mobile'}>
           <Sidebar

src/shared/components/challenge-listing/style.scss

@@ -132,3 +132,21 @@ $challenge-radius-4: $corner-radius * 2;
   margin-left: 3px;
   display: inline-block;
 }
+
+.outage-banner {
+  margin: 15px 15px 0 15px;
+  padding: 10px;
+  margin-bottom: -15px;
+
+  @include roboto-regular;
+
+  font-size: 13px;
+  line-height: 20px;
+  background-color: #fdf6d5;
+
+  strong {
+    color: $tc-red;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+}

src/shared/containers/challenge-detail/index.jsx

@@ -414,6 +414,12 @@ class ChallengeDetailPageContainer extends React.Component {
 
     return (
       <div styleName="outer-container">
+        <div styleName="outage-banner">
+          <strong>Heads up!</strong> We will be doing testing work on our Community Platform on
+          April 12, 2021 between 7:30-9:30 UTC-4. We will do our best to ensure a smooth experience
+          for our users but please be aware there may be unforeseen issues during that time.
+          Thank you!
+        </div>
         <div styleName="challenge-detail-container" role="main">
           { Boolean(isEmpty) && (
             <div styleName="page">

src/shared/containers/challenge-detail/styles.scss

@@ -36,3 +36,22 @@
   text-align: center;
   width: 100%;
 }
+
+.outage-banner {
+  margin: auto;
+  max-width: 1240px;
+  padding: 4 * $base-unit;
+  width: 100%;
+
+  @include roboto-regular;
+
+  font-size: 13px;
+  line-height: 20px;
+  background-color: #fdf6d5;
+
+  strong {
+    color: $tc-red;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+}