rayelliott
/
react-pallette-generator
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove styles

This commit is contained in:
Ray Elliott 2020-04-27 23:18:34 +01:00
parent 953a189588
commit 7df50fd44a
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/App.js
View File

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