Add theming to common/icons

Author: catarak

client/common/Icons.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize, 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';
 import Google from '../images/google.svg';
 import Plus from '../images/plus-icon.svg';
 import Close from '../images/close.svg';
+import Exit from '../images/exit.svg';
 import DropdownArrow from '../images/down-filled-triangle.svg';
 
 // HOC that adds the right web accessibility props
@@ -15,16 +18,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
   const Icon = (props) => {
+    const StyledIcon = styled(SvgComponent)`
+      &&& {
+        color: ${prop('Icon.default')};
+        & g, & path, & polygon {
+          opacity: 1;
+          fill: ${prop('Icon.default')};
+        }
+        &:hover {
+          color: ${prop('Icon.hover')};
+          & g, & path, & polygon {
+            opacity: 1;
+            fill: ${prop('Icon.hover')};
+          }
+        }
+      }
+    `;
+
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
-      return (<SvgComponent
+      return (<StyledIcon
         {...props}
         aria-label={ariaLabel}
         role="img"
         focusable="false"
       />);
     }
-    return (<SvgComponent
+    return (<StyledIcon
       {...props}
       aria-hidden
       focusable="false"
@@ -48,4 +68,5 @@ export const GithubIcon = withLabel(Github);
 export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
+export const ExitIcon = withLabel(Exit);
 export const DropdownArrowIcon = withLabel(DropdownArrow);

client/common/icons.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { remSize, 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';
 import Google from '../images/google.svg';
 import Plus from '../images/plus-icon.svg';
 import Close from '../images/close.svg';
+import Exit from '../images/exit.svg';
 import DropdownArrow from '../images/down-filled-triangle.svg';
 
 // HOC that adds the right web accessibility props
@@ -15,16 +18,33 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
   const Icon = (props) => {
+    const StyledIcon = styled(SvgComponent)`
+      &&& {
+        color: ${prop('Icon.default')};
+        & g, & path, & polygon {
+          opacity: 1;
+          fill: ${prop('Icon.default')};
+        }
+        &:hover {
+          color: ${prop('Icon.hover')};
+          & g, & path, & polygon {
+            opacity: 1;
+            fill: ${prop('Icon.hover')};
+          }
+        }
+      }
+    `;
+
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
-      return (<SvgComponent
+      return (<StyledIcon
         {...props}
         aria-label={ariaLabel}
         role="img"
         focusable="false"
       />);
     }
-    return (<SvgComponent
+    return (<StyledIcon
       {...props}
       aria-hidden
       focusable="false"
@@ -48,4 +68,5 @@ export const GithubIcon = withLabel(Github);
 export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
+export const ExitIcon = withLabel(Exit);
 export const DropdownArrowIcon = withLabel(DropdownArrow);

client/modules/IDE/pages/IDEViewMobile.jsx

@@ -21,7 +21,7 @@ import { getHTMLFile } from '../reducers/files';
 // Local Imports
 import Editor from '../components/Editor';
 import { prop, remSize } from '../../../theme';
-import { CloseIcon } from '../../../common/Icons';
+import { ExitIcon } from '../../../common/icons';
 
 const background = prop('Button.default.background');
 const textColor = prop('primaryTextColor');
@@ -98,7 +98,7 @@ const IDEViewMobile = (props) => {
     <Screen>
       <Header>
         <IconLinkWrapper to="/" aria-label="Return to original editor">
-          <CloseIcon viewBox="20 21 60 60" />
+          <ExitIcon />
         </IconLinkWrapper>
         <div>
           <h2>{project.name}</h2>

client/theme.js

@@ -85,6 +85,10 @@ export default {
         border: grays.middleLight,
       },
     },
+    Icon: {
+      default: grays.middleGray,
+      hover: grays.darker
+    }
   },
   [Theme.dark]: {
     colors,
@@ -113,6 +117,10 @@ export default {
         border: grays.middleDark,
       },
     },
+    Icon: {
+      default: grays.middleLight,
+      hover: grays.lightest
+    }
   },
   [Theme.contrast]: {
     colors,
@@ -141,5 +149,9 @@ export default {
         border: grays.middleDark,
       },
     },
+    Icon: {
+      default: grays.mediumLight,
+      hover: colors.yellow
+    }
   },
 };