remove styles

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>