added styling, hover effects, darker ui

index.html

@@ -10,7 +10,7 @@
 <!-- partial:index.partial.html -->
 <button id="erase">Clear Canvas</button>
 <!-- Colors Palette/buttons -->
-<div class="colors">
+<div class="colors-container">
   <button id="white">White</button>
   <button id="black">Black</button>
   <button id="pink">Pink</button>
@@ -20,12 +20,11 @@
   <button id="orange">Orange</button>
   <button id="yellow">Yellow</button>
   <button id="green">Green</button>
-  <button id="coral">Coral</button>
   </div>
 <button id="download">Download Drawing</button>
 
-<!-- <canvas width=600 height=300></canvas> -->
-<canvas></canvas>
+<canvas width=600 height=300></canvas>
+<!-- <canvas></canvas> -->
 <!-- partial -->
   <script src='https://cdn.jsdelivr.net/npm/apexcharts'></script><script  src="./script.js"></script>
 

script.js

@@ -91,11 +91,6 @@ whiteButton.addEventListener('click', () => {
     ctx.strokeStyle = 'white';
 } );
 
-// Change color to Coral
-coralButton.addEventListener('click', () => {
-  ctx.strokeStyle = '#FF7F50';
-});
-
 // Change color to red
 redButton.addEventListener('click', () => {
   ctx.strokeStyle = '#ff0c2c';

style.css

@@ -1,23 +1,113 @@
 body {
   height: 100vh;
   width: 100vw;
-  background-color: wheat;
-  
+  background-color: hsla(0,0%,0%,0.8);
+ margin: 25px;
 }
 
 canvas {
+  background: rgb(79, 79, 90);
+border: solid gray .7px;
+border-radius: 5px;
+}
 
-  background: white;
-border: solid black 1px;
+canvas:hover, canvas:focus {
+ cursor: pointer;
 }
 
+
+
 /* Color Palette Container */
-.colors {
-  background-color: white;
+.colors-container {
+display: inline-block;
+  background-color: rgb(79, 79, 90);
+  border: solid gray .7px;
+  border-radius: 5px;
+
+  margin: 25px;
+}
+
+/* Color Swatches Look Like This */
+.colors-container button {
+  width: 65px;
   border: solid black 1px;
-  padding: 20px;
-  display: inline-block;
+  border-radius: 5px;
+  padding: 10px;
   margin: 5px;
 }
 
-/* button#download */
+.colors-container button:hover {
+  border: white 1px solid;
+}
+
+
+
+button:hover {
+  cursor: pointer;
+}
+
+#white {
+  background-color: white;
+  color: white;
+}
+
+#black {
+  background-color: black;
+  color: black;
+}
+
+#red {
+  background-color: #ff0c2c;
+  color: #ff0c2c;
+}
+
+#orange {
+  background-color: #F58e16;
+  color: #F58e16;
+}
+
+#yellow {
+  background-color: #ffff00;
+  color: #ffff00;
+}
+
+#green {
+  background-color: #00ff00;
+  color: #00ff00;
+}
+
+#blue {
+  background-color: #0c43ff;
+  color: #0c43ff;
+}
+
+#purple {
+  background-color: #8000ff;
+  color: #8000ff;
+}
+
+#pink {
+  background-color: #ff00ff;
+  color: #ff00ff;
+}
+
+
+
+/* Download & Erase Buttons */
+button#download,
+button#erase {
+  background-color: lightgray;
+  border: solid gray 1px;
+  border-radius: 5px;
+  margin: 25px;
+}
+
+button#download:hover,
+button#erase:hover {
+  background-color: white;
+  border: solid white .7px;
+}
+
+html {
+  overflow: hidden;
+}