Resolve "Styling"

Closes #188 (closed)

client/src/pages/views/OperatorViewPage.tsx

@@ -246,10 +246,10 @@ const OperatorViewPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
-      <OperatorHeader>
+      <OperatorHeader color="primary" position="relative">
         <Tooltip title="Avsluta tävling" arrow>
           <OperatorButton onClick={handleVerifyExit} variant="contained" color="secondary">
-            <BackspaceIcon fontSize="large" />
+            <BackspaceIcon fontSize="small" />
           </OperatorButton>
         </Tooltip>
 
@@ -278,18 +278,18 @@ const OperatorViewPage: React.FC = () => {
           </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>
+      {/* <div style={{ minHeight: 96 }} /> */}
+      <OperatorFooter color="primary" position="fixed">
         <ToolBarContainer>
           <Tooltip title="Föregående sida" arrow>
-            <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide}>
-              <ChevronLeftIcon fontSize="large" />
+            <OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="secondary">
+              <ChevronLeftIcon fontSize="small" />
             </OperatorButton>
           </Tooltip>
 
@@ -299,29 +299,30 @@ const OperatorViewPage: React.FC = () => {
                 onClick={handleStartTimer}
                 variant="contained"
                 disabled={timer.value !== null && !timer.enabled}
+                color="secondary"
               >
-                <TimerIcon fontSize="large" />
+                <TimerIcon fontSize="small" />
                 <Timer disableText />
               </OperatorButton>
             </Tooltip>
           )}
 
           <Tooltip title="Visa ställning för publik" arrow>
-            <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained">
-              <AssignmentIcon fontSize="large" />
+            <OperatorButton onClick={() => socketSync({ show_scoreboard: true })} variant="contained" color="secondary">
+              <AssignmentIcon fontSize="small" />
             </OperatorButton>
           </Tooltip>
           {showScoreboard && <Scoreboard isOperator />}
 
           <Tooltip title="Visa koder" arrow>
-            <OperatorButton onClick={handleOpenCodes} variant="contained">
-              <SupervisorAccountIcon fontSize="large" />
+            <OperatorButton onClick={handleOpenCodes} variant="contained" color="secondary">
+              <SupervisorAccountIcon fontSize="small" />
             </OperatorButton>
           </Tooltip>
 
           <Tooltip title="Nästa sida" arrow>
-            <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide}>
-              <ChevronRightIcon fontSize="large" />
+            <OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="secondary">
+              <ChevronRightIcon fontSize="small" />
             </OperatorButton>
           </Tooltip>
         </ToolBarContainer>