remove styles
This commit is contained in:
parent
953a189588
commit
7df50fd44a
25
src/App.js
25
src/App.js
|
@ -18,13 +18,7 @@ class Shade extends React.Component {
|
|||
}
|
||||
|
||||
S.Shade = styled(Shade)`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: ${props => props.color};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
|
@ -38,7 +32,8 @@ span {
|
|||
`;
|
||||
|
||||
S.ShadeBase = styled(S.Shade)`
|
||||
border: 3px solid rgba(0, 0, 0, 0.5);
|
||||
border-top: 3px solid rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0.5);
|
||||
`;
|
||||
|
||||
function IncDecButton(props) {
|
||||
|
@ -179,10 +174,10 @@ Color.defaultProps = {
|
|||
darkenAmount: 3,
|
||||
scaleShadeStart: 0.2,
|
||||
scaleShadeEnd: 0.8,
|
||||
scaleShadeStepCount: 5,
|
||||
scaleShadeStepCount: 4,
|
||||
scaleTintStart: 0.2,
|
||||
scaleTintEnd: 0.8,
|
||||
scaleTintStepCount: 5,
|
||||
scaleTintStepCount: 4,
|
||||
}
|
||||
|
||||
S.Color = styled(Color)`
|
||||
|
@ -215,17 +210,21 @@ class Palette extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
palette: palette[0],
|
||||
palette: [],
|
||||
}
|
||||
|
||||
this.randomizePalette = this.randomizePalette.bind(this);
|
||||
this.randomFivePalette = this.randomFivePalette.bind(this);
|
||||
}
|
||||
|
||||
randomizePalette() {
|
||||
randomFivePalette() {
|
||||
const newPalette = palette[Math.floor(Math.random() * palette.length)];
|
||||
this.setState({palette: newPalette});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.randomFivePalette();
|
||||
}
|
||||
|
||||
render() {
|
||||
const colors = this.state.palette.map(color =>
|
||||
<li key={color}>
|
||||
|
@ -237,7 +236,7 @@ class Palette extends React.Component {
|
|||
);
|
||||
return (
|
||||
<article>
|
||||
<button onClick={this.randomizePalette}>Random Palette</button>
|
||||
<button onClick={this.randomFivePalette}>Random Five Colour Palette</button>
|
||||
<ul className={this.props.className}>
|
||||
{colors}
|
||||
</ul>
|
||||
|
|
Reference in New Issue