Improve correcting instructions

client/src/pages/presentationEditor/components/slideSettingsComponents/Instructions.tsx

@@ -54,6 +54,7 @@ const Instructions = ({ activeSlide, competitionId }: InstructionsProps) => {
       <ListItem divider>
         <Center>
           <TextField
+            multiline
             id="outlined-basic"
             defaultValue={activeSlide.questions[0].correcting_instructions}
             onChange={updateInstructionsText}

client/src/pages/views/components/JudgeScoringInstructions.tsx

-import { Box, Card, Typography } from '@material-ui/core'
-import axios from 'axios'
+import { Typography } from '@material-ui/core'
 import React from 'react'
-import { getPresentationCompetition } from '../../../actions/presentation'
-import { useAppDispatch, useAppSelector } from '../../../hooks'
 import { RichQuestion } from '../../../interfaces/ApiRichModels'
-import {
-  AnswerContainer,
-  JudgeScoringInstructionsContainer,
-  ScoreDisplayContainer,
-  ScoreDisplayHeader,
-  ScoreInput,
-} from './styled'
+import { JudgeScoringInstructionsContainer, ScoringInstructionsInner } from './styled'
 
 type JudgeScoringInstructionsProps = {
   question: RichQuestion
 }
 
 const JudgeScoringInstructions = ({ question }: JudgeScoringInstructionsProps) => {
+  console.log(question)
   return (
     <JudgeScoringInstructionsContainer elevation={3}>
-      <Typography variant="h4">Rättningsinstruktioner</Typography>
-      <Typography variant="body1">{question?.correcting_instructions}</Typography>
+      <ScoringInstructionsInner>
+        <Typography variant="h4">Rättningsinstruktioner</Typography>
+        <Typography variant="body1">
+          {question?.correcting_instructions !== null
+            ? question?.correcting_instructions
+            : 'Det finns inga rättningsinstruktioner för denna fråga'}
+        </Typography>
+      </ScoringInstructionsInner>
     </JudgeScoringInstructionsContainer>
   )
 }

client/src/pages/views/components/styled.tsx

-import { Card, Paper, TextField } from '@material-ui/core'
+import { Paper, TextField } from '@material-ui/core'
 import styled from 'styled-components'
 
 export const SlideContainer = styled.div`
@@ -38,6 +38,11 @@ export const JudgeScoringInstructionsContainer = styled(Paper)`
   bottom: 0;
   height: 250px;
   width: 100%;
+`
+
+export const ScoringInstructionsInner = styled.div`
+  margin-left: 15px;
+  margin-right: 15px;
   display: flex;
   align-items: center;
   flex-direction: column;