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 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', () => { |
|||
const tree = renderer.create(<BackgroundDark />).toJSON() |
|||
const tree = renderer.create(<BackgroundPrimary />).toJSON() |
|||
expect(tree).toMatchSnapshot() |
|||
}) |
|||
}) |
|||
|
|||
@ -1,10 +1,10 @@ |
|||
import React from 'react' |
|||
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', () => { |
|||
const tree = renderer.create(<BackgroundLight />).toJSON() |
|||
const tree = renderer.create(<BackgroundTertiary />).toJSON() |
|||
expect(tree).toMatchSnapshot() |
|||
}) |
|||
}) |
|||
|
|||
@ -1,10 +1,10 @@ |
|||
import React from 'react' |
|||
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', () => { |
|||
const tree = renderer.create(<BackgroundLightest />).toJSON() |
|||
const tree = renderer.create(<BackgroundSecondary />).toJSON() |
|||
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