lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Change Sidebar CSS

master
Loëck Vézien 7 years ago
parent
10453aab59
commit
eb6bad3b2f
No known key found for this signature in database GPG Key ID: CBCDCE384E853AC4
10 changed files with 142 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .babelrc
  2. 1
      package.json
  3. 2
      src/components/GlobalSearch.js
  4. 34
      src/components/SideBar/Item.js
  5. 26
      src/components/SideBar/index.js
  6. 29
      src/components/base/Box/index.js
  7. 4
      src/styles/global.js
  8. 16
      src/styles/styled/fontFamily.js
  9. 55
      src/styles/theme.js
  10. 24
      yarn.lock

2
.babelrc
View File

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

1
package.json
View File

@ -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",

2
src/components/GlobalSearch.js
View File

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

34
src/components/SideBar/Item.js
View File

@ -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 (
<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} />}
<div>
<Text fontSize={1} fontWeight="bold">
{children}
</Text>
{icon && <Icon fontSize={5} color={isActive ? 'blue' : void 0} name={icon} />}
<Box justify="center">
<Text fontSize={4}>{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,
}

26
src/components/SideBar/index.js
View File

@ -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<Props> {
return (
<Container bg="white">
<Box flow={3} pt={4} grow>
<Box flow={2}>
<Box flow={7} pt={8} grow>
<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={2} grow>
<Box flow={4} grow pt={1}>
<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>

29
src/components/base/Box/index.js
View File

@ -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` : '')};
}
`

4
src/styles/global.js
View File

@ -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',
},

16
src/styles/styled/fontFamily.js
View File

@ -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,
}
}

55
src/styles/theme.js
View File

@ -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',
},
}

24
yarn.lock
View File

@ -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"

Write Preview
Loading…
Cancel
Save