Change Sidebar CSS

.babelrc

@@ -15,5 +15,5 @@
     "react",
     "stage-0"
   ],
-  "plugins": [["module-resolver", { "root": ["src"] }], "recharts"]
+  "plugins": [["module-resolver", { "root": ["src"] }], "recharts", "styled-components"]
 }

package.json

@@ -105,6 +105,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-module-resolver": "^3.0.0",
     "babel-plugin-recharts": "^1.1.1",
+    "babel-plugin-styled-components": "^1.5.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",

src/components/GlobalSearch.js

@@ -17,7 +17,7 @@ const Input = styled.input`
   }
 `
 
-class GlobalSearch extends PureComponent {
+class GlobalSearch extends PureComponent<{}> {
   _input = null
 
   focusInput = () => {

src/components/SideBar/Item.js

@@ -29,16 +29,17 @@ const mapDispatchToProps = {
 
 const Container = styled(Tabbable).attrs({
   align: 'center',
-  flow: 2,
+  borderRadius: 1,
+  ff: 'Open Sans|SemiBold',
+  flow: 3,
   horizontal: true,
-  px: 2,
+  px: 3,
-  py: 1,
 })`
-  border-radius: 5px;
   cursor: pointer;
-  color: ${p => (p.isActive ? p.theme.colors.shark : p.theme.colors.grey)};
+  color: ${p => p.theme.colors.dark};
-  background: ${p => (p.isActive ? p.theme.colors.argile : '')};
+  opacity: ${p => (p.isActive ? 1 : 0.4)};
-  height: 46px;
+  background: ${p => (p.isActive ? p.theme.colors.paleGrey : '')};
+  height: ${p => (p.big ? 50 : 36)}px;
   outline: none;
 
   &:hover,
@@ -53,16 +54,18 @@ type Props = {
   modal?: string | null,
   desc?: string | null,
   icon?: string | null,
+  big?: boolean,
   location: Location,
   push: Function,
   openModal: Function,
 }
 
-function Item({ children, desc, icon, linkTo, push, location, modal, openModal }: Props) {
+function Item({ big, children, desc, icon, linkTo, push, location, modal, openModal }: Props) {
   const { pathname } = location
   const isActive = pathname === linkTo
   return (
     <Container
+      big={big}
       onClick={
         linkTo
           ? isActive ? undefined : () => push(linkTo)
@@ -70,24 +73,23 @@ function Item({ children, desc, icon, linkTo, push, location, modal, openModal }
       }
       isActive={isActive}
     >
-      {icon && <Icon fontSize={2} color={isActive ? 'blue' : void 0} name={icon} />}
+      {icon && <Icon fontSize={5} color={isActive ? 'blue' : void 0} name={icon} />}
-      <div>
+      <Box justify="center">
-        <Text fontSize={1} fontWeight="bold">
+        <Text fontSize={4}>{children}</Text>
-          {children}
-        </Text>
         {desc && (
-          <Box color="steel" fontSize={0}>
+          <Box color="steel" fontSize={3}>
             {desc}
           </Box>
         )}
-      </div>
+      </Box>
     </Container>
   )
 }
 
 Item.defaultProps = {
-  icon: null,
+  big: false,
   desc: null,
+  icon: null,
   linkTo: null,
   modal: null,
 }

src/components/SideBar/index.js

@@ -18,20 +18,20 @@ import { getVisibleAccounts } from 'reducers/accounts'
 import { formatBTC } from 'helpers/format'
 
 import Box, { Tabbable } from 'components/base/Box'
-import Bar from 'components/base/Bar'
 import GrowScroll from 'components/base/GrowScroll'
 import Icon from 'components/base/Icon'
 import Text from 'components/base/Text'
 import Item from './Item'
 
 const CapsSubtitle = styled(Box).attrs({
-  px: 3,
+  color: 'dark',
-  fontSize: 0,
+  ff: 'Museo Sans|ExtraBold',
-  color: 'grey',
+  fontSize: 1,
+  px: 4,
 })`
   cursor: default;
+  letter-spacing: 2px;
   text-transform: uppercase;
-  font-weight: bold;
 `
 
 const Container = styled(Box)`
@@ -84,10 +84,10 @@ class SideBar extends PureComponent<Props> {
 
     return (
       <Container bg="white">
-        <Box flow={3} pt={4} grow>
+        <Box flow={7} pt={8} grow>
-          <Box flow={2}>
+          <Box flow={4}>
             <CapsSubtitle>{t('sidebar.menu')}</CapsSubtitle>
-            <Box px={2} flow={1}>
+            <Box px={4} flow={2}>
               <Item icon="chart-bar" linkTo="/">
                 {t('dashboard.title')}
               </Item>
@@ -102,21 +102,21 @@ class SideBar extends PureComponent<Props> {
               </Item>
             </Box>
           </Box>
-          <Bar color="cream" mx={3} size={2} />
+          <Box flow={4} grow pt={1}>
-          <Box flow={2} grow>
             <CapsSubtitle horizontal align="center">
               <Box grow>{t('sidebar.accounts')}</Box>
               <PlusBtn onClick={() => openModal(MODAL_ADD_ACCOUNT)}>
                 <Icon name="plus-circle" />
               </PlusBtn>
             </CapsSubtitle>
-            <GrowScroll pb={2} px={2} flow={1}>
+            <GrowScroll pb={4} px={4} flow={2}>
               {accounts.map(account => (
                 <Item
-                  linkTo={`/account/${account.id}`}
+                  big
                   desc={formatBTC(account.data ? account.data.balance : 0)}
-                  key={account.id}
                   icon={{ iconName: 'btc', prefix: 'fab' }}
+                  key={account.id}
+                  linkTo={`/account/${account.id}`}
                 >
                   {account.name}
                 </Item>

src/components/base/Box/index.js

@@ -5,33 +5,30 @@ import styled from 'styled-components'
 import {
   alignItems,
   borderColor,
+  borderRadius,
   borderWidth,
   color,
+  flex,
   fontSize,
-  fontWeight,
   justifyContent,
   space,
-  flex,
 } from 'styled-system'
 
-import Text from 'components/base/Text'
+import fontFamily from 'styles/styled/fontFamily'
-
-import { space as spaceScale } from 'styles/theme'
 
-function getSpace(n) {
+import Text from 'components/base/Text'
-  return `${spaceScale[n] || n}px`
-}
 
 const Box = styled.div`
-  ${space};
-  ${flex};
-  ${fontSize};
-  ${fontWeight};
-  ${color};
   ${alignItems};
-  ${justifyContent};
   ${borderColor};
+  ${borderRadius};
   ${borderWidth};
+  ${color};
+  ${flex};
+  ${fontFamily};
+  ${fontSize};
+  ${justifyContent};
+  ${space};
 
   display: flex;
   flex-shrink: ${p => (p.noShrink === true ? '0' : p.shrink === true ? '1' : '')};
@@ -51,8 +48,8 @@ const Box = styled.div`
     `};
 
   > * + * {
-    margin-top: ${p => (!p.horizontal && p.flow ? getSpace(p.flow) : '')};
+    margin-top: ${p => (!p.horizontal && p.flow ? `${p.theme.space[p.flow]}px` : '')};
-    margin-left: ${p => (p.horizontal && p.flow ? getSpace(p.flow) : '')};
+    margin-left: ${p => (p.horizontal && p.flow ? `${p.theme.space[p.flow]}px` : '')};
   }
 `
 

src/styles/global.js

@@ -55,12 +55,12 @@ const fonts = {
       file: 'museosans/MuseoSans-Regular',
     },
     {
-      style: 'bold',
+      style: 'normal',
       weight: 700,
       file: 'museosans/MuseoSans-Bold',
     },
     {
-      style: 'bold',
+      style: 'normal',
       weight: 900,
       file: 'museosans/MuseoSans-ExtraBold',
     },

src/styles/styled/fontFamily.js

@@ -0,0 +1,16 @@
+export default props => {
+  const prop = props.ff
+
+  if (!prop) {
+    return null
+  }
+
+  const [font, type = 'Regular'] = prop.split('|')
+  const { style, weight } = props.theme.fontFamilies[font][type]
+
+  return {
+    fontFamily: font,
+    fontWeight: weight,
+    fontStyle: style,
+  }
+}

src/styles/theme.js

@@ -2,13 +2,64 @@
 
 export const space = [0, 5, 10, 15, 20, 30, 40, 50, 70]
 export const fontSizes = [8, 9, 10, 11, 13, 16, 18, 32]
+export const radii = [0, 4]
+
+export const fontFamilies = {
+  'Open Sans': {
+    Light: {
+      weight: 300,
+      style: 'normal',
+    },
+    Regular: {
+      weight: 400,
+      style: 'normal',
+    },
+    SemiBold: {
+      weight: 600,
+      style: 'normal',
+    },
+    Bold: {
+      weight: 700,
+      style: 'normal',
+    },
+    ExtraBold: {
+      weight: 800,
+      style: 'normal',
+    },
+  },
+
+  'Museo Sans': {
+    ExtraLight: {
+      weight: 100,
+      style: 'normal',
+    },
+    Light: {
+      weight: 300,
+      style: 'normal',
+    },
+    Regular: {
+      weight: 500,
+      style: 'normal',
+    },
+    Bold: {
+      weight: 700,
+      style: 'normal',
+    },
+    ExtraBold: {
+      weight: 900,
+      style: 'normal',
+    },
+  },
+}
 
 export default {
   sizes: {
     sideBarWidth: 230,
   },
-  space,
+  radii,
+  fontFamilies,
   fontSizes,
+  space,
   colors: {
     transparent: 'transparent',
 
@@ -29,7 +80,9 @@ export default {
     shark: '#666666',
     steel: '#767676',
 
+    dark: '#1d2028',
     dodgerBlue: '#4b84ff',
+    paleGrey: '#f7f8fa',
     warmGrey: '#999999',
   },
 }

yarn.lock

@@ -38,6 +38,12 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/helper-annotate-as-pure@^7.0.0-beta.37":
+  version "7.0.0-beta.39"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.39.tgz#cf9506c721c838806ca5eabe15783507ba2edce0"
+  dependencies:
+    "@babel/types" "7.0.0-beta.39"
+
 "@babel/helper-function-name@7.0.0-beta.36":
   version "7.0.0-beta.36"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d"
@@ -97,6 +103,14 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@7.0.0-beta.39":
+  version "7.0.0-beta.39"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.39.tgz#2ea0d97efe4781688751edc68cde640d6559938c"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@fortawesome/fontawesome-common-types@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.2.tgz#d6aa075058f0c984d6e2ebcbc0052c1f7f9bea72"
@@ -1124,6 +1138,14 @@ babel-plugin-recharts@^1.1.1:
     babel-types "^6.19.0"
     babylon "^6.14.1"
 
+babel-plugin-styled-components@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.0.tgz#4549f28a19fb05170aa9ee429b4de0eac2d2401d"
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0-beta.37"
+    babel-types "^6.26.0"
+    stylis "^3.0.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -8827,7 +8849,7 @@ stylis-rule-sheet@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
 
-stylis@^3.4.0:
+stylis@^3.0.0, stylis@^3.4.0:
   version "3.4.8"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"