Better components structure, add responsive

src/assets/index.css

@@ -13,21 +13,29 @@ body,
   margin: 0;
 }
 
+html {
+  font-size: 62.5%;
+}
+
 body {
-  font: 45px 'Century Gothic', Futura, sans-serif;
+  font-family: 'Century Gothic', Futura, sans-serif;
   color: var(--grey);
   background-color: #14bdac;
 }
 
-ol,
-ul {
-  padding-left: 30px;
+.m-bottom-small {
+  margin-bottom: 1em;
+}
+
+.m-top-big {
+  margin-top: 2em;
 }
 
 .status {
+  font-size: 4.5rem;
   display: flex;
   justify-content: center;
-  margin-bottom: 50px;
+  margin-bottom: 1.2em;
 }
 
 .board {
@@ -36,17 +44,16 @@ ul {
 }
 
 .square {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  display: block;
   box-sizing: border-box;
   background: transparent;
   border: none;
-  border-top: 12px solid var(--grey);
-  border-left: 12px solid var(--grey);
-  font-size: 100px;
+  border-top: 0.11em solid var(--grey);
+  border-left: 0.11em solid var(--grey);
+  font-size: 11rem;
+  line-height: 1em;
   font-weight: bold;
-  height: 120px;
+  height: 1.1em;
   padding: 0;
   text-align: center;
   width: 100%;
@@ -69,6 +76,7 @@ ul {
   color: var(--o-color);
 }
 
+.square:hover,
 .square:focus {
   outline: none;
 }
@@ -80,18 +88,6 @@ ul {
   align-items: center;
 }
 
-.game-info {
-  margin-left: 20px;
-}
-
-.m-bottom-20 {
-  margin-bottom: 20px;
-}
-
-.m-top-50 {
-  margin-top: 50px;
-}
-
 .action {
   display: flex;
   flex-direction: row;
@@ -100,13 +96,17 @@ ul {
 
 .action-btn {
   background-color: transparent;
-  border: 5px solid var(--grey);
+  border: 0.25em solid var(--grey);
   text-transform: uppercase;
-  font-size: 1.5rem;
+  font-size: 2.5rem;
   font-weight: bold;
   color: var(--grey);
   cursor: pointer;
-  padding: 15px 50px;
+  padding: 0.6em 1.8em;
+}
+
+.action-btn:hover {
+  outline: none;
 }
 
 .action-btn:hover:not(:disabled) {
@@ -121,3 +121,9 @@ ul {
   opacity: 0.4;
   cursor: default;
 }
+
+@media (max-width: 500px) {
+  html {
+    font-size: 45%;
+  }
+}

src/components/Board.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import TopButton from './TopButton';
+import Status from './Status';
 import Square from './Square';
+import Restart from './Restart';
 import {
   makeHuMove,
   makeAIMove,
@@ -34,33 +37,7 @@ class Board extends React.Component {
       setTimeout(this.props.makeAIMove, 500);
     };
 
-    return (
-      <div className="action">
-        <button
-          className="action-btn m-bottom-20"
-          disabled={this.props.playing}
-          onClick={handleClick}
-        >
-          Let computer starts
-        </button>
-      </div>
-    );
-  }
-
-  renderStatus(winner) {
-    const value = sign => (
-      <span className={sign === 'X' ? 'is-x' : 'is-o'}>&nbsp;{sign}</span>
-    );
-
-    let status;
-    if (winner) {
-      status = <>Winner:{value(winner)}</>;
-    } else if (!isGameOver(this.props.squares)) {
-      status = <>Next player:{value(this.props.xIsNext ? 'X' : 'O')}</>;
-    } else {
-      status = `That's a draw!`;
-    }
-    return <div className="status">{status}</div>;
+    return <TopButton playing={this.props.playing} onClick={handleClick} />;
   }
 
   renderSquare(square, position) {
@@ -69,25 +46,22 @@ class Board extends React.Component {
 
   render() {
     const winner = calculateWinner(this.props.squares);
-    const status = this.renderStatus(winner);
+    const gameOver = isGameOver(this.props.squares);
 
     return (
       <div>
         {this.renderTopButton()}
-        {status}
+        <Status
+          winner={winner}
+          gameOver={gameOver}
+          xIsNext={this.props.xIsNext}
+        />
         <div className="board">
           {this.props.squares.map((square, position) =>
             this.renderSquare(square, position)
           )}
         </div>
-        <div className="action">
-          <button
-            className="action-btn m-top-50"
-            onClick={this.props.restartGame}
-          >
-            Restart the game
-          </button>
-        </div>
+        <Restart onClick={this.props.restartGame} />
       </div>
     );
   }

src/components/Restart.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function Restart(props) {
+  return (
+    <div className="action">
+      <button className="action-btn m-top-big" onClick={props.onClick}>
+        Restart the game
+      </button>
+    </div>
+  );
+}

src/components/Status.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function Status(props) {
+  const value = sign => (
+    <span className={sign === 'X' ? 'is-x' : 'is-o'}>&nbsp;{sign}</span>
+  );
+
+  let status;
+  if (props.winner) {
+    status = <>Winner:{value(props.winner)}</>;
+  } else if (!props.gameOver) {
+    status = <>Next player:{value(props.xIsNext ? 'X' : 'O')}</>;
+  } else {
+    status = `That's a draw!`;
+  }
+  return <div className="status">{status}</div>;
+}

src/components/TopButton.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function TopButton(props) {
+  return (
+    <div className="action">
+      <button
+        className="action-btn m-bottom-small"
+        disabled={props.playing}
+        onClick={props.onClick}
+      >
+        Let computer starts
+      </button>
+    </div>
+  );
+}