Fix vulnerabilities + minor improvements

package.json

@@ -7,7 +7,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",
-    "react-scripts": "2.1.3",
+    "react-scripts": "^3.4.1",
     "redux": "^4.0.1"
   },
   "scripts": {

src/assets/index.css

@@ -30,36 +30,35 @@ ul {
   margin-bottom: 50px;
 }
 
-table {
-  border-collapse: collapse;
-}
-table td {
-  border: 12px solid var(--grey);
-}
-table tr:first-child td {
-  border-top: none;
-}
-table tr:last-child td {
-  border-bottom: none;
-}
-table tr td:first-child {
-  border-left: none;
-}
-table tr td:last-child {
-  border-right: none;
+.board {
+  display: grid;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
 }
 
 .square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   background: transparent;
   border: none;
-  float: left;
+  border-top: 12px solid var(--grey);
+  border-left: 12px solid var(--grey);
   font-size: 100px;
   font-weight: bold;
-  line-height: 120px;
   height: 120px;
   padding: 0;
   text-align: center;
-  width: 120px;
+  width: 100%;
+  cursor: pointer;
+}
+
+.square:nth-child(-n + 3) {
+  border-top: none;
+}
+
+.square:nth-child(3n + 1) {
+  border-left: none;
 }
 
 .is-x {
@@ -110,12 +109,11 @@ table tr td:last-child {
   padding: 15px 50px;
 }
 
-.action-btn:focus {
-  outline: none;
-  outline-offset: -4px;
+.action-btn:hover:not(:disabled) {
+  filter: brightness(90%);
 }
 
-.action-btn:active {
+.action-btn:active:not(:disabled) {
   transform: scale(0.95);
 }
 

src/components/Board.js

@@ -63,14 +63,8 @@ class Board extends React.Component {
     return <div className="status">{status}</div>;
   }
 
-  renderSquare(i, className) {
-    return (
-      <Square
-        value={this.props.squares[i]}
-        className={className}
-        onClick={() => this.handleClick(i)}
-      />
-    );
+  renderSquare(square, position) {
+    return <Square value={square} onClick={() => this.handleClick(position)} />;
   }
 
   render() {
@@ -81,25 +75,11 @@ class Board extends React.Component {
       <div>
         {this.renderTopButton()}
         {status}
-        <table>
-          <tbody>
-            <tr>
-              {this.renderSquare(0)}
-              {this.renderSquare(1)}
-              {this.renderSquare(2)}
-            </tr>
-            <tr>
-              {this.renderSquare(3)}
-              {this.renderSquare(4)}
-              {this.renderSquare(5)}
-            </tr>
-            <tr>
-              {this.renderSquare(6)}
-              {this.renderSquare(7)}
-              {this.renderSquare(8)}
-            </tr>
-          </tbody>
-        </table>
+        <div className="board">
+          {this.props.squares.map((square, position) =>
+            this.renderSquare(square, position)
+          )}
+        </div>
         <div className="action">
           <button
             className="action-btn m-top-50"
@@ -126,7 +106,4 @@ const mapDispatchToProps = dispatch => ({
   updateNextPlayer: nextPlayer => dispatch(updateNextPlayer(nextPlayer))
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Board);
+export default connect(mapStateToProps, mapDispatchToProps)(Board);

src/components/Square.js

@@ -3,10 +3,8 @@ import React from 'react';
 export default function Square(props) {
   const className = 'square ' + (props.value === 'X' ? 'is-x' : 'is-o');
   return (
-    <td>
-      <button className={className} onClick={props.onClick}>
-        {props.value}
-      </button>
-    </td>
+    <button className={className} onClick={props.onClick}>
+      {props.value}
+    </button>
   );
 }