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