Fix clickable area and typo

Author: luizrrodrigues

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

@@ -9,23 +9,33 @@ const Banner = () => {
   const [isDisplayed, setIsDisplayed] = useState(true);
 
   return isDisplayed && (
-    <div styleName="banner">
+    <a
+      href={`${config.PLATFORM_SITE_URL}/earn/find/challenges`}
+      target="_blank"
+      rel="noopener noreferrer"
+      styleName="banner"
+    >
       <div styleName="content">
         <div styleName="banner-info">
           <BannerInfoIcon />
         </div>
-        <span>Click <a href={`${config.PLATFORM_SITE_URL}/earn/find/challenges`} target="_blank" rel="noopener noreferrer">here</a> if you&quot;d like to visit the new BETA Challenge Listings site.</span>
+        <span>
+          Click here if you&apos;d like to visit the new Beta Challenge Listings site
+        </span>
       </div>
 
       <div
         styleName="banner-close"
-        onClick={() => setIsDisplayed(false)}
+        onClick={(e) => {
+          e.preventDefault();
+          setIsDisplayed(false);
+        }}
         aria-hidden="true"
         role="button"
       >
         <BannerCloseIcon />
       </div>
-    </div>
+    </a>
   );
 };
 

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

@@ -25,6 +25,7 @@
     justify-content: space-between;
     flex-direction: row;
     align-items: center;
+    color: #fff;
 
     .banner-info {
       width: 24px;