Add ugly things that dones't work

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>

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,32 +35,32 @@ export const ViewSelectButtonGroup = styled.div`
   margin-right: auto;
 `
 
-export const OperatorHeader = styled.div`
+export const OperatorHeader = styled(AppBar)`
   display: flex;
   justify-content: space-between;
-  height: 120px;
+  align-content: center;
+  height: 64px;
   width: 100%;
-  position: absolute;
 `
 
-export const OperatorFooter = styled.div`
+export const OperatorFooter = styled(AppBar)`
   display: flex;
   justify-content: space-between;
-  height: 140px;
-  position: absolute;
+  align-content: center;
+  height: 96px;
+  top: auto;
   bottom: 0;
   width: 100%;
 `
 
 export const OperatorButton = styled(Button)`
-  width: 100px;
-  height: 100px;
+  width: 64px;
+  height: 64px;
   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;