Scale slide and time left text

client/src/pages/presentationEditor/components/SlideDisplay.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from '../../../hooks'
 import PresentationComponent from '../../views/components/PresentationComponent'
 import Timer from '../../views/components/Timer'
 import RndComponent from './RndComponent'
-import { Center, SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
+import { Center, SlideDisplayText, SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } from './styled'
 
 type SlideDisplayProps = {
   //Prop to distinguish between editor and active competition
@@ -59,13 +59,13 @@ const SlideDisplay = ({ variant, activeViewTypeId, currentSlideId }: SlideDispla
     <SlideEditorContainer>
       <SlideEditorContainerRatio>
         <SlideEditorPaper ref={editorPaperRef}>
-          <Typography variant="h3" style={{ position: 'absolute', left: 5, top: 5 }}>
-            {variant === 'editor' && `Tid kvar: ${slide?.timer}`}
+          <SlideDisplayText scale={scale}>
+            {variant === 'editor' && slide?.timer ? `Tid kvar: ${slide?.timer}` : ''}
             {variant === 'presentation' && <Timer />}
-          </Typography>
-          <Typography variant="h3" style={{ position: 'absolute', right: 5, top: 5 }}>
+          </SlideDisplayText>
+          <SlideDisplayText scale={scale} right>
             {slide && `Sida: ${slide?.order + 1} / ${totalSlides}`}
-          </Typography>
+          </SlideDisplayText>
           {(competitionBackgroundImage || slideBackgroundImage) && (
             <img
               src={`/static/images/${

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

@@ -145,3 +145,16 @@ export const QuestionComponent = styled.div`
 export const SettingsItemContainer = styled.div`
   padding: 5px;
 `
+
+interface SlideDisplayTextProps {
+  scale: number
+  right?: boolean
+}
+
+export const SlideDisplayText = styled(Typography)<SlideDisplayTextProps>`
+  position: absolute;
+  top: 5px;
+  left: ${(props) => (props.right ? undefined : 5)}px;
+  right: ${(props) => (props.right ? 5 : undefined)}px;
+  font-size: ${(props) => 24 * props.scale}px;
+`