From 3681f7bab5cc4bed7da91356c8ff4b673371ebd6 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Thu, 25 Mar 2021 15:38:20 +0100
Subject: [PATCH] style + ui changes

---
 src/common/components/countdown/Countdown.jsx |  13 +-
 .../components/countdown/Countdown.module.css |   6 +-
 .../myProgressBar/MyProgressBar.module.css    |   4 +-
 src/common/input/TimeInput.jsx                |  61 ++++-----
 src/common/input/timeInput.css                | 122 ++++++++++++++++++
 src/features/control/PlaybackControl.jsx      | 102 +++++++++++++--
 src/features/editors/Editor.jsx               |  42 +++---
 src/features/editors/Editor.module.css        |  17 ++-
 src/features/editors/list/EventList.jsx       |   7 +-
 src/features/editors/list/EventListItem.jsx   |  22 +++-
 src/features/editors/list/listUtils.js        |   7 +
 src/features/form/EventForm.jsx               |  31 +++--
 src/features/viewers/PreviewContainer.jsx     |  21 +--
 .../viewers/PreviewContainer.module.css       |   9 +-
 src/features/viewers/viewers.css              |   8 +-
 15 files changed, 358 insertions(+), 114 deletions(-)
 create mode 100644 src/common/input/timeInput.css

diff --git a/src/common/components/countdown/Countdown.jsx b/src/common/components/countdown/Countdown.jsx
index d1665348c..6733b38a7 100644
--- a/src/common/components/countdown/Countdown.jsx
+++ b/src/common/components/countdown/Countdown.jsx
@@ -13,11 +13,18 @@ function display(seconds) {
 export default function Countdown({ time, small }) {
   const [counter, setCounter] = useState(time);
 
+  useEffect(() => {
+    console.log('setting time here');
+    setCounter(time);
+  }, [time]);
+
   useEffect(() => {
     counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
   }, [counter]);
 
-  return <div
-  className={small ? styles.countdownClockSmall : styles.countdownClock}
-  >{display(counter)}</div>;
+  return (
+    <div className={small ? styles.countdownClockSmall : styles.countdownClock}>
+      {display(counter)}
+    </div>
+  );
 }
diff --git a/src/common/components/countdown/Countdown.module.css b/src/common/components/countdown/Countdown.module.css
index 4a9db03b0..70823b122 100644
--- a/src/common/components/countdown/Countdown.module.css
+++ b/src/common/components/countdown/Countdown.module.css
@@ -14,6 +14,8 @@
   font-family: 'Open Sans', sans-serif;
   font-size: 6em;
   text-align: center;
-  letter-spacing: 0.125em;
+  letter-spacing: 0.1em;
   line-height: 0.9;
-}
\ No newline at end of file
+  font-weight: 600;
+  color: #333;
+}
diff --git a/src/common/components/myProgressBar/MyProgressBar.module.css b/src/common/components/myProgressBar/MyProgressBar.module.css
index 0fbab629f..f73c6f2e1 100644
--- a/src/common/components/myProgressBar/MyProgressBar.module.css
+++ b/src/common/components/myProgressBar/MyProgressBar.module.css
@@ -1,5 +1,5 @@
 .progress {
-  padding: 6px;
+  padding: 1vh;
   width: 90%;
   margin: 0 auto;
   background: rgba(0, 0, 0, 0.25);
@@ -8,7 +8,7 @@
 }
 
 .progressBar {
-  height: 18px;
+  height: 2vh;
   background: linear-gradient(
     90deg,
     rgb(145, 255, 191, 1) 0%,
diff --git a/src/common/input/TimeInput.jsx b/src/common/input/TimeInput.jsx
index 09037156a..2edd9dc17 100644
--- a/src/common/input/TimeInput.jsx
+++ b/src/common/input/TimeInput.jsx
@@ -1,35 +1,36 @@
-import { Text } from '@chakra-ui/layout';
-import {
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-} from '@chakra-ui/number-input';
-import styles from './TimeInput.module.css';
+import { FormErrorMessage } from '@chakra-ui/form-control';
+import { FormLabel } from '@chakra-ui/form-control';
+import { FormControl } from '@chakra-ui/form-control';
+import DatePicker from 'react-datepicker';
+import { Field } from 'formik';
+import 'react-datepicker/dist/react-datepicker.css';
+import './timeInput.css';
 
 export default function TimeInput(props) {
+  const { label, name, ...rest } = props;
   return (
-    <div className={styles.container}>
-      <Text className={styles.label}>{props.label}</Text>
-      <Text className={styles.label}>hour / min</Text>
-      <div className={styles.timeInput}>
-        <NumberInput min={0} max={24} maxW={20} allowMouseWheel>
-          <NumberInputField />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-        <div className={styles.spacer} />
-        <NumberInput min={0} max={59} maxW={20} allowMouseWheel>
-          <NumberInputField />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-      </div>
-    </div>
+    <Field name={name}>
+      {({ field, form }) => {
+        const { setFieldValue } = form;
+        const { value } = field;
+        return (
+          <FormControl isInvalid={form.errors[name] && form.touched[name]}>
+            <FormLabel htmlFor={name}>{label}</FormLabel>
+            <DatePicker
+              id={name}
+              {...field}
+              {...rest}
+              showTimeSelect
+              showTimeSelectOnly
+              timeIntervals={15}
+              dateFormat='hh:mm'
+              selected={value}
+              onChange={(val) => setFieldValue(name, val)}
+            />
+            <FormErrorMessage>{form.errors[name]}</FormErrorMessage>
+          </FormControl>
+        );
+      }}
+    </Field>
   );
 }
diff --git a/src/common/input/timeInput.css b/src/common/input/timeInput.css
new file mode 100644
index 000000000..a3804360a
--- /dev/null
+++ b/src/common/input/timeInput.css
@@ -0,0 +1,122 @@
+.react-datepicker {
+  font-family: unset;
+  font-size: 0.9rem;
+}
+
+.react-datepicker-wrapper,
+.react-datepicker__input-container {
+  display: block;
+}
+
+.react-datepicker-popper {
+  background-color: white;
+}
+.react-datepicker__input-container {
+  font-size: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+  border: 1px solid;
+  border-color: hsl(0,0%,80%);
+}
+
+.react-datepicker__input-container:hover {
+  border-color: hsl(0,0%,70%);
+}
+.react-datepicker__input-container:focus-within {
+  z-index: 1;
+  border-color: #3182ce;
+  box-shadow: 0 0 0 1px #3182ce;
+}
+
+.react-datepicker__input-container > input {
+  width: 100%;
+  height: 100%;
+  outline: 0;
+}
+
+.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
+  right: 90px;
+}
+
+.react-datepicker__navigation--previous,
+.react-datepicker__navigation--next {
+  height: 8px;
+}
+
+.react-datepicker__navigation--previous {
+  border-right-color: #cbd5e0;
+}
+
+.react-datepicker__navigation--previous:hover {
+  border-right-color: #a0aec0;
+}
+
+.react-datepicker__navigation--next {
+  border-left-color: #cbd5e0;
+
+}
+
+.react-datepicker__navigation--next:hover {
+  border-left-color: #a0aec0;
+}
+
+.react-datepicker__header {
+  background: #f7fafc;
+}
+
+.react-datepicker__header,
+.react-datepicker__time-container {
+  border-color: #E2E8F0;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+  font-size: inherit;
+  font-weight: 600;
+}
+
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
+  margin: 0 1px 0 0;
+  height: auto;
+  padding: 7px 10px;
+}
+
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
+  background: #edf2f7;
+}
+
+.react-datepicker__day:hover {
+  background: #edf2f7;
+}
+
+.react-datepicker__day--selected,
+.react-datepicker__day--in-selecting-range,
+.react-datepicker__day--in-range,
+.react-datepicker__month-text--selected,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
+  background: #3182ce;
+  font-weight: normal;
+}
+
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
+  background: #2a69ac;
+}
+
+.react-datepicker__close-icon::after {
+  background-color: unset;
+  border-radius: unset;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: hsl(0,0%,80%);
+  height: 20px;
+  width: 20px;
+}
+
+.react-datepicker__close-icon::after:hover {
+  color: hsl(0,0%,70%)
+}
\ No newline at end of file
diff --git a/src/features/control/PlaybackControl.jsx b/src/features/control/PlaybackControl.jsx
index 96bcd0d71..6be4f3cd0 100644
--- a/src/features/control/PlaybackControl.jsx
+++ b/src/features/control/PlaybackControl.jsx
@@ -1,47 +1,123 @@
 import { Button } from '@chakra-ui/button';
 import style from './PlaybackControl.module.css';
 import Countdown from '../../common/components/countdown/Countdown';
+import { useState } from 'react';
+import { clamp } from '../../app/utils';
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
 
 export default function PlaybackControl() {
+  const [time, setTime] = useState(15);
+  const [roll, setRoll] = useState(false);
+
+  const incrementTimer = (amount = 1) => {
+    const t = clamp(time + amount * 60, 0, 3600);
+    setTime(t);
+  };
+
+  const defProps = {
+    colorScheme: 'blackAlpha',
+    variant: 'outline',
+  };
+
+  const smallSize = 50;
+  const midSize = 100;
+  const bigSize = 120;
+
   return (
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
         <div className={style.timer}>
-          <Countdown time={15} small />
+          <Countdown time={time} small />
         </div>
-        <Button width={50} colorScheme='blackAlpha' className={style.minu1}>
+        {/* <Button
+          width={smallSize}
+          {...defProps}
+          className={style.minu1}
+          disabled={roll}
+          onClick={() => incrementTimer(-1)}
+        >
           -1
         </Button>
-        <Button width={50} colorScheme='blackAlpha' className={style.plus1}>
+        <Button
+          width={smallSize}
+          {...defProps}
+          className={style.plus1}
+          disabled={roll}
+          onClick={() => incrementTimer()}
+        >
           +1
         </Button>
-        <Button width={50} colorScheme='blackAlpha' className={style.minu5}>
+        <Button
+          width={smallSize}
+          {...defProps}
+          className={style.minu5}
+          disabled={roll}
+          onClick={() => incrementTimer(5)}
+        >
           -5
         </Button>
-        <Button width={50} colorScheme='blackAlpha' className={style.plus5}>
+        <Button
+          width={smallSize}
+          {...defProps}
+          className={style.plus5}
+          disabled={roll}
+          onClick={() => incrementTimer(5)}
+        >
           +5
-        </Button>
+        </Button> */}
       </div>
 
       <div className={style.playbackContainer}>
-        <Button width={120} colorScheme='green' className={style.start}>
+        <Button
+          width={bigSize}
+          colorScheme='green'
+          className={style.start}
+          disabled={roll}
+        >
           Start
         </Button>
-        <Button width={120} colorScheme='orange' className={style.pause}>
+        <Button
+          width={bigSize}
+          colorScheme='orange'
+          className={style.pause}
+          disabled={roll}
+        >
           Pause
         </Button>
-        <Button width={120} colorScheme='yellow' className={style.reset}>
+        {/* <Button
+          width={bigSize}
+          colorScheme='yellow'
+          className={style.reset}
+          disabled={roll}
+        >
           Reset
-        </Button>
+        </Button> */}
       </div>
       <div className={style.trackContainer}>
-        <Button width={100} colorScheme='blackAlpha' className={style.prev}>
+        <Button
+          width={bigSize}
+          {...defProps}
+          leftIcon={<ArrowBackIcon />}
+          className={style.prev}
+          disabled={roll}
+        >
           Prev
         </Button>
-        <Button width={100} colorScheme='blackAlpha' className={style.next}>
+        <Button
+          width={bigSize}
+          {...defProps}
+          rightIcon={<ArrowForwardIcon />}
+          className={style.next}
+          disabled={roll}
+        >
           Next
         </Button>
-        <Button width={100} colorScheme='blackAlpha' className={style.reset}>
+        <Button
+          width={bigSize}
+          colorScheme='blue'
+          className={style.reset}
+          onClick={() => setRoll(!roll)}
+        >
           Roll
         </Button>
       </div>
diff --git a/src/features/editors/Editor.jsx b/src/features/editors/Editor.jsx
index 5edd0d050..bdf0ddad1 100644
--- a/src/features/editors/Editor.jsx
+++ b/src/features/editors/Editor.jsx
@@ -27,17 +27,17 @@ export default function Editor() {
 
   return (
     <Grid
-      templateRows='60% 40%'
-      templateColumns='repeat(3, 1fr)'
+      templateRows='1fr 1fr 1fr'
+      templateColumns='1fr 25vw 25vw 5vw'
       gap={5}
       className={styles.mainContainer}
     >
-      <GridItem rowSpan={2} colSpan={1}>
+      <GridItem rowSpan={3}>
         <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading>
+          <Heading style={{ paddingBottom: '0.25em' }}>Event List</Heading>
           <NumberedText
             number={1}
-            text={'Select event or click Add Event to create new'}
+            text={'Manage and select event to run'}
           />
           <div className={styles.cornerButtonContainer}>
             <Button
@@ -57,43 +57,37 @@ export default function Editor() {
         </Box>
       </GridItem>
 
-      <GridItem colStart={2} rowSpan={1} colSpan={1}>
-        <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Event Details</Heading>
-          <NumberedText number={2} text={'Edit event info'} />
-          <div className={styles.content}>
-            <EventForm formMode={formMode} setFormMode={setFormMode} />
-          </div>
-        </Box>
-      </GridItem>
-
-      <GridItem colStart={3} rowStart={1} rowSpan={1} colSpan={1}>
+      <GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
         <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Screens</Heading>
-          <NumberedText number={3} text={'Preview layout'} />
+          <Heading style={{ paddingBottom: '0.25em' }}>Preview Displays</Heading>
+          <NumberedText number={4} text={'Realtime screen preview'} />
           <div className={styles.content}>
-            {/* <PreviewContainer data={selectedData} /> */}
+            <PreviewContainer />
           </div>
         </Box>
       </GridItem>
 
-      <GridItem colStart={2} rowStart={2} rowSpan={1} colSpan={1}>
+      <GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
         <Box className={styles.editor} borderRadius='0.5em'>
-          <Heading style={{ paddingBottom: '0.25em' }}>Screen Messages</Heading>
-          <NumberedText number={3} text={'Show / Hide messages on screens'} />
+          <Heading style={{ paddingBottom: '0.25em' }}>Display Messages</Heading>
+          <NumberedText number={2} text={'Show realtime messages on separate screen types'} />
           <div className={styles.content}></div>
           <MessageForm />
         </Box>
       </GridItem>
 
-      <GridItem colStart={3} rowStart={2} rowSpan={1} colSpan={1}>
+      <GridItem colStart={3} rowStart={1}>
         <Box className={styles.editor} borderRadius='0.5em'>
           <Heading style={{ paddingBottom: '0.25em' }}>Time Control</Heading>
-          <NumberedText number={0} text={'Control Timer'} />
+          <NumberedText number={3} text={'Control Timer'} />
           <div className={styles.content}></div>
           <PlaybackControl />
         </Box>
       </GridItem>
+
+      <GridItem colStart={4} rowSpan={3}>
+        <Box className={styles.editor} borderRadius='0.5em'>S</Box>
+      </GridItem>
     </Grid>
   );
 }
diff --git a/src/features/editors/Editor.module.css b/src/features/editors/Editor.module.css
index 15040d3db..6501966d7 100644
--- a/src/features/editors/Editor.module.css
+++ b/src/features/editors/Editor.module.css
@@ -6,20 +6,27 @@
 
 .editor {
   height: 100%;
-  margin-top: 2.5vh;
+  margin-top: 1.5vh;
   background-color: #fcfcfa;
-  padding: 2em;
+  padding: 1em 1.5em;
 
   display: flex;
   flex-direction: column;
 }
 
 .content {
-  padding-top: 2em;
+  padding-top: 1.5em;
 }
 
-.buttonContainer {
-  padding-top: 2em;
+.cornerButtonContainer {
+  position: relative;
+  top: -4.5em;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.buttonContainer {
+  padding-bottom: 2em;
   display: flex;
   justify-content: flex-end;
 }
diff --git a/src/features/editors/list/EventList.jsx b/src/features/editors/list/EventList.jsx
index 7ee15f2b3..0f7186a86 100644
--- a/src/features/editors/list/EventList.jsx
+++ b/src/features/editors/list/EventList.jsx
@@ -3,10 +3,10 @@ import { useContext } from 'react';
 import { EventContext } from '../../../app/context/eventContext';
 import { EventListContext } from '../../../app/context/eventListContext';
 import EventListItem from './EventListItem';
-import { sortByDate } from './listUtils';
+import { sortByDate, sortByNumber } from './listUtils';
 
 export default function EventList(props) {
-  const [events, ] = useContext(EventListContext);
+  const [events] = useContext(EventListContext);
   const [event, setEvent] = useContext(EventContext);
 
   const handleSetSelected = (id) => {
@@ -21,6 +21,7 @@ export default function EventList(props) {
       <Thead>
         <Tr>
           <Th>Event Title</Th>
+          <Th>Event Subtitle</Th>
           <Th>Presenter Name</Th>
           <Th>Time Start</Th>
           <Th>Time End</Th>
@@ -28,7 +29,7 @@ export default function EventList(props) {
         </Tr>
       </Thead>
       <Tbody>
-        {sortByDate(events).map((e) => (
+        {sortByNumber(events).map((e) => (
           <EventListItem
             key={e.id}
             data={e}
diff --git a/src/features/editors/list/EventListItem.jsx b/src/features/editors/list/EventListItem.jsx
index 400178134..2875a8268 100644
--- a/src/features/editors/list/EventListItem.jsx
+++ b/src/features/editors/list/EventListItem.jsx
@@ -2,10 +2,11 @@ import { IconButton } from '@chakra-ui/button';
 import { Td, Tr } from '@chakra-ui/table';
 import { format } from 'date-fns';
 import { timeFormat } from '../../../common/dateConfig';
-import { ChevronRightIcon } from '@chakra-ui/icons';
+import { LockIcon, ChevronRightIcon } from '@chakra-ui/icons';
 
 export default function EventListItem(props) {
   const isSelected = props.selectedId === props.data.id;
+  console.log(props);
   return (
     <Tr
       style={
@@ -15,9 +16,24 @@ export default function EventListItem(props) {
       }
     >
       <Td>{props.data.title}</Td>
+      <Td>{props.data.subtitle}</Td>
       <Td>{props.data.presenter}</Td>
-      <Td>{format(props.data.timeStart, timeFormat)}</Td>
-      <Td>{format(props.data.timeEnd, timeFormat)}</Td>
+      <Td>
+        {props.data.timeStart && format(props.data.timeStart, timeFormat)}
+      </Td>
+      <Td>{props.data?.timeEnd && format(props.data?.timeEnd, timeFormat)}</Td>{' '}
+      <Td>{props.data?.timerDuration}</Td>
+      <Td>
+        <IconButton
+          colorScheme='teal'
+          variant={isSelected ? 'solid' : 'outline'}
+          onClick={() => props.setSelected(props.data.id)}
+          disabled={props.disabled}
+          size='sm'
+          aria-label='Select Item'
+          icon={<LockIcon />}
+        />
+      </Td>
       <Td>
         <IconButton
           colorScheme='teal'
diff --git a/src/features/editors/list/listUtils.js b/src/features/editors/list/listUtils.js
index 9b00a8f68..80a766c77 100644
--- a/src/features/editors/list/listUtils.js
+++ b/src/features/editors/list/listUtils.js
@@ -4,3 +4,10 @@ export const sortByDate = (arr) => {
   };
   return arr.sort(sorter);
 };
+
+export const sortByNumber = (arr) => {
+  const sorter = (a, b) => {
+    return a.order - b.order;
+  };
+  return arr.sort(sorter);
+};
diff --git a/src/features/form/EventForm.jsx b/src/features/form/EventForm.jsx
index cd167f3d8..bde9f3526 100644
--- a/src/features/form/EventForm.jsx
+++ b/src/features/form/EventForm.jsx
@@ -12,6 +12,8 @@ import styles from './EventForm.module.css';
 import 'react-datepicker/dist/react-datepicker-cssmodules.css';
 import ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
+import { Wrap } from '@chakra-ui/layout';
+import { Flex } from '@chakra-ui/layout';
 
 const sampleInitialValues = {
   title: '',
@@ -103,16 +105,19 @@ export default function EventForm(props) {
               label='Event Title'
               placeholder='eg. Is the Internet a fad?'
             />
-            <ChakraInput
-              name='subtitle'
-              label='Event Subtitle'
-              placeholder='eg. After tea thoughts'
-            />
-            <ChakraInput
-              name='presenter'
-              label='Presenter Name'
-              placeholder='eg. Duran Duran'
-            />
+            <Flex direction='row'>
+              <ChakraInput
+                name='subtitle'
+                label='Event Subtitle'
+                placeholder='eg. After tea thoughts'
+              />
+              <ChakraInput
+                name='presenter'
+                label='Presenter Name'
+                placeholder='eg. Duran Duran'
+              />
+            </Flex>
+
             {/* <TimeInput name='timeStart' label='Scheduled Start' /> */}
             <ChakraNumberInput
               name='timerDuration'
@@ -123,7 +128,11 @@ export default function EventForm(props) {
               maxW={24}
             />
 
-            <DatePicker />
+            <Flex direction='row'>
+              <TimeInput name='timeStart' label='Scheduled Start' />
+              <TimeInput name='timeEnd' label='Scheduled End' />
+            </Flex>
+
             <div className={styles.buttons}>
               <Button
                 variant='outline'
diff --git a/src/features/viewers/PreviewContainer.jsx b/src/features/viewers/PreviewContainer.jsx
index 699b59bbe..fa56c8993 100644
--- a/src/features/viewers/PreviewContainer.jsx
+++ b/src/features/viewers/PreviewContainer.jsx
@@ -6,24 +6,27 @@ export default function PreviewContainer() {
   return (
     <div className={styles.previewContainer}>
       <div className={styles.previewItem}>
-        <div className={styles.preview}>
-          <AspectRatio maxW='250' ratio={16/10}>
-            <iframe src='http://localhost:3000/'></iframe>
-          </AspectRatio>
-          {/* <DefaultPresenter data={props.data} /> */}
-        </div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Default Presenter</div>
       </div>
       <div className={styles.previewItem}>
-        <div className={styles.preview}></div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Audience</div>
       </div>
       <div className={styles.previewItem}>
-        <div className={styles.preview}></div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Stage Manager</div>
       </div>
       <div className={styles.previewItem}>
-        <div className={styles.preview}></div>
+        <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
+          <iframe src='http://localhost:3000/'></iframe>
+        </AspectRatio>
         <div className={styles.label}>Lower third</div>
       </div>
     </div>
diff --git a/src/features/viewers/PreviewContainer.module.css b/src/features/viewers/PreviewContainer.module.css
index 7ff416608..4415aef3c 100644
--- a/src/features/viewers/PreviewContainer.module.css
+++ b/src/features/viewers/PreviewContainer.module.css
@@ -3,19 +3,18 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
+  align-content: center;
   gap: 1em;
 }
 
 .previewItem {
-  width: 47%;
+  width: 45%;
 }
 
 .preview {
-  aspect-ratio: 16 / 9;
-  border-color: #222;
-  background-color: #888;
+  margin: auto;
 }
 
 .label {
-  padding: 0.1em;
+  padding: 0.1em 4em;
 }
diff --git a/src/features/viewers/viewers.css b/src/features/viewers/viewers.css
index 8e1c17ef3..820096bed 100644
--- a/src/features/viewers/viewers.css
+++ b/src/features/viewers/viewers.css
@@ -1,12 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
 
 .presenter {
-  font-size: 24px;
+  font-size: 1vh;
   height: 100%;
   color: #ffffff;
   display: flex;
   flex-direction: column;
-  padding: 1em;
+  padding-left: 4vh;
 }
 
 .presentationTitle {
@@ -20,7 +20,7 @@
 }
 
 .userMessage {
-  font-size: 10em;
+  font-size: 10vw;
   text-align: center;
 }
 
@@ -38,4 +38,4 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
-}
\ No newline at end of file
+}