chore: additional theming implementation

src/components/Icon/Icon.js

@@ -1,6 +1,15 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { Book, Calendar, Circle, User } from "react-feather";
+import {
+  Book,
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  Moon,
+  User
+} from "react-feather";
+import { withTheme } from "emotion-theming";
 
 const IconBase = styled.div`
   display: flex;
@@ -10,18 +19,23 @@ const IconBase = styled.div`
   border-radius: 12px;
   padding: 5px;
   transition: 0.1s all ease-in-out;
+  color: ${props => props.theme.colors.secondary};
   &:hover {
-    background-color: yellow;
+    background-color: ${props => props.theme.colors.hover};
+    cursor: pointer;
   }
 `;
 
-const Icon = ({ name }) => (
-  <IconBase>
+const Icon = ({ name, ...rest }) => (
+  <IconBase {...rest}>
     {name === "Book" && <Book />}
     {name === "Calendar" && <Calendar />}
+    {name === "ChevronLeft" && <ChevronLeft />}
+    {name === "ChevronRight" && <ChevronRight />}
     {name === "Circle" && <Circle />}
+    {name === "Moon" && <Moon />}
     {name === "User" && <User />}
   </IconBase>
 );
 
-export default Icon;
+export default withTheme(Icon);