Resolve "Styling"

client/src/pages/views/OperatorViewPage.tsx

@@ -16,9 +16,9 @@ import {
   Typography,
 } from '@material-ui/core'
 import AssignmentIcon from '@material-ui/icons/Assignment'
-import BackspaceIcon from '@material-ui/icons/Backspace'
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
 import ChevronRightIcon from '@material-ui/icons/ChevronRight'
+import CloseIcon from '@material-ui/icons/Close'
 import FileCopyIcon from '@material-ui/icons/FileCopy'
 import LinkIcon from '@material-ui/icons/Link'
 import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount'
@@ -41,7 +41,7 @@ import {
   OperatorHeader,
   OperatorHeaderItem,
   OperatorInnerContent,
-  ToolBarContainer,
+  OperatorQuitButton,
 } from './styled'
 
 /**
@@ -246,11 +246,11 @@ const OperatorViewPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
-      <OperatorHeader>
+      <OperatorHeader color="primary" position="fixed">
         <Tooltip title="Avsluta tävling" arrow>
-          <OperatorButton onClick={handleVerifyExit} variant="contained" color="secondary">
-            <BackspaceIcon fontSize="large" />
-          </OperatorButton>
+          <OperatorQuitButton onClick={handleVerifyExit} variant="contained" color="secondary">
+            <CloseIcon fontSize="large" />
+          </OperatorQuitButton>
         </Tooltip>
 
         <Dialog open={openAlert} onClose={handleClose} aria-labelledby="responsive-dialog-title">
@@ -270,61 +270,60 @@ const OperatorViewPage: React.FC = () => {
           </DialogActions>
         </Dialog>
         <OperatorHeaderItem>
-          <Typography variant="h3">{presentation.competition.name}</Typography>
+          <Typography variant="h4">{presentation.competition.name}</Typography>
         </OperatorHeaderItem>
         <OperatorHeaderItem>
-          <Typography variant="h3">
+          <Typography variant="h4">
             {activeSlideOrder !== undefined && activeSlideOrder + 1} / {presentation.competition.slides.length}
           </Typography>
         </OperatorHeaderItem>
       </OperatorHeader>
-      <div style={{ height: 0, paddingTop: 120 }} />
+      {<div style={{ minHeight: 64 }} />}
       <OperatorContent>
         <OperatorInnerContent>
           {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
         </OperatorInnerContent>
       </OperatorContent>
-      <div style={{ height: 0, paddingTop: 140 }} />
-      <OperatorFooter>
-        <ToolBarContainer>
-          <Tooltip title="Föregående sida" arrow>
-            <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide}>
-              <ChevronLeftIcon fontSize="large" />
-            </OperatorButton>
-          </Tooltip>
-
-          {slideTimer && (
-            <Tooltip title="Starta timer" arrow>
-              <OperatorButton
-                onClick={handleStartTimer}
-                variant="contained"
-                disabled={timer.value !== null && !timer.enabled}
-              >
-                <TimerIcon fontSize="large" />
-                <Timer disableText />
-              </OperatorButton>
-            </Tooltip>
-          )}
+      {<div style={{ minHeight: 128 }} />}
+      <OperatorFooter position="fixed">
+        <Tooltip title="Föregående sida" arrow>
+          <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="primary">
+            <ChevronLeftIcon fontSize="large" />
+          </OperatorButton>
+        </Tooltip>
 
-          <Tooltip title="Visa ställning för publik" arrow>
-            <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained">
-              <AssignmentIcon fontSize="large" />
+        {slideTimer !== null && (
+          <Tooltip title="Starta timer" arrow>
+            <OperatorButton
+              onClick={handleStartTimer}
+              variant="contained"
+              disabled={timer.value !== null && !timer.enabled}
+              color="primary"
+            >
+              <TimerIcon fontSize="large" />
+              <Timer disableText />
             </OperatorButton>
           </Tooltip>
-          {showScoreboard && <Scoreboard isOperator />}
+        )}
 
-          <Tooltip title="Visa koder" arrow>
-            <OperatorButton onClick={handleOpenCodes} variant="contained">
-              <SupervisorAccountIcon fontSize="large" />
-            </OperatorButton>
-          </Tooltip>
+        <Tooltip title="Visa ställning för publik" arrow>
+          <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained" color="primary">
+            <AssignmentIcon fontSize="large" />
+          </OperatorButton>
+        </Tooltip>
+        {showScoreboard && <Scoreboard isOperator />}
 
-          <Tooltip title="Nästa sida" arrow>
-            <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide}>
-              <ChevronRightIcon fontSize="large" />
-            </OperatorButton>
-          </Tooltip>
-        </ToolBarContainer>
+        <Tooltip title="Visa koder" arrow>
+          <OperatorButton onClick={handleOpenCodes} variant="contained" color="primary">
+            <SupervisorAccountIcon fontSize="large" />
+          </OperatorButton>
+        </Tooltip>
+
+        <Tooltip title="Nästa sida" arrow>
+          <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="primary">
+            <ChevronRightIcon fontSize="large" />
+          </OperatorButton>
+        </Tooltip>
       </OperatorFooter>
 
       <Snackbar

client/src/pages/views/TeamViewPage.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { useAppSelector } from '../../hooks'
 import { socketConnect } from '../../sockets'
 import SlideDisplay from '../presentationEditor/components/SlideDisplay'
-import { OperatorContainer, OperatorHeader, PresentationBackground, PresentationContainer } from './styled'
+import { OperatorContainer, PresentationBackground, PresentationContainer } from './styled'
 
 const TeamViewPage: React.FC = () => {
   const code = useAppSelector((state) => state.presentation.code)
@@ -28,7 +28,6 @@ const TeamViewPage: React.FC = () => {
   }, [])
   return (
     <OperatorContainer>
-      <OperatorHeader></OperatorHeader>
       <PresentationBackground>
         <PresentationContainer>
           {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}

client/src/pages/views/styled.tsx

@@ -35,35 +35,42 @@ export const ViewSelectButtonGroup = styled.div`
   margin-right: auto;
 `
 
-export const OperatorHeader = styled.div`
+export const OperatorHeader = styled(AppBar)`
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
-  height: 120px;
+  align-items: center;
+  height: 64px;
   width: 100%;
-  position: absolute;
 `
 
-export const OperatorFooter = styled.div`
+export const OperatorFooter = styled(AppBar)`
+  background: white;
   display: flex;
-  justify-content: space-between;
-  height: 140px;
-  position: absolute;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 128px;
+  top: auto;
   bottom: 0;
   width: 100%;
 `
 
+export const OperatorQuitButton = styled(Button)`
+  height: 100%;
+  padding: 0;
+`
+
 export const OperatorButton = styled(Button)`
-  width: 100px;
-  height: 100px;
+  min-width: 90px;
+  min-height: 90px;
   margin-left: 16px;
   margin-right: 16px;
-  margin-top: 16px;
 `
 
-export const OperatorHeaderItem = styled(Button)`
+export const OperatorHeaderItem = styled.div`
   margin-left: 16px;
   margin-right: 16px;
-  margin-top: 16px;
 `
 
 export const OperatorContainer = styled.div`
@@ -140,7 +147,7 @@ export const OperatorInnerContent = styled.div`
   width: 100%;
   /* Makes sure width is not bigger than where a 16:9 display can fit 
   without overlapping with header and footer */
-  max-width: calc(((100vh - 260px) / 9) * 16);
+  max-width: calc(((100vh - 192px) / 9) * 16);
 `
 
 export const PresentationContainer = styled.div`