Style adding new palettes and individual palettes

src/components/App/App.css

@@ -1,45 +1,45 @@
 #app {
   width: 100%;
-  height: 900px;
+  height: 1200px;
   padding: 5%;
   background-image: url('../../Images/FINAL_color_picker_FE.jpg');
   background-size: cover;
 }
 
-.project_box {
+.project_box, .palette_box {
   outline: none;
   margin: 1%;
   height: 50px;
 }
 
-.selected_project_box {
+.selected_project_box, .selected_palette_box {
   outline: none;
   margin: 1%;
   height: 50px;
   border-radius: 15px;
   box-shadow: 1px 1px 1px 1px red;
 }
 
-.project_name-btn {
+.project_name-btn, .palette_name-btn {
   border: 1px solid black;
   height: 100%;
   font-size: 1em;
   border-radius: 15px 0 0 15px;
 }
 
-.project_name-btn:hover {
+.project_name-btn:hover, .palette_name-btn:hover {
   background-color: grey;
   color: white;
   transform: scale(1.1);
 }
 
-.project_delete-btn:hover {
+.project_delete-btn:hover, .palette_delete-btn:hover {
   background-color: black;
   color: red;
   transform: scale(1.1);
 }
 
-.project_delete-btn {
+.project_delete-btn, .palette_delete-btn {
   background-color: grey;
   color: rgb(102, 0, 0);
   border: 1px solid black;

src/components/App/App.js

@@ -125,10 +125,16 @@ class App extends Component {
     const { color1, color2, color3, color4, color5} = this.state;
     const displayPalettes = this.state.palettes.filter(palette => palette.projectId === this.state.projectId)
     const paletteName = displayPalettes.map(palette => {
+      let selectedPalette = '';
+      if (palette.id === this.state.paletteId) {
+        selectedPalette = "selected_palette_box"
+      } else {
+        selectedPalette = "palette_box"
+      }
       return (
-        <div key={palette.id}>
-          <button value={palette.id} onClick={(e) => this.updatePalette(e, palette)}>{palette.name}</button>
-          <button value={palette.id} onClick={() => this.removePalette(palette.id)}>X</button>
+        <div key={palette.id} className={selectedPalette}>
+          <button className="palette_name-btn" value={palette.id} onClick={(e) => this.updatePalette(e, palette)}>{palette.name}</button>
+          <button className="palette_delete-btn" value={palette.id} onClick={() => this.removePalette(palette.id)}>X</button>
         </div>
       )
     })

src/components/Palettes/Palettes.css

@@ -0,0 +1,36 @@
+#palettes {
+  color: white;
+}
+
+#palettes_div {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 3%;
+  width: 70%;
+}
+
+#add_new_palette {
+  width: 69%;
+  padding: 1% 3% 3% 3%;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 10px;
+}
+
+.input_palette {
+  border: 1px solid black;
+  height: 40px;
+  border-radius: 15px 0 0 15px;
+}
+
+.input_palette-btn {
+  border: 1px solid black;
+  width: 35px;
+  height: 43px;
+  border-radius: 0 15px 15px 0;
+}
+
+.input_palette-btn:hover {
+  background-color: darkolivegreen;
+  color: white;
+  transform: scale(1.1);
+}

src/components/Palettes/Palettes.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import './Palettes.css';
 
 class Palettes extends Component {
   constructor() {
@@ -11,11 +12,16 @@ class Palettes extends Component {
   render () {
     return(
       <section>
-        <h3>Add A New Palette:</h3>
-        <input onChange={this.props.updatePaletteName} type='text'/>
-        <button onClick={this.props.postPalette}>Add</button>
-        <br />
-        <div>{this.props.palettes}</div>
+        <div id="add_new_palette">
+          <h2 id="palettes">Palettes:</h2>
+          <h3>Add A New Palette:</h3>
+          <input className="input_palette" placeHolder="    Palette Name" onChange={this.props.updatePaletteName} type='text'/>
+          <button className="input_palette-btn" onClick={this.props.postPalette}>+</button>
+          <br />
+        </div>
+        <div id="palettes_div">
+          {this.props.palettes}
+        </div>
       </section>
     )
   }