From eb6bad3b2f1f8057ad797b27d13965f56990f7f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= Date: Mon, 12 Feb 2018 15:07:29 +0100 Subject: [PATCH] Change Sidebar CSS --- .babelrc | 2 +- package.json | 1 + src/components/GlobalSearch.js | 2 +- src/components/SideBar/Item.js | 34 ++++++++++---------- src/components/SideBar/index.js | 26 +++++++-------- src/components/base/Box/index.js | 29 ++++++++--------- src/styles/global.js | 4 +-- src/styles/styled/fontFamily.js | 16 ++++++++++ src/styles/theme.js | 55 +++++++++++++++++++++++++++++++- yarn.lock | 24 +++++++++++++- 10 files changed, 142 insertions(+), 51 deletions(-) create mode 100644 src/styles/styled/fontFamily.js diff --git a/.babelrc b/.babelrc index 487714b6..730f18c9 100644 --- a/.babelrc +++ b/.babelrc @@ -15,5 +15,5 @@ "react", "stage-0" ], - "plugins": [["module-resolver", { "root": ["src"] }], "recharts"] + "plugins": [["module-resolver", { "root": ["src"] }], "recharts", "styled-components"] } diff --git a/package.json b/package.json index f50b7fe6..9c97d946 100644 --- a/package.json +++ b/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", diff --git a/src/components/GlobalSearch.js b/src/components/GlobalSearch.js index 361c5d4b..cadda611 100644 --- a/src/components/GlobalSearch.js +++ b/src/components/GlobalSearch.js @@ -17,7 +17,7 @@ const Input = styled.input` } ` -class GlobalSearch extends PureComponent { +class GlobalSearch extends PureComponent<{}> { _input = null focusInput = () => { diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js index 3dd5d262..9ab932e8 100644 --- a/src/components/SideBar/Item.js +++ b/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, - py: 1, + px: 3, })` - border-radius: 5px; cursor: pointer; - color: ${p => (p.isActive ? p.theme.colors.shark : p.theme.colors.grey)}; - background: ${p => (p.isActive ? p.theme.colors.argile : '')}; - height: 46px; + color: ${p => p.theme.colors.dark}; + opacity: ${p => (p.isActive ? 1 : 0.4)}; + 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 ( push(linkTo) @@ -70,24 +73,23 @@ function Item({ children, desc, icon, linkTo, push, location, modal, openModal } } isActive={isActive} > - {icon && } -
- - {children} - + {icon && } + + {children} {desc && ( - + {desc} )} -
+ ) } Item.defaultProps = { - icon: null, + big: false, desc: null, + icon: null, linkTo: null, modal: null, } diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index 7e68309e..8eeb3398 100644 --- a/src/components/SideBar/index.js +++ b/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, - fontSize: 0, - color: 'grey', + color: 'dark', + ff: 'Museo Sans|ExtraBold', + 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 { return ( - - + + {t('sidebar.menu')} - + {t('dashboard.title')} @@ -102,21 +102,21 @@ class SideBar extends PureComponent { - - + {t('sidebar.accounts')} openModal(MODAL_ADD_ACCOUNT)}> - + {accounts.map(account => ( {account.name} diff --git a/src/components/base/Box/index.js b/src/components/base/Box/index.js index 2a3601ff..1aa4cb48 100644 --- a/src/components/base/Box/index.js +++ b/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 { space as spaceScale } from 'styles/theme' +import fontFamily from 'styles/styled/fontFamily' -function getSpace(n) { - return `${spaceScale[n] || n}px` -} +import Text from 'components/base/Text' 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-left: ${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 ? `${p.theme.space[p.flow]}px` : '')}; } ` diff --git a/src/styles/global.js b/src/styles/global.js index e32dc187..c2ee932d 100644 --- a/src/styles/global.js +++ b/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', }, diff --git a/src/styles/styled/fontFamily.js b/src/styles/styled/fontFamily.js new file mode 100644 index 00000000..1533fc91 --- /dev/null +++ b/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, + } +} diff --git a/src/styles/theme.js b/src/styles/theme.js index 4ce5795d..bc3df347 100644 --- a/src/styles/theme.js +++ b/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', }, } diff --git a/yarn.lock b/yarn.lock index 44da1b65..a136fc74 100644 --- a/yarn.lock +++ b/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"