Browse Source
- update the color palette to reflect the latest designs. - use theme agnostic color names for background colors. - remove unused colors from the color palette. - remove some unused styles.renovate/lint-staged-8.x
Tom Kirkpatrick
6 years ago
72 changed files with 294 additions and 430 deletions
@ -1,89 +0,0 @@ |
|||||
@import 'styles/variables.scss'; |
|
||||
|
|
||||
.container { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
cursor: pointer; |
|
||||
max-width: 960px; |
|
||||
margin: 0 auto; |
|
||||
height: 76px; |
|
||||
align-items: center; |
|
||||
border-bottom: 1px solid $grey; |
|
||||
font-size: 14px; |
|
||||
transition: background-color 0.1s linear; |
|
||||
transition-delay: 0.1s; |
|
||||
color: $darkestgrey; |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.icon { |
|
||||
display: block; |
|
||||
margin-right: 20px; |
|
||||
flex: none; |
|
||||
position: relative; |
|
||||
width: 36px; |
|
||||
height: 36px; |
|
||||
border: 1px solid $darkestgrey; |
|
||||
border-radius: 50%; |
|
||||
|
|
||||
svg { |
|
||||
color: $main; |
|
||||
font-size: 16px; |
|
||||
vertical-align: middle; |
|
||||
display: flex; |
|
||||
top: 0; |
|
||||
left: 50%; |
|
||||
height: 100%; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.data { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
flex: 6 0; |
|
||||
|
|
||||
.title { |
|
||||
flex: 8 0; |
|
||||
} |
|
||||
|
|
||||
.subtitle { |
|
||||
padding-left: 20px; |
|
||||
flex: 2 0; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.subtitle, |
|
||||
.date { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.date { |
|
||||
padding-left: 20px; |
|
||||
flex: 1 0; |
|
||||
} |
|
||||
|
|
||||
.amount { |
|
||||
flex: 1 0; |
|
||||
padding-left: 20px; |
|
||||
|
|
||||
&.positive { |
|
||||
color: $main; |
|
||||
} |
|
||||
|
|
||||
span { |
|
||||
display: block; |
|
||||
|
|
||||
&:nth-child(1) { |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
|
|
||||
&:nth-child(2) { |
|
||||
font-size: 10px; |
|
||||
} |
|
||||
|
|
||||
.value { |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,63 +0,0 @@ |
|||||
@import 'styles/variables.scss'; |
|
||||
|
|
||||
.container { |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.password { |
|
||||
background: transparent; |
|
||||
outline: none; |
|
||||
border: 1px solid #404040; |
|
||||
border-radius: 4px; |
|
||||
padding: 15px; |
|
||||
color: $gold; |
|
||||
-webkit-text-fill-color: $white; |
|
||||
font-size: 22px; |
|
||||
} |
|
||||
|
|
||||
.password::-webkit-input-placeholder { |
|
||||
text-shadow: none; |
|
||||
-webkit-text-fill-color: initial; |
|
||||
} |
|
||||
|
|
||||
.buttons { |
|
||||
margin-top: 15%; |
|
||||
text-align: center; |
|
||||
|
|
||||
div { |
|
||||
color: $white; |
|
||||
|
|
||||
&:nth-child(1) { |
|
||||
text-align: center; |
|
||||
margin-bottom: 40px; |
|
||||
|
|
||||
span { |
|
||||
padding: 15px 35px; |
|
||||
background: $darkspaceblue; |
|
||||
font-size: 14px; |
|
||||
opacity: 0.5; |
|
||||
transition: all 0.25s; |
|
||||
|
|
||||
&.active { |
|
||||
opacity: 1; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
&:hover { |
|
||||
background: lighten($darkspaceblue, 10%); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
&:nth-child(2), |
|
||||
&:nth-child(3) { |
|
||||
font-size: 12px; |
|
||||
cursor: pointer; |
|
||||
margin: 10px 0; |
|
||||
|
|
||||
&:hover { |
|
||||
text-decoration: underline; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,16 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import { Box } from 'rebass' |
|
||||
|
|
||||
/** |
|
||||
* @render react |
|
||||
* @name BackgroundDark |
|
||||
* @example |
|
||||
* <BackgroundDark /> |
|
||||
*/ |
|
||||
class BackgroundDark extends React.Component { |
|
||||
render() { |
|
||||
return <Box bg="darkestBackground" color="primaryText" {...this.props} /> |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default BackgroundDark |
|
||||
@ -1,16 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import { Box } from 'rebass' |
|
||||
|
|
||||
/** |
|
||||
* @render react |
|
||||
* @name BackgroundLight |
|
||||
* @example |
|
||||
* <BackgroundLight /> |
|
||||
*/ |
|
||||
class BackgroundLight extends React.Component { |
|
||||
render() { |
|
||||
return <Box bg="lightBackground" color="primaryText" {...this.props} /> |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default BackgroundLight |
|
||||
@ -1,16 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import { Box } from 'rebass' |
|
||||
|
|
||||
/** |
|
||||
* @render react |
|
||||
* @name BackgroundLightest |
|
||||
* @example |
|
||||
* <BackgroundLightest /> |
|
||||
*/ |
|
||||
class BackgroundLightest extends React.Component { |
|
||||
render() { |
|
||||
return <Box bg="lightestBackground" color="primaryText" {...this.props} /> |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export default BackgroundLightest |
|
||||
@ -0,0 +1,16 @@ |
|||||
|
import React from 'react' |
||||
|
import { Box } from 'rebass' |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name BackgroundPrimary |
||||
|
* @example |
||||
|
* <BackgroundPrimary /> |
||||
|
*/ |
||||
|
class BackgroundPrimary extends React.Component { |
||||
|
render() { |
||||
|
return <Box bg="primaryColor" color="primaryText" {...this.props} /> |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default BackgroundPrimary |
||||
@ -0,0 +1,16 @@ |
|||||
|
import React from 'react' |
||||
|
import { Box } from 'rebass' |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name BackgroundSecondary |
||||
|
* @example |
||||
|
* <BackgroundSecondary /> |
||||
|
*/ |
||||
|
class BackgroundSecondary extends React.Component { |
||||
|
render() { |
||||
|
return <Box bg="secondaryColor" color="primaryText" {...this.props} /> |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default BackgroundSecondary |
||||
@ -0,0 +1,16 @@ |
|||||
|
import React from 'react' |
||||
|
import { Box } from 'rebass' |
||||
|
|
||||
|
/** |
||||
|
* @render react |
||||
|
* @name BackgroundTertiary |
||||
|
* @example |
||||
|
* <BackgroundTertiary /> |
||||
|
*/ |
||||
|
class BackgroundTertiary extends React.Component { |
||||
|
render() { |
||||
|
return <Box bg="tertiaryColor" color="primaryText" {...this.props} /> |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default BackgroundTertiary |
||||
@ -1,10 +1,10 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import renderer from 'react-test-renderer' |
import renderer from 'react-test-renderer' |
||||
import { BackgroundDark } from 'components/UI' |
import { BackgroundPrimary } from 'components/UI' |
||||
|
|
||||
describe('component.UI.BackgroundDark', () => { |
describe('component.UI.BackgroundPrimary', () => { |
||||
it('should render correctly', () => { |
it('should render correctly', () => { |
||||
const tree = renderer.create(<BackgroundDark />).toJSON() |
const tree = renderer.create(<BackgroundPrimary />).toJSON() |
||||
expect(tree).toMatchSnapshot() |
expect(tree).toMatchSnapshot() |
||||
}) |
}) |
||||
}) |
}) |
||||
|
|||||
@ -1,10 +1,10 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import renderer from 'react-test-renderer' |
import renderer from 'react-test-renderer' |
||||
import { BackgroundLight } from 'components/UI' |
import { BackgroundTertiary } from 'components/UI' |
||||
|
|
||||
describe('component.UI.BackgroundLight', () => { |
describe('component.UI.BackgroundTertiary', () => { |
||||
it('should render correctly', () => { |
it('should render correctly', () => { |
||||
const tree = renderer.create(<BackgroundLight />).toJSON() |
const tree = renderer.create(<BackgroundTertiary />).toJSON() |
||||
expect(tree).toMatchSnapshot() |
expect(tree).toMatchSnapshot() |
||||
}) |
}) |
||||
}) |
}) |
||||
|
|||||
@ -1,10 +1,10 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import renderer from 'react-test-renderer' |
import renderer from 'react-test-renderer' |
||||
import { BackgroundLightest } from 'components/UI' |
import { BackgroundSecondary } from 'components/UI' |
||||
|
|
||||
describe('component.UI.BackgroundLightest', () => { |
describe('component.UI.BackgroundSecondary', () => { |
||||
it('should render correctly', () => { |
it('should render correctly', () => { |
||||
const tree = renderer.create(<BackgroundLightest />).toJSON() |
const tree = renderer.create(<BackgroundSecondary />).toJSON() |
||||
expect(tree).toMatchSnapshot() |
expect(tree).toMatchSnapshot() |
||||
}) |
}) |
||||
}) |
}) |
||||
|
|||||
@ -0,0 +1,10 @@ |
|||||
|
import React from 'react' |
||||
|
import renderer from 'react-test-renderer' |
||||
|
import { BackgroundPrimary } from 'components/UI' |
||||
|
|
||||
|
describe('component.UI.BackgroundPrimary', () => { |
||||
|
it('should render correctly', () => { |
||||
|
const tree = renderer.create(<BackgroundPrimary />).toJSON() |
||||
|
expect(tree).toMatchSnapshot() |
||||
|
}) |
||||
|
}) |
||||
@ -0,0 +1,13 @@ |
|||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
|
||||
|
exports[`component.UI.BackgroundPrimary should render correctly 1`] = ` |
||||
|
.c0 { |
||||
|
color: primaryText; |
||||
|
background-color: primaryColor; |
||||
|
} |
||||
|
|
||||
|
<div |
||||
|
className="c0" |
||||
|
color="primaryText" |
||||
|
/> |
||||
|
`; |
||||
Loading…
Reference in new issue