Change styling to not put game info to the right of the board

Now that we don't have that huge list of buttons, it seems silly to
have the short status message off to the side.

diff --git a/tictactoe/tictactoe.css b/tictactoe/tictactoe.css
index 10ad37052f266b90fcdd9a0c5509f5737a657404..d505c7ded3f4b356548b3b40b38c92f3c284dae4 100644 (file)
--- a/tictactoe/tictactoe.css
+++ b/tictactoe/tictactoe.css
@@ -35,13 +35,3 @@ ol, ul {
 .kbd-navigation .square:focus {
   background: #ddd;
 }
-
-.game {
-  display: flex;
-  flex-direction: row;
-}
-
-.game-info {
-  margin-left: 20px;
-  margin-bottom: 20px;
-}

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 934faa8e0cc63e37adc530c22beea642f7782fb7..849a6f2a113f6141ceaf1e33927bb10d2bbadd23 100644 (file)
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -146,15 +146,15 @@ class Game extends React.Component {
 
     return (
       <div className="game">
+        <div className="game-info">
+          <div>{status}</div>
+        </div>
         <div className="game-board">
           <Board
             squares={current.squares}
             onClick={i => this.handleClick(i)}
           />
         </div>
-        <div className="game-info">
-          <div>{status}</div>
-        </div>
       </div>
     );
   }