styles

client/src/components/game.component.jsx

@@ -22,6 +22,26 @@ function GamePanel(props) {
     } = props;
 
     if (!game) return <div>...</div>;
+    if (showLog) {
+        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
+        return (
+            <main className="game">
+                <div className="instance-hdr">
+                    <button
+                        className="game-back-btn instance-btn instance-ui-btn left"
+                        onClick={() => toggleLog(!showLog)}>
+                        Game
+                    </button>
+                    <div className="spacer">
+                        <div>&nbsp;</div>
+                    </div>
+                </div>
+                <div className="logs">
+                    {logs}
+                </div>
+            </main>
+        );
+    }
 
     const header = (
         <div className="instance-hdr">
@@ -36,23 +56,11 @@ function GamePanel(props) {
             <button
                 className="game-back-btn instance-btn instance-ui-btn left"
                 onClick={() => toggleLog(!showLog)}>
-                {showLog ? 'Game' : 'Log'}
+                Log
             </button>
         </div>
     );
 
-    if (showLog) {
-        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
-        return (
-            <main className="game">
-                {header}
-                <div className="logs">
-                    {logs}
-                </div>
-            </main>
-        );
-    }
-
     function findCryp(id) {
         const team = game.teams.find(t => t.cryps.find(c => c.id === id));
         if (team) return team.cryps.find(c => c.id === id);