From 502c8bba676f6804321f99aab03774463edd78c9 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Thu, 25 Jan 2018 09:59:28 +0100
Subject: [PATCH] Integrate font-awesome. Use it in SideBar.

---
 src/components/SideBar/Item.js  | 12 +++---------
 src/components/SideBar/index.js | 16 ++++++++++++----
 src/components/base/Icon.js     | 16 ++++++++++++++++
 src/renderer/head.js            |  8 ++++++++
 src/renderer/index.js           |  1 +
 5 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 src/components/base/Icon.js
 create mode 100644 src/renderer/head.js

diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index 46407f99..6e21a70c 100644
--- a/src/components/SideBar/Item.js
+++ b/src/components/SideBar/Item.js
@@ -15,6 +15,7 @@ import type { Location } from 'react-router'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
+import Icon from 'components/base/Icon'
 
 const mapStateToProps: MapStateToProps<*, *, *> = (state, { modal }: any) => ({
   // connect router here only to make components re-render
@@ -33,6 +34,7 @@ const Container = styled(Box).attrs({
   align: 'center',
   color: 'lead',
   p: 2,
+  flow: 2,
 })`
   cursor: pointer;
   color: ${p => (p.isActive ? p.theme.colors.white : '')};
@@ -46,12 +48,6 @@ const Container = styled(Box).attrs({
   }
 `
 
-const IconWrapper = styled(Box)`
-  width: 25px;
-  height: 25px;
-  border: 2px solid ${p => (p.isActive ? p.theme.colors.blue : 'rgba(255, 255, 255, 0.1)')};
-`
-
 type Props = {
   children: string,
   linkTo?: string | null,
@@ -86,9 +82,7 @@ function Item({
       }
       isActive={isActive}
     >
-      <IconWrapper isActive={isActive} mr={2}>
-        {icon || null}
-      </IconWrapper>
+      {icon && <Icon fontSize={3} color={isActive ? 'blue' : void 0} name={icon} />}
       <div>
         <Text fontWeight="bold" fontSize={1}>
           {children}
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index df8e832b..e4f9fe4f 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -67,10 +67,18 @@ class SideBar extends PureComponent<Props> {
           <Box flow={2}>
             <CapsSubtitle>{'Menu'}</CapsSubtitle>
             <div>
-              <Item linkTo="/">{'Dashboard'}</Item>
-              <Item modal="send">{'Send'}</Item>
-              <Item modal="receive">{'Receive'}</Item>
-              <Item linkTo="/settings">{'Settings'}</Item>
+              <Item icon="bar-chart" linkTo="/">
+                {'Dashboard'}
+              </Item>
+              <Item icon="upload" modal="send">
+                {'Send'}
+              </Item>
+              <Item icon="download" modal="receive">
+                {'Receive'}
+              </Item>
+              <Item icon="cog" linkTo="/settings">
+                {'Settings'}
+              </Item>
             </div>
           </Box>
           <Box flow={2}>
diff --git a/src/components/base/Icon.js b/src/components/base/Icon.js
new file mode 100644
index 00000000..d3e4606f
--- /dev/null
+++ b/src/components/base/Icon.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+import { fontSize, color } from 'styled-system'
+
+const Container = styled.div`
+  ${fontSize};
+  ${color};
+`
+
+export default ({ name, ...props }: { name: string }) => (
+  <Container {...props}>
+    <i className={`fa fa-${name}`} />
+  </Container>
+)
diff --git a/src/renderer/head.js b/src/renderer/head.js
new file mode 100644
index 00000000..f1ff7bf7
--- /dev/null
+++ b/src/renderer/head.js
@@ -0,0 +1,8 @@
+const list = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css']
+
+list.forEach(href => {
+  const tag = document.createElement('link')
+  tag.setAttribute('rel', 'stylesheet')
+  tag.setAttribute('href', href)
+  document.head.appendChild(tag)
+})
diff --git a/src/renderer/index.js b/src/renderer/index.js
index eb26a1a0..20da31e8 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -17,6 +17,7 @@ import { getLanguage } from 'reducers/settings'
 import App from 'components/App'
 
 import 'styles/global'
+import 'renderer/head'
 
 if (__PROD__ && __SENTRY_URL__) {
   Raven.config(__SENTRY_URL__, { allowSecretKey: true }).install()