Visual adjustments

src/App.js

@@ -123,6 +123,7 @@ function App() {
     gameClient.createNewGame(rows, cols, mines).then(response => {
       setActiveGame(response);
       setFlags(mines);
+      document.getElementsByClassName('reset')[0].innerHTML = '🙂';
       generateDummyBoard();
     });
   };
@@ -133,6 +134,7 @@ function App() {
 
   return (
     <div className="app">
+      <div className="app-col-spacer"> </div>
       <div className="canvas">
         <Header
           cols={cols}
@@ -154,6 +156,7 @@ function App() {
           rows={rows}
         />
       </div>
+      <div className="app-col-spacer"> </div>
     </div>
   );
 }

src/assets/scss/styles.scss

@@ -8,15 +8,24 @@ body {
   background-color: $gray-mid;
 }
 
+.app {
+  display: flex;
+
+  &-col-spacer {
+    flex: 1 1 auto;
+  }
+}
+
 .canvas {
-  max-width: 1000px;
-  width: 100%;
-  min-width: 500px;
-  margin: 0 auto;
-  border-radius: 3px;
   display: flex;
   justify-content: center;
   flex-direction: column;
+
+  flex: 0 0 auto;
+  border-width: 3px;
+  border-style: solid;
+  border-color: darken($gray, 20%) lighten($gray, 20%) lighten($gray, 20%)
+    darken($gray, 20%);
 }
 
 .box {

src/components/Board/Board.js

@@ -6,7 +6,6 @@ import './styles.scss';
 const Board = ({ dummyBoard, handleCellClick, handleCellContextMenu }) => {
   return (
     <div className="board">
-      <div className="board-col-left"> </div>
       <div className="board-col-center">
         {dummyBoard.map((cols, rowId) => (
           <div className="board-row" key={`row_${rowId}`}>
@@ -25,7 +24,6 @@ const Board = ({ dummyBoard, handleCellClick, handleCellContextMenu }) => {
           </div>
         ))}
       </div>
-      <div className="board-col-right"> </div>
     </div>
   );
 };

src/components/Board/styles.scss

@@ -2,19 +2,7 @@
 
 .board {
   display: flex;
-
-  &-col-left,
-  &-col-right {
-    flex: 1 1 auto;
-  }
-
-  &-col-center {
-    flex: 0 0 auto;
-    border-width: 3px;
-    border-style: solid;
-    border-color: darken($gray, 20%) lighten($gray, 20%) lighten($gray, 20%)
-      darken($gray, 20%);
-  }
+  justify-content: center;
 
   &-row {
     display: flex;

src/components/Header/Header.js

@@ -17,32 +17,46 @@ const Header = ({
   return (
     <div className="header">
       <div className="settings">
+        <div className="form-control">
+          <label for="rows">Rows:</label>
           <input
             className="box"
             onChange={event => setRows(parseInt(event.target.value))}
             type="number"
             value={rows}
+            id="rows"
           />
+        </div>
+        <div className="form-control">
+          <label for="cols">Columns:</label>
           <input
             className="box"
             onChange={event => setCols(parseInt(event.target.value))}
             type="number"
             value={cols}
+            id="cols"
           />
+        </div>
+        <div className="form-control">
+          <label for="mines">Mines:</label>
           <input
             className="box"
             onChange={event => handleSetMines(event)}
             type="number"
             value={mines}
+            id="mines"
           />
+        </div>
+        <div className="form-control">
           <button
             className="button box"
             onClick={() => setUpdateDummyBoard(true)}>
             Apply
           </button>
         </div>
-      <div className="canvas">
-        <div className="flags led-panel box">{flags}</div>
+      </div>
+      <div className="header-actions">
+        <div className="flags led-panel">{flags}</div>
         <div
           className="reset box"
           onMouseDown={event => {
@@ -54,7 +68,7 @@ const Header = ({
           }}>
           🙂
         </div>
-        <div className="timer led-panel box">000</div>
+        <div className="timer led-panel">000</div>
       </div>
     </div>
   );

src/components/Header/styles.scss

@@ -1,19 +1,50 @@
 @import '../../assets/scss/variables';
 
 .header {
-  max-width: 500px;
+  max-width: 400px;
   width: 100%;
-  padding: 5px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   flex-direction: column;
 
+  &-col-left,
+  &-col-right {
+    flex: 1 1 auto;
+  }
+
+  &-col-center {
+    flex: 0 0 auto;
+    border-width: 3px;
+    border-style: solid;
+    border-color: darken($gray, 20%) lighten($gray, 20%) lighten($gray, 20%)
+      darken($gray, 20%);
+  }
+
   .settings {
-    max-width: 221px;
     display: flex;
     justify-content: center;
-    margin: 10px auto;
+    border-width: 3px;
+    border-style: solid;
+    border-color: lighten($gray, 20%) darken($gray, 20%) darken($gray, 20%)
+      lighten($gray, 20%);
+    padding-bottom: 5px;
+
+    .form-control {
+      display: flex;
+      flex-direction: column;
+
+      &:last-child {
+        align-items: flex-end;
+        justify-content: flex-end;
+      }
+
+      label {
+        font-size: 75%;
+        text-transform: uppercase;
+        padding: 5px;
+      }
+    }
 
     input {
       width: 40px;
@@ -22,18 +53,28 @@
       text-align: center;
       background: $gray-light;
       margin: 0 2px;
+      border-color: darken($gray, 20%) lighten($gray, 20%) lighten($gray, 20%)
+        darken($gray, 20%);
+      font-size: 120%;
     }
 
     .button {
       cursor: pointer;
       margin: 0 2px;
+      height: 38px;
+      border-color: lighten($gray, 20%) darken($gray, 20%) darken($gray, 20%)
+        lighten($gray, 20%);
     }
   }
 
-  .canvas {
+  &-actions {
     display: flex;
     justify-content: space-between;
     flex-direction: row;
+    border-width: 3px;
+    border-style: solid;
+    border-color: lighten($gray, 20%) darken($gray, 20%) darken($gray, 20%)
+      lighten($gray, 20%);
 
     .led-panel {
       font-family: 'Space Mono', monospace;
@@ -47,10 +88,11 @@
     }
 
     .reset {
-      width: 30px;
-      line-height: 30px;
+      width: 24px;
+      line-height: 24px;
       text-align: center;
       cursor: pointer;
+      margin: 3px;
     }
   }
 }