Banner fixes

client/common/icons.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { prop } from '../theme';
 import SortArrowUp from '../images/sort-arrow-up.svg';
 import SortArrowDown from '../images/sort-arrow-down.svg';
 import Github from '../images/github.svg';
@@ -35,20 +35,20 @@
 function withLabel(SvgComponent) {
   const StyledIcon = styled(SvgComponent)`
     &&& {
-      color: ${prop('Icon.default')};
+      color: ${(props) => props.Icon?.default};
       & g,
       & path,
       & polygon {
         opacity: 1;
-        fill: ${prop('Icon.default')};
+        fill: ${(props) => props.Icon?.default};
       }
       &:hover {
-        color: ${prop('Icon.hover')};
+        color: ${(props) => props.Icon?.hover};
         & g,
         & path,
         & polygon {
           opacity: 1;
-          fill: ${prop('Icon.hover')};
+          fill: ${(props) => props.Icon?.hover};
         }
       }
     }

client/modules/IDE/components/Banner.jsx

@@ -26,8 +26,8 @@ const Banner = ({ onClose }) => {
   const bannerURL = 'https://openprocessing.org/curation/89576';
   const bannerCopy = (
     <>
-      We’re accepting p5.js sketches for a special curation exploring the new
-      features in p5.js 2.0!{' '}
+      We’re accepting p5.js sketches for a special curation exploring mental
+      health and the newest features in p5.js 2.0!{' '}
       <span style={{ fontWeight: 600 }}>Submit by July 13!</span>
     </>
   );
@@ -36,7 +36,7 @@ const Banner = ({ onClose }) => {
     <div className="banner">
       <a href={bannerURL}>{bannerCopy}</a>
       <button className="banner-close-button" onClick={onClose}>
-        <CrossIcon />
+        <CrossIcon Icon={{ default: '#000', hover: '#333' }} />
       </button>
     </div>
   );

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -335,7 +335,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
               focusable="false"
             />
           </button>
@@ -351,7 +351,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
             focusable="false"
           />
         </button>
@@ -930,7 +930,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
               focusable="false"
             />
           </button>
@@ -946,7 +946,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
             focusable="false"
           />
         </button>

client/styles/components/_banner.scss

@@ -7,11 +7,12 @@
   border-bottom: 1px solid #000;
 
   a {
-    color: #000;
-  }
+    color: $black;
 
-  a:hover {
-    text-decoration: underline;
+    &:hover {
+      color: $black;
+      text-decoration: underline;
+    }
   }
 
   @media (max-width: 770px) {
@@ -27,4 +28,5 @@
   height: 20px;
   width:20px;
   float: right;
+  cursor: pointer;
 }