fix footer height

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx

@@ -102,12 +102,12 @@ const Summary = (props: Props) => (
       </div>
     </div>
 
-    <div css={styles.footer}>
+    <footer css={styles.footer}>
       {/* TODO Add back button */}
       <Button type="primary" onClick={props.onNext}>
         Start
       </Button>
-    </div>
+    </footer>
   </div>
 )
 

web-app/src/containers/Tutorial/index.tsx

@@ -51,7 +51,7 @@ const styles = {
     flexDirection: 'row' as 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    height: '2rem',
+    height: theme['$footer-height'],
     backgroundColor: 'black',
     fontSize: '1rem',
     lineHeight: '1rem',
@@ -70,21 +70,21 @@ const styles = {
     right: 0,
     zIndex: 1000,
   },
-  processes: {
+  processes: (theme: Theme) => ({
     padding: '0 1rem',
     position: 'fixed' as 'fixed',
-    bottom: '2rem',
+    bottom: theme['$footer-height'],
     left: 0,
     right: 0,
     top: 'auto',
-  },
-  testMessage: {
+  }),
+  testMessage: (theme: Theme) => ({
     position: 'absolute' as 'absolute',
     top: 'auto',
-    bottom: '2rem',
+    bottom: theme['$footer-height'],
     left: '5px',
     right: '5px',
-  },
+  }),
 }
 
 interface PageProps {
@@ -163,7 +163,7 @@ const TutorialPage = (props: PageProps) => {
           />
         </div>
       ) : (
-        <div css={styles.footer}>
+        <footer css={styles.footer}>
           {/* Process Modal */}
           {processes.length > 0 && (
             <div css={styles.processes}>
@@ -216,7 +216,7 @@ const TutorialPage = (props: PageProps) => {
               <StepProgress current={stepIndex + 1} max={level.steps.length} />
             ) : null}
           </div>
-        </div>
+        </footer>
       )}
       <SideMenu visible={menuVisible} toggleVisible={setMenuVisible} page={page} setPage={setPage} />
     </div>

web-app/src/styles/theme.tsx

@@ -143,7 +143,7 @@ const theme = {
   '$shadow-3-right': '4px 0px 10px 0px rgba(0, 0, 0, 0.1)',
   '$shadow-3-down': '0px 4px 10px 0px rgba(0, 0, 0, 0.1)',
   '$shadow-3-left': '-4px 0px 10px 0px rgba(0, 0, 0, 0.1)',
-  '$footer-height': '3rem',
+  '$footer-height': '2.2rem',
   '$nav-height': '2rem',
 }