Improve styling

client/src/pages/views/OperatorViewPage.tsx

@@ -41,7 +41,7 @@ import {
   OperatorHeader,
   OperatorHeaderItem,
   OperatorInnerContent,
-  ToolBarContainer,
+  OperatorQuitButton,
 } from './styled'
 
 /**
@@ -246,11 +246,11 @@ const OperatorViewPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
-      <OperatorHeader color="primary" position="relative">
+      <OperatorHeader color="primary" position="fixed">
         <Tooltip title="Avsluta tävling" arrow>
-          <OperatorButton onClick={handleVerifyExit} variant="contained" color="secondary">
+          <OperatorQuitButton onClick={handleVerifyExit} variant="contained" color="secondary">
             <BackspaceIcon fontSize="small" />
-          </OperatorButton>
+          </OperatorQuitButton>
         </Tooltip>
 
         <Dialog open={openAlert} onClose={handleClose} aria-labelledby="responsive-dialog-title">
@@ -270,62 +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={{ minHeight: 64 }} /> */}
+      {<div style={{ minHeight: 64 }} />}
       <OperatorContent>
         <OperatorInnerContent>
           {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
         </OperatorInnerContent>
       </OperatorContent>
-      {/* <div style={{ minHeight: 96 }} /> */}
-      <OperatorFooter color="primary" position="fixed">
-        <ToolBarContainer>
-          <Tooltip title="Föregående sida" arrow>
-            <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="secondary">
-              <ChevronLeftIcon fontSize="small" />
-            </OperatorButton>
-          </Tooltip>
-
-          {slideTimer && (
-            <Tooltip title="Starta timer" arrow>
-              <OperatorButton
-                onClick={handleStartTimer}
-                variant="contained"
-                disabled={timer.value !== null && !timer.enabled}
-                color="secondary"
-              >
-                <TimerIcon fontSize="small" />
-                <Timer disableText />
-              </OperatorButton>
-            </Tooltip>
-          )}
+      {<div style={{ minHeight: 96 }} />}
+      <OperatorFooter position="fixed">
+        <Tooltip title="Föregående sida" arrow>
+          <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="primary">
+            <ChevronLeftIcon fontSize="small" />
+          </OperatorButton>
+        </Tooltip>
 
-          <Tooltip title="Visa ställning för publik" arrow>
-            <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained" color="secondary">
-              <AssignmentIcon fontSize="small" />
+        {slideTimer !== null && (
+          <Tooltip title="Starta timer" arrow>
+            <OperatorButton
+              onClick={handleStartTimer}
+              variant="contained"
+              disabled={timer.value !== null && !timer.enabled}
+              color="primary"
+            >
+              <TimerIcon fontSize="small" />
+              <Timer disableText />
             </OperatorButton>
           </Tooltip>
-          {showScoreboard && <Scoreboard isOperator />}
+        )}
 
-          <Tooltip title="Visa koder" arrow>
-            <OperatorButton onClick={handleOpenCodes} variant="contained" color="secondary">
-              <SupervisorAccountIcon fontSize="small" />
-            </OperatorButton>
-          </Tooltip>
+        <Tooltip title="Visa ställning för publik" arrow>
+          <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained" color="primary">
+            <AssignmentIcon fontSize="small" />
+          </OperatorButton>
+        </Tooltip>
+        {showScoreboard && <Scoreboard isOperator />}
 
-          <Tooltip title="Nästa sida" arrow>
-            <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="secondary">
-              <ChevronRightIcon fontSize="small" />
-            </OperatorButton>
-          </Tooltip>
-        </ToolBarContainer>
+        <Tooltip title="Visa koder" arrow>
+          <OperatorButton onClick={handleOpenCodes} variant="contained" color="primary">
+            <SupervisorAccountIcon fontSize="small" />
+          </OperatorButton>
+        </Tooltip>
+
+        <Tooltip title="Nästa sida" arrow>
+          <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="primary">
+            <ChevronRightIcon fontSize="small" />
+          </OperatorButton>
+        </Tooltip>
       </OperatorFooter>
 
       <Snackbar

client/src/pages/views/styled.tsx

@@ -37,25 +37,36 @@ export const ViewSelectButtonGroup = styled.div`
 
 export const OperatorHeader = styled(AppBar)`
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
-  align-content: center;
+  align-items: center;
   height: 64px;
   width: 100%;
 `
 
 export const OperatorFooter = styled(AppBar)`
+  background: white;
   display: flex;
-  justify-content: space-between;
-  align-content: center;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
   height: 96px;
   top: auto;
   bottom: 0;
   width: 100%;
 `
 
+export const OperatorQuitButton = styled(Button)`
+  min-width: 48px;
+  min-height: 48px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  margin-left: 8px;
+`
+
 export const OperatorButton = styled(Button)`
-  width: 64px;
-  height: 64px;
+  min-width: 64px;
+  min-height: 64px;
   margin-left: 16px;
   margin-right: 16px;
 `
@@ -63,7 +74,6 @@ export const OperatorButton = styled(Button)`
 export const OperatorHeaderItem = styled.div`
   margin-left: 16px;
   margin-right: 16px;
-  margin-top: 16px;
 `
 
 export const OperatorContainer = styled.div`
@@ -140,7 +150,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 - 160px) / 9) * 16);
 `
 
 export const PresentationContainer = styled.div`