style

index.js

@@ -4,6 +4,11 @@ const HEIGHT = 24;
 // State
 let brushColor = '';
 
+// Container
+const container = document.createElement('div');
+container.className = 'container';
+container.style.width = `${WIDTH * 16}px`;
+
 // Canvas
 const canvas = document.createElement('div');
 canvas.className = 'canvas';
@@ -20,7 +25,7 @@ for(let y = 0; y < HEIGHT; y++) {
     }
     canvas.appendChild(row);
 }
-document.body.appendChild(canvas);
+container.appendChild(canvas);
 
 // Palette
 const colors = ['#b23232', '#ff4848', '#ff6c6c', '#e59b40', '#ffad48', '#ffc57e', '#e5de40', '#fff748', '#fffa91', '#39cc4b', '#48ff5e', '#91ff9e', '#3248b2', '#4867ff', '#91a3ff', '#6432b2', '#8f48ff', '#bb91ff', '#7c2b99', '#cf48ff', '#e291ff', '#000000', '#323232', '#666666', '#999999', '#cccccc', '#ffffff', '#3a2119', '#512e23', '#754233', '#90675b', '#ac8d84'];
@@ -32,7 +37,13 @@ for(let color of colors) {
     swatch.style.backgroundColor = color;
     swatch.addEventListener('click', () => {
         brushColor = color;
+        title.style.backgroundColor = color;
     });
     palette.appendChild(swatch);
 }
-document.body.appendChild(palette);
+const title = document.createElement('h2');
+title.innerText = 'BRUSH COLOR';
+palette.appendChild(title);
+container.appendChild(palette);
+
+document.body.appendChild(container);

style.css

@@ -1,6 +1,24 @@
 body {
     display: flex;
     flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h2 {
+    font-family: "Gill Sans";
+    font-size: 24px;
+    font-weight: 400;
+    color: rgb(153, 153, 153);
+    margin: 0;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 15px;
+    background-color: rgb(229, 229, 229);
 }
 
 .row {
@@ -11,18 +29,27 @@ body {
     width: 14px;
     height: 14px;
     border: 1px solid rgb(229, 229, 229);
+    background-color: white;
 }
 
 .palette {
     display: flex;
     flex-wrap: wrap;
     background-color: rgb(229, 229, 229);
+    align-items: center;
 }
 
 .swatch {
     width: 35px;
     height: 35px;
+    border: 1px solid rgb(187, 187, 187);
     border-radius: 50%;
     display: flex;
     margin: 2px;
 }
+
+.currentSwatch {
+    width: 50px;
+    height: 35px;
+    display: flex;
+}