update icon styling

Author: raclim

client/common/icons.jsx

@@ -35,20 +35,20 @@ import Copy from '../images/copy.svg';
 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/images/cross.svg

@@ -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/Banner.jsx

@@ -8,11 +8,11 @@
 
   a {
     color: $black;
-  }
 
-  a:hover {
-    color: $black;
-    text-decoration: underline;
+    &:hover {
+      color: $black;
+      text-decoration: underline;
+    }
   }
 
   @media (max-width: 770px) {
@@ -28,4 +28,5 @@
   height: 20px;
   width:20px;
   float: right;
+  cursor: pointer;
 }