Resolve "Fix editor page styling"

client/src/pages/presentationEditor/PresentationEditorPage.tsx

-import { Button, Checkbox, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core'
-import AppBar from '@material-ui/core/AppBar'
-import { CheckboxProps } from '@material-ui/core/Checkbox'
+import { Button, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core'
 import CssBaseline from '@material-ui/core/CssBaseline'
-import Drawer from '@material-ui/core/Drawer'
 import ListItemText from '@material-ui/core/ListItemText'
-import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
 import AddOutlinedIcon from '@material-ui/icons/AddOutlined'
 import axios from 'axios'
 import React, { useEffect, useState } from 'react'
@@ -13,22 +9,29 @@ import { getCities } from '../../actions/cities'
 import { getEditorCompetition, setEditorSlideId, setEditorViewId } from '../../actions/editor'
 import { getTypes } from '../../actions/typesAction'
 import { useAppDispatch, useAppSelector } from '../../hooks'
-import { RichSlide } from '../../interfaces/ApiRichModels'
 import { renderSlideIcon } from '../../utils/renderSlideIcon'
 import { RemoveMenuItem } from '../admin/styledComp'
 import { Content, InnerContent } from '../views/styled'
 import SettingsPanel from './components/SettingsPanel'
 import SlideDisplay from './components/SlideDisplay'
 import {
+  AppBarEditor,
   CenteredSpinnerContainer,
   HomeIcon,
+  LeftDrawer,
+  RightDrawer,
   PresentationEditorContainer,
   SlideList,
   SlideListItem,
   ToolBarContainer,
   ViewButton,
-  ViewButtonClicked,
   ViewButtonGroup,
+  ToolbarMargin,
+  FillLeftContainer,
+  PositionBottom,
+  FillRightContainer,
+  CompetitionName,
+  RightPanelScroll,
 } from './styled'
 
 const initialState = {
@@ -40,52 +43,11 @@ const initialState = {
 const leftDrawerWidth = 150
 const rightDrawerWidth = 390
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    appBar: {
-      width: `calc(100% - ${rightDrawerWidth}px)`,
-      marginLeft: leftDrawerWidth,
-      marginRight: rightDrawerWidth,
-    },
-    leftDrawer: {
-      width: leftDrawerWidth,
-      flexShrink: 0,
-      position: 'relative',
-      zIndex: 1,
-    },
-    rightDrawer: {
-      width: rightDrawerWidth,
-      flexShrink: 0,
-    },
-    leftDrawerPaper: {
-      width: leftDrawerWidth,
-    },
-    rightDrawerPaper: {
-      width: rightDrawerWidth,
-      background: '#EAEAEA',
-    },
-    // necessary for content to be below app bar
-    toolbar: theme.mixins.toolbar,
-    content: {
-      flexGrow: 1,
-      backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(3),
-    },
-    alignCheckboxText: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingRight: 20,
-    },
-  })
-)
-
 interface CompetitionParams {
   competitionId: string
 }
 
 const PresentationEditorPage: React.FC = () => {
-  const classes = useStyles()
   const { competitionId }: CompetitionParams = useParams()
   const dispatch = useAppDispatch()
   const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
@@ -103,7 +65,7 @@ const PresentationEditorPage: React.FC = () => {
   }
 
   const createNewSlide = async () => {
-    await axios.post(`/api/competitions/${competitionId}/slides`, { title: 'new slide' })
+    await axios.post(`/api/competitions/${competitionId}/slides`, { title: 'Ny sida' })
     dispatch(getEditorCompetition(competitionId))
   }
 
@@ -138,17 +100,6 @@ const PresentationEditorPage: React.FC = () => {
     setContextState(initialState)
   }
 
-  const GreenCheckbox = withStyles({
-    root: {
-      color: '#FFFFFF',
-      '&$checked': {
-        color: '#FFFFFF',
-      },
-    },
-    checked: {},
-  })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
-  const [checkbox, setCheckbox] = useState(false)
-
   const viewTypes = useAppSelector((state) => state.types.viewTypes)
   const [activeViewTypeName, setActiveViewTypeName] = useState('')
   const changeView = (clickedViewTypeName: string) => {
@@ -162,20 +113,16 @@ const PresentationEditorPage: React.FC = () => {
   return (
     <PresentationEditorContainer>
       <CssBaseline />
-      <AppBar position="fixed" className={classes.appBar}>
+      <AppBarEditor leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth} position="fixed">
         <ToolBarContainer>
           <Button component={Link} to="/admin/tävlingshanterare" style={{ padding: 0 }}>
             <HomeIcon src="/t8.png" />
           </Button>
-          <Typography variant="h6" noWrap>
+          <CompetitionName variant="h5" noWrap>
             {competition.name}
-          </Typography>
+          </CompetitionName>
 
           <ViewButtonGroup>
-            <GreenCheckbox checked={checkbox} onChange={(event) => setCheckbox(event.target.checked)} />
-            <Typography className={classes.alignCheckboxText} variant="button">
-              Applicera ändringar på samtliga vyer
-            </Typography>
             <ViewButton
               $activeView={activeViewTypeName === 'Audience'}
               variant="contained"
@@ -194,19 +141,11 @@ const PresentationEditorPage: React.FC = () => {
             </ViewButton>
           </ViewButtonGroup>
         </ToolBarContainer>
-      </AppBar>
-      <Drawer
-        className={classes.leftDrawer}
-        variant="permanent"
-        classes={{
-          paper: classes.leftDrawerPaper,
-        }}
-        anchor="left"
-      >
-        <div className={classes.toolbar} />
-        <Divider />
-        <SlideList>
-          <div>
+      </AppBarEditor>
+      <LeftDrawer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined} variant="permanent" anchor="left">
+        <FillLeftContainer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined}>
+          <ToolbarMargin />
+          <SlideList>
             {competition.slides &&
               competition.slides.map((slide) => (
                 <SlideListItem
@@ -221,33 +160,30 @@ const PresentationEditorPage: React.FC = () => {
                   <ListItemText primary={`Sida ${slide.order + 1}`} />
                 </SlideListItem>
               ))}
-          </div>
-          <div>
+          </SlideList>
+          <PositionBottom>
             <Divider />
             <SlideListItem divider button onClick={() => createNewSlide()}>
               <ListItemText primary="Ny sida" />
               <AddOutlinedIcon />
             </SlideListItem>
-          </div>
-        </SlideList>
-      </Drawer>
-      <div className={classes.toolbar} />
-      <Drawer
-        className={classes.rightDrawer}
-        variant="permanent"
-        classes={{
-          paper: classes.rightDrawerPaper,
-        }}
-        anchor="right"
-      >
-        {!competitionLoading ? (
-          <SettingsPanel />
-        ) : (
-          <CenteredSpinnerContainer>
-            <CircularProgress />
-          </CenteredSpinnerContainer>
-        )}
-      </Drawer>
+          </PositionBottom>
+        </FillLeftContainer>
+      </LeftDrawer>
+      <ToolbarMargin />
+      <RightDrawer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth} variant="permanent" anchor="right">
+        <FillRightContainer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth}>
+          <RightPanelScroll>
+            {!competitionLoading ? (
+              <SettingsPanel />
+            ) : (
+              <CenteredSpinnerContainer>
+                <CircularProgress />
+              </CenteredSpinnerContainer>
+            )}
+          </RightPanelScroll>
+        </FillRightContainer>
+      </RightDrawer>
 
       <Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}>
         <InnerContent>

client/src/pages/presentationEditor/styled.tsx

-import { Button, List, ListItem, Toolbar } from '@material-ui/core'
+import { AppBar, Button, Drawer, List, ListItem, Toolbar, Typography } from '@material-ui/core'
 import styled from 'styled-components'
 
+interface ViewButtonProps {
+  $activeView: boolean
+}
+
+interface DrawerSizeProps {
+  leftDrawerWidth: number | undefined
+  rightDrawerWidth: number | undefined
+}
+
+const AppBarHeight = 64
+const SlideListHeight = 60
+
 export const ToolBarContainer = styled(Toolbar)`
   display: flex;
   justify-content: space-between;
   padding-left: 0;
 `
 
-interface ViewButtonProps {
-  $activeView: boolean
-}
-
 export const ViewButton = styled(Button)<ViewButtonProps>`
   margin-right: 8px;
   background: ${(props) => (props.$activeView ? '#5a0017' : undefined)};
@@ -27,16 +35,19 @@ export const ViewButtonGroup = styled.div`
 `
 
 export const SlideList = styled(List)`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  height: calc(100% - ${SlideListHeight}px);
+  padding: 0px;
+  overflow-y: auto;
+`
+
+export const RightPanelScroll = styled(List)`
   padding: 0px;
+  overflow-y: auto;
 `
 
 export const SlideListItem = styled(ListItem)`
   text-align: center;
-  height: 60px;
+  height: ${SlideListHeight}px;
 `
 
 export const PresentationEditorContainer = styled.div`
@@ -51,5 +62,54 @@ export const CenteredSpinnerContainer = styled.div`
 `
 
 export const HomeIcon = styled.img`
-  height: 64px;
+  height: ${AppBarHeight}px;
+`
+
+export const LeftDrawer = styled(Drawer)<DrawerSizeProps>`
+  width: ${(props) => (props ? props.leftDrawerWidth : 0)}px;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+`
+
+export const RightDrawer = styled(Drawer)<DrawerSizeProps>`
+  width: ${(props) => (props ? props.rightDrawerWidth : 0)}px;
+  flex-shrink: 0;
+`
+
+export const AppBarEditor = styled(AppBar)<DrawerSizeProps>`
+  width: calc(100% - ${(props) => (props ? props.rightDrawerWidth : 0)}px);
+  left: 0;
+  margin-left: leftDrawerWidth;
+  margin-right: rightDrawerWidth;
+`
+
+// Necessary for content to be below app bar
+export const ToolbarMargin = styled.div`
+  padding-top: ${AppBarHeight}px;
+`
+
+export const FillLeftContainer = styled.div<DrawerSizeProps>`
+  width: ${(props) => (props ? props.leftDrawerWidth : 0)}px;
+  height: calc(100% - ${SlideListHeight}px);
+  overflow: hidden;
+`
+
+export const FillRightContainer = styled.div<DrawerSizeProps>`
+  width: ${(props) => (props ? props.rightDrawerWidth : 0)}px;
+  height: 100%;
+  overflow-y: auto;
+  background: #e9e9e9;
+`
+
+export const PositionBottom = styled.div`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+`
+
+export const CompetitionName = styled(Typography)`
+  text-decoration: none;
+  position: absolute;
+  left: 180px;
 `