Styling

public/index.css

@@ -4,4 +4,5 @@ body {
   width: 100%;
   height: 1000px;
   font-family: 'Sulphur Point', sans-serif;
+  background-color: black;
 }

src/components/App/App.css

@@ -1,11 +1,53 @@
 #app {
   width: 100%;
-  height: 1000px;
+  height: 1200px;
   padding: 5%;
   background-image: url('../../Images/FINAL_color_picker_FE.jpg');
   background-size: cover;
 }
 
+.project_box, .palette_box {
+  outline: none;
+  margin: 1%;
+  height: 50px;
+}
+
+.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, .palette_name-btn {
+  border: 1px solid black;
+  height: 100%;
+  font-size: 1em;
+  border-radius: 15px 0 0 15px;
+}
+
+.project_name-btn:hover, .palette_name-btn:hover {
+  background-color: grey;
+  color: white;
+  transform: scale(1.1);
+}
+
+.project_delete-btn:hover, .palette_delete-btn:hover {
+  background-color: black;
+  color: red;
+  transform: scale(1.1);
+}
+
+.project_delete-btn, .palette_delete-btn {
+  background-color: grey;
+  color: rgb(102, 0, 0);
+  border: 1px solid black;
+  height: 100%;
+  font-size: 1em;
+  border-radius: 0 15px 15px 0;
+}
+
 h3 {
   color: white;
 }

src/components/App/App.js

@@ -108,18 +108,30 @@ 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>
       )
     })
     const displayProjects = this.state.projects.map(project => {
+        let selectedProject = '';
+        if (project.projectId === this.state.projectId) {
+          selectedProject = "selected_project_box"
+        } else {
+          selectedProject = "project_box"
+        }
         return (
-          <div key={project.id}>
-            <button value={project.projectId} onClick={(e) => this.updateProject(e)}>{project.name}</button>
-            <button value={project.projectId} onClick={() => this.deleteProjectAndPalettes(project.projectId)}>X</button>
+          <div key={project.id} className={selectedProject}>
+            <button className="project_name-btn" value={project.projectId} onClick={(e) => this.updateProject(e)}>{project.name}</button>
+            <button className="project_delete-btn" value={project.projectId} onClick={() => this.deleteProjectAndPalettes(project.projectId)}>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>
     )
   }

src/components/Projects/Projects.css

@@ -0,0 +1,40 @@
+#projects_div {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 3%;
+  width: 70%;
+}
+
+#projects {
+  color: white;
+}
+
+#add_new_project {
+  width: 69%;
+  padding: 1% 3% 3% 3%;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 10px;
+}
+
+.input_project {
+  border: 1px solid black;
+  height: 40px;
+  border-radius: 15px 0 0 15px;
+}
+
+.input_name-btn {
+  border: 1px solid black;
+  width: 35px;
+  height: 43px;
+  border-radius: 0 15px 15px 0;
+}
+
+button:focus {
+  outline: none;
+}
+
+.input_name-btn:hover {
+  background-color: darkolivegreen;
+  color: white;
+  transform: scale(1.1);
+}

src/components/Projects/Projects.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import './Projects.css';
 
 class Projects extends Component {
   constructor() {
@@ -22,19 +23,23 @@ class Projects extends Component {
   render () {
     return(
       <section>
-        <h3 id="projects">Projects:</h3>
-        <h3>Add A New Project:</h3>
-        <input 
-          className="input-project"
-          type="text"
-          placeholder="Project Name"
-          name="projectName"
-          value={this.state.projectName}
-          onChange={event => this.updateState(event)}
-        />
-        <button onClick={() => this.addNewProject()}>+</button>
-        <br />
-        {this.props.projects}
+        <div id="add_new_project">
+          <h2 id="projects">Projects:</h2>
+          <h3>Add A New Project:</h3>
+          <input 
+            className="input_project"
+            type="text"
+            placeholder="    Project Name"
+            name="projectName"
+            value={this.state.projectName}
+            onChange={event => this.updateState(event)}
+          />
+          <button className="input_name-btn" onClick={() => this.addNewProject()}>+</button>
+          <br />
+        </div>
+        <div id="projects_div">
+          {this.props.projects}
+        </div>
       </section>
     )
   }