Welcome banner fixes

Author: luizrrodrigues

Diff for: src/components/Banner/index.jsx

@@ -15,7 +15,7 @@ const Banner = () => {
         {header}
 
         <span
-          styleName={`chevron ${isExpanded ? "up" : "down"}`}
+          styleName={`chevron ${isExpanded ? "" : "expanded"}`}
           role="button"
           tabIndex="0"
           onClick={() => setIsExpanded(!isExpanded)}
@@ -26,30 +26,26 @@ const Banner = () => {
 
       {isExpanded && (
         <div styleName="content">
-          <h3>
+          <p>
             Welcome to the Beta version of the new Challenge Listings. During
             this Beta phase, we will be fine-tuning the platform based on
             feedback we receive from you, our community members.
-          </h3>
-          <br />
+          </p>
           <h3>NOTE THAT THIS IS NOT THE FINAL VERSION OF THE SITE.</h3>
-          <br />
-          <h3>
+          <p>
             You may encounter occasional broken links or error messages. If so,
             please let us know! This is what the Beta phase is intended for, and
             your feedback will enable us to greatly improve the new site.{" "}
-          </h3>
-          <br />
-          <h3>
+          </p>
+          <p>
             You can click on the Feedback button on page or file a github ticket
             at{" "}
             <a href="http://https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new">
               https://github.com/topcoder-platform/micro-frontends-earn-app/issues/new
             </a>
             .
-          </h3>
-          <br />
-          <h3>Thank you!</h3>
+          </p>
+          <p>Thank you!</p>
         </div>
       )}
     </div>

Diff for: src/components/Banner/styles.scss

@@ -12,7 +12,7 @@
   border-radius: 10px;
   margin-bottom: 22px;
   color: $white;
-  padding-left: 54px;
+  padding-left: 28px;
 
   .header {
     display: flex;
@@ -30,10 +30,7 @@
     margin-right: 20px;
     margin-top: 5px;
 
-    &.up {
-    }
-
-    &.down {
+    &.expanded {
       transform: rotate(180deg);
     }
 
@@ -47,12 +44,22 @@
     flex-direction: column;
     justify-content: flex-start;
     font-size: 16px;
-    margin-top: 24px;
-    margin-bottom: 12px;
-    width: 80%;
+    margin-bottom: 24px;
+    width: 85%;
+
+    h3 {
+      font-size: 15px;
+      font-weight: bold;
+      margin-top: 15px;
+    }
+
+    p {
+      margin-top: 15px;
+    }
 
     a {
       text-decoration: underline;
     }
+
   }
 }