First pass, footer keeps shooting up into header

client/src/App.js

@@ -20,27 +20,43 @@ const needsHeaderFooter = {
   [ERROR]: true
 };
 
-const Header = () => (
-  <div className={styles.header}>
-    <p>TerrAssumptions!</p>
-  </div>
+const Header = ({ show }) => (
+  <CSSTransition 
+    in={show}
+    timeout={1000}
+    mountOnEnter
+    unmountOnExit
+    classNames="state"
+  >
+    <div className={styles.header}>
+      <p>TerrAssumptions!</p>
+    </div>
+  </CSSTransition>
 )
 
-const Footer = () => (
-  <div className={styles.footer}>
-    <ApiInfo />
-  </div>
+const Footer = ({ show }) => (
+  <CSSTransition 
+    in={show}
+    timeout={1000}
+    mountOnEnter
+    unmountOnExit
+    classNames="state"
+  >
+    <div className={styles.footer}>
+      <ApiInfo />
+    </div>
+  </CSSTransition>
 )
 
-const State = ({ show, children, onEnter, onExited }) => (
+const State = ({ show, children, setTransitioning }) => (
   <CSSTransition
     in={show}
     timeout={1000}
     mountOnEnter
     unmountOnExit
     classNames="state"
-    onEnter={onEnter}
-    onExited={onExited}
+    onEnter={() => setTransitioning(true)} 
+    onExited={() => setTransitioning(false)}
   >
     <div className="state">
       {children}
@@ -57,24 +73,24 @@ export default () => {
   return (
     <React.StrictMode>
       <div className={styles.page}>
-        {needsHF && <Header />}
-        <State show={gameState === PRE_GAME} onExited={() => setSt(false)}>
+        <Header show={needsHF} />
+        <State show={gameState === PRE_GAME} setTransitioning={setSt}>
           <HomePage />
         </State>
-        <State show={gameState === PRE_ROUND} onExited={() => setSt(false)}>
+        <State show={gameState === PRE_ROUND} setTransitioning={setSt}>
           <Lobby />
         </State>
         {!st && gameState === IN_ROUND && <GamePanel />}
-        <State show={gameState === POST_ROUND} onEnter={() => setSt(true)} onExited={() => setSt(false)}>
+        <State show={gameState === POST_ROUND} setTransitioning={setSt}>
           <RoundSummary />
         </State>
-        <State show={gameState === POST_GAME}>
+        <State show={gameState === POST_GAME} setTransitioning={setSt}>
           <PlayerScores />
         </State>
         <State show={gameState === ERROR}>
           <p>Application encountered unrecoverable error, please refresh the page.</p>
         </State>
-        {needsHF && <Footer />}
+        <Footer show={needsHF} />
       </div>
     </React.StrictMode>
   );

client/src/App.module.css

@@ -7,12 +7,16 @@
 }
 
 .header {
+  justify-self: flex-start;
+  width: 100%;
   display: block;
   text-align: center;
   border-bottom: 2px solid #555;
 }
 
 .footer {
+  justify-self: flex-end;
+  width: 100%;
   display: block;
   text-align: center;
   border-top: 2px solid #555;