Added Responsiveness to ColorBoxes

Author: CodeInDna

react-color-palettes/src/App.js

@@ -16,6 +16,7 @@ class App extends Component {
 		}
 		this.savePalette = this.savePalette.bind(this);
 		this.findPalette = this.findPalette.bind(this);
+		this.deletePalette = this.deletePalette.bind(this);
 	}
 
 	findPalette(id){
@@ -33,11 +34,21 @@ class App extends Component {
 			JSON.stringify(this.state.palettes)
 		);
 	}
+
+	deletePalette(id){
+		console.log(id)
+		this.setState(currState => ({
+			palettes: currState.palettes.filter(palette => palette.id !== id)
+		}),
+		this.syncLocalStorage
+		)
+		console.log(this.state.palettes)
+	}
 	render(){
 		  return (
 		  	<Switch>
 			  	<Route exact path='/palette/create' render={(routeProps) => <CreatePalette palettes={this.state.palettes} savePalette={this.savePalette} {...routeProps}/>}/>
-			  	<Route exact path='/' render={(routeProps) => <PaletteList palettes={this.state.palettes} {...routeProps}/>}/>
+			  	<Route exact path='/' render={(routeProps) => <PaletteList palettes={this.state.palettes} deletePalette={this.deletePalette} {...routeProps}/>}/>
 			  	<Route exact path='/palette/:id' render={(routeProps) => <Palette palette={generateColors(this.findPalette(routeProps.match.params.id), 10)}/>}/>
 			  	<Route exact path='/palette/:paletteId/:colorId' render={(routeProps) => 
 			  		<MoreShades colorId={routeProps.match.params.colorId} palette={generateColors(this.findPalette(routeProps.match.params.paletteId), 10)}/>}

react-color-palettes/src/Components/MiniPalettes.js

@@ -1,25 +1,38 @@
-import React from 'react';
+import React, {Component} from 'react';
 import { withStyles } from '@material-ui/styles';
 import styles from "./../styles/MiniPaletteStyles";
 import DeleteIcon from '@material-ui/icons/Delete';
 
-function MiniPalettes(props){
-	const {classes, paletteName, emoji, colors} = props;
-	const miniColorBoxes = colors.map(color => (
-		<div key={color.name} className={classes.miniColor} style={{backgroundColor: color.color}}></div>
-	));
-	return(
-		<div className={classes.root} onClick={props.selectPalette}>
-			<div className={classes.delete}>
-				<DeleteIcon className={classes.deleteIcon} style={{transition: "all 0.3s ease-in-out"}}/>
+class MiniPalettes extends Component{
+	constructor(props){
+		super(props);
+		this.handleDeletePalette = this.handleDeletePalette.bind(this)
+	}
+	handleDeletePalette(e){
+		e.stopPropagation();
+		this.props.deletePalette(this.props.id)
+	}
+	render(){
+		const {classes, paletteName, emoji, colors, selectPalette} = this.props;
+		const miniColorBoxes = colors.map(color => (
+			<div key={color.name} className={classes.miniColor} style={{backgroundColor: color.color}}></div>
+		));
+		return(
+			<div className={classes.root} onClick={selectPalette}>
+				<DeleteIcon 
+					className={classes.deleteIcon} 
+					style={{transition: "all 0.3s ease-in-out"}} 
+					onClick={this.handleDeletePalette}
+				/>
+				<div className={classes.colors}>
+					{/*Mini Color Boxes*/}
+					{miniColorBoxes}
+				</div>
+				<h5 className={classes.title}>{paletteName}  <span className={classes.emoji}>{emoji}</span></h5>
 			</div>
-			<div className={classes.colors}>
-				{/*Mini Color Boxes*/}
-				{miniColorBoxes}
-			</div>
-			<h5 className={classes.title}>{paletteName}  <span className={classes.emoji}>{emoji}</span></h5>
-		</div>
-	)
+		)
+
+	}
 }
 
 export default withStyles(styles)(MiniPalettes);

react-color-palettes/src/Components/PaletteList.js

@@ -9,7 +9,7 @@ class PaletteList extends Component{
 		this.props.history.push(`/palette/${id}`)
 	}
 	render(){
-		const {palettes, classes} = this.props;
+		const {palettes, classes, deletePalette} = this.props;
 		return(
 			<div className={classes.root}>
 				<div className={classes.container}>
@@ -19,7 +19,7 @@ class PaletteList extends Component{
 					</nav>
 					<div className={classes.palettes}>
 						{palettes.map(palette => (
-								<MiniPalettes key={palette.id} {...palette} selectPalette={() => this.handlePaletteClick(palette.id)}/>
+								<MiniPalettes key={palette.id} id={palette.id} deletePalette={deletePalette} {...palette} selectPalette={() => this.handlePaletteClick(palette.id)}/>
 						))}
 					</div>
 				</div>

react-color-palettes/src/styles/ColorBoxStyles.js

@@ -1,4 +1,6 @@
 import chroma from "chroma-js";
+import sizes from './sizes';
+
 export default{
 	colorBox:{
 		width: "20%",
@@ -11,6 +13,18 @@ export default{
 		"&:hover button": {
 			opacity: "1",
 			transitionDuration: "0.8s",
+		},
+		[sizes.down("lg")]: {
+			width: "25%",
+			height: props => props.showLink ? "20%" : "50%",
+		},
+		[sizes.down("md")]: {
+			width: "50%",
+			height: props => props.showLink ? "10%" : "20%",
+		},
+		[sizes.down("xs")]: {
+			width: "100%",
+			height: props => props.showLink ? "5%" : "10%",
 		}
 	},
 	copyText: {
@@ -101,6 +115,9 @@ export default{
 			marginBottom: "0",
 			padding: "1rem",
 			textTransform: "uppercase",
+			[sizes.down("xs")]:{
+				fontSize: "5rem"
+			}
 		},
 		"& p": {
 			fontWeight: "100",

react-color-palettes/src/styles/PaletteStyles.js

@@ -1,3 +1,5 @@
+import sizes from './sizes';
+
 export default{
 	palette: {
 		height: "100vh",
@@ -8,8 +10,8 @@ export default{
 		height: "90%",
 	},
 	goBack:{
-		height: "50%",
 		width: "20%",
+		height: "50%",
 		display: "inline-block",
 		margin: "0 auto",
 		position: "relative",
@@ -35,6 +37,18 @@ export default{
 			textTransform: "uppercase",
 			cursor: "pointer", 
 			textDecoration: "none",
-		}
+		},
+		[sizes.down("lg")]: {
+			width: "25%",
+			height: "50%"
+		},
+		[sizes.down("md")]: {
+			width: "50%",
+			height: "20%"
+		},
+		[sizes.down("xs")]: {
+			width: "100%",
+			height: "10%"
+		},
 	}
 }

react-color-palettes/src/styles/sizes.js

@@ -0,0 +1,15 @@
+
+export default{
+	up(){
+
+	},
+	down(size){
+		const sizes = {
+			xs: "576px",
+			sm: "768px",
+			md: "992px",
+			lg: "1200px",
+		}
+		return `@media (max-width: ${sizes[size]})`
+	}
+}