From 2dd5052a4e6d6e608a1c0b4b675b1ed6be54c880 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Victor=20L=C3=B6fgren?= <viclo211@student.liu.se>
Date: Mon, 17 May 2021 17:21:18 +0200
Subject: [PATCH] Add ugly things that dones't work

---
 client/src/pages/views/OperatorViewPage.tsx | 29 +++++++++++----------
 client/src/pages/views/TeamViewPage.tsx     |  3 +--
 client/src/pages/views/styled.tsx           | 20 +++++++-------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/views/OperatorViewPage.tsx b/client/src/pages/views/OperatorViewPage.tsx
index d99def17..efd28001 100644
--- a/client/src/pages/views/OperatorViewPage.tsx
+++ b/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>
diff --git a/client/src/pages/views/TeamViewPage.tsx b/client/src/pages/views/TeamViewPage.tsx
index eb9cb5e6..540bc33c 100644
--- a/client/src/pages/views/TeamViewPage.tsx
+++ b/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} />}
diff --git a/client/src/pages/views/styled.tsx b/client/src/pages/views/styled.tsx
index 3fe60445..a80e3a8f 100644
--- a/client/src/pages/views/styled.tsx
+++ b/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;
-- 
GitLab