Add Svg Background to PaletteList

Author: CodeInDna

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

@@ -9,7 +9,7 @@ export default{
 		margin: "0 auto",
 		position: "relative",
 		cursor: "pointer",
-		marginBottom: "-3.8px",
+		marginBottom: "-4px",
 		"&:hover button": {
 			opacity: "1",
 			transitionDuration: "0.8s",
@@ -24,7 +24,7 @@ export default{
 		},
 		[sizes.down("xs")]: {
 			width: "100%",
-			height: props => props.showLink ? "5%" : "10%",
+			height: props => props.showLink ? "7%" : "10%",
 		}
 	},
 	copyText: {

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

@@ -8,7 +8,7 @@ const styles = {
 		margin: "0 auto",
 		position: "relative",
 		cursor: "pointer",
-		marginBottom: "-4.8px",
+		marginBottom: "-5px",
 		"&:hover svg":{
 			color: "white",
 			transform: "scale(1.5)"

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

@@ -1,11 +1,20 @@
 import sizes from './sizes';
+import bg from './bg.svg';
+
 export default{
 	root: {
-		backgroundColor: "blue",
+		backgroundColor: "#4f5b78",
 		height: "100vh",
 		display: "flex",
 		alignItems: "flex-start",
 		justifyContent: "center",
+		backgroundImage: `url(${bg})`,
+		backgroundRepeat: "no-repeat",
+		backgroundSize: "cover",
+		overflow: "scroll",
+		"& h1":{
+			fontSize: "1.7rem"
+		}
 	},
 	container: {
 		width: "50%",
@@ -42,7 +51,7 @@ export default{
 		},
 		[sizes.down("xs")]:{
 			gridTemplateColumns: "repeat(1, 100%)",
-			gridGap: "1rem"
+			gridGap: "1.4rem"
 		}
 	}
 }