Renaming the transition classes, and applying them to the Rejoin button

client/src/App.js

@@ -26,7 +26,7 @@ const Header = ({ show }) => (
     timeout={500}
     mountOnEnter
     unmountOnExit
-    classNames="state"
+    classNames="fade"
   >
     <div className={styles.header}>
       <p>TerrAssumptions!</p>
@@ -40,7 +40,7 @@ const Footer = ({ show }) => (
     timeout={500}
     mountOnEnter
     unmountOnExit
-    classNames="state"
+    classNames="fade"
   >
     <div className={styles.footer}>
       <ApiInfo />
@@ -54,11 +54,11 @@ const State = ({ show, children, setTransitioning }) => (
     timeout={500}
     mountOnEnter
     unmountOnExit
-    classNames="state"
+    classNames="fade"
     onEnter={() => setTransitioning(true)} 
     onExited={() => setTransitioning(false)}
   >
-    <div className="state">
+    <div className={styles.state}>
       {children}
     </div>
   </CSSTransition>

client/src/App.module.css

@@ -19,4 +19,9 @@
   display: block;
   text-align: center;
   border-top: 2px solid #555;
+}
+
+.state {
+  height: 100%;
+  width: 100%;
 }

client/src/components/screens/HomePage/HomePage.jsx

@@ -4,6 +4,7 @@ import { hasSavedGameInfo } from '../../../domain/localStorageMethods';
 import DelayedButton from '../../util/DelayedButton';
 import GameCreationForm from '../../util/GameCreationForm';
 import styles from './HomePage.module.css';
+import { CSSTransition } from 'react-transition-group';
 
 const Rejoin = () => (
   <div className={styles.rejoinSection}>
@@ -22,8 +23,10 @@ export default () => {
 
   return (
     <div className={styles.page}>
+      <CSSTransition in={hasSavedInfo} mountOnEnter unmountOnExit timeout={500} classNames="fade">
+        <Rejoin />
+      </CSSTransition>
       <div className={styles.form}><GameCreationForm afterCreate={(gameId) => dispatch.goToLobby(gameId)} /></div>
-      {hasSavedInfo && <Rejoin />}
     </div>
   );
 }

client/src/components/screens/HomePage/HomePage.module.css

@@ -2,8 +2,8 @@
   width: 100%;
   height: 100%;
   display: flex;
-  flex-flow: column-reverse nowrap;
-  justify-content: flex-start;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
   align-items: center;
 }
 

client/src/index.css

@@ -51,27 +51,22 @@ button:disabled {
   height: 100% !important;
 }
 
-.state {
-  height: 100%;
-  width: 100%;
-}
-
-.state-enter {
+.fade-enter {
   opacity: 0;
 }
 
-.state-enter-active {
+.fade-enter-active {
   opacity: 1;
   transition: opacity 500ms;
 }
 
-.state-exit {
+.fade-exit {
   position: absolute;
   z-index: 1;
   opacity: 1;
 }
 
-.state-exit-active {
+.fade-exit-active {
   position: absolute;
   z-index: 1;
   opacity: 0;