updated styles

assets/styles.css

@@ -1,30 +1,43 @@
 body {
+  background-color: #f2f2f2;
+  margin: 0px;
   font-family: tahoma;
   color: #282828;
-  margin: 0px;
 }
 
 .button {
-  margin-top: 30px;
-  background-color: #1e95ea;
+  margin: 30px;
+  background-color: #39495c;
+  border-radius: 5px;
+  font-size: 18px;
+  width: 160px;
+  height: 60px;
   color: white;
-  height: 50px;
-  width: 150px;
-  font-size: 20px;
+  padding: 20px;
+  box-shadow: inset 0 -0.6em 1em -0.35em rgba(0, 0, 0, 0.17),
+    inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.15),
+    inset 0 0 0em 0.05em rgba(255, 255, 255, 0.12);
+  text-align: center;
   cursor: pointer;
 }
 
 .cart {
-  margin: 25px;
+  margin: 25px 100px;
   float: right;
   border: 1px solid #d8d8d8;
-  padding: 5px 20px;
+  padding: 10px 30px;
+  background-color: white;
+  -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57);
 }
 
-.color-box {
-  width: 40px;
-  height: 40px;
-  margin-top: 5px;
+.color-circle {
+  width: 50px;
+  height: 50px;
+  margin-top: 8px;
+  border: 2px solid #d8d8d8;
+  border-radius: 50%;
 }
 
 .container {
@@ -35,13 +48,25 @@ body {
 
 .disabledButton {
   background-color: #d8d8d8;
+  cursor: not-allowed;
+}
+
+h1 {
+  font-size: 50px;
+}
+
+h3 {
+  font-size: 25px;
 }
 
 img {
   border: 2px solid #d8d8d8;
   width: 70%;
   margin: 40px;
-  box-shadow: 0px 0.5px 1px #d8d8d8;
+  padding: 15px;
+  -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57);
 }
 
 input {
@@ -55,14 +80,21 @@ label {
   margin-bottom: 5px;
 }
 
+li {
+  font-size: 18px;
+}
+
 .nav-bar {
   background: linear-gradient(-90deg, #84cf6a, #16c0b0);
   height: 60px;
-  margin-bottom: 15px;
+  margin-bottom: 25px;
+  -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.57);
 }
 
 p {
-  font-size: 20px;
+  font-size: 22px;
 }
 
 .product {
@@ -79,19 +111,40 @@ p {
 .review-form {
   display: flex;
   flex-direction: column;
-  width: 400px;
+  width: 425px;
   padding: 20px;
   margin: 40px;
   border: 2px solid #d8d8d8;
+  background-color: white;
+  -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
+  box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57);
 }
 
 .review-container {
+  width: 425px;
+  padding: 20px;
+  background-color: white;
+  -webkit-box-shadow: 0px 2px 20px -12px rgba(0, 0, 0, 0.57);
+  -moz-box-shadow: 0px 2px 20px -12px rgba(0, 0, 0, 0.57);
+  box-shadow: 2px 20px -12px rgba(0, 0, 0, 0.57);
   margin-left: 40px;
+  border: 2px solid #d8d8d8;
+}
+
+.review-container li {
+  margin-bottom: 30px;
+}
+
+.review-form .button {
+  display: block;
+  margin: 30px auto;
 }
 
 select {
   height: 40px;
   font-size: 20px;
+  background-color: white;
 }
 
 textarea {

components/ProductDisplay.js

@@ -25,7 +25,7 @@ app.component('product-display', {
           <li v-for="detail in details">{{ detail }}</li>
         </ul>
 
-        <div class="color-box"
+        <div class="color-circle"
           v-for="(variant, index) in variants" 
           :key="variant.id"
           :style="{ backgroundColor: variant.color }"
@@ -45,6 +45,7 @@ app.component('product-display', {
 
       <review-list :reviews="reviews"></review-list>
       <review-form @review-submitted="addReview" ></review-form>
+
     </div>
    `,
   data() {

components/ReviewForm.js

@@ -33,6 +33,11 @@ app.component('review-form', {
   },
   methods: {
     onSubmit() {
+      if (this.name === '' || this.text === '' || this.rating === null) {
+        alert('Review is incomplete. Please fill out every field.')
+        return
+      }
+
       const review = {
         name: this.name,
         text: this.text,

components/ReviewList.js

@@ -2,9 +2,9 @@ app.component('review-list', {
   template:
     /*html*/
     `
-    <div class="review-container">
-      <p v-if="!reviews.length">There are no reviews yet.</p>
-      <ul v-else>
+    <div  v-if="reviews.length" class="review-container">
+    <h3>Reviews:</h3>
+      <ul>
         <li v-for="(review, index) in reviews" :key="index">
           {{ review.name }} gave this {{ review.rating }} stars
           <br/>