refactor(front-end): add placeholder for preview image and button to switch to full display mode

striker-ui/components/Display/Preview.tsx

@@ -1,20 +1,57 @@
-import VncDisplay from 'react-vnc-display';
+import { Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+import { Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows';
 import { Panel } from '../Panels';
-import { HeaderText } from '../Text';
+import { BLACK, TEXT } from '../../lib/consts/DEFAULT_THEME';
+
+interface PreviewProps {
+  setMode: Dispatch<SetStateAction<boolean>>;
+}
+
+const useStyles = makeStyles(() => ({
+  displayBox: {
+    paddingTop: '1em',
+    paddingBottom: 0,
+  },
+  fullScreenButton: {
+    borderRadius: 8,
+    backgroundColor: TEXT,
+    '&:hover': {
+      backgroundColor: TEXT,
+    },
+  },
+  fullScreenBox: {
+    paddingLeft: '.7em',
+    paddingRight: 0,
+  },
+}));
+
+const Preview = ({ setMode }: PreviewProps): JSX.Element => {
+  const classes = useStyles();
 
-const Display = (): JSX.Element => {
   return (
     <Panel>
-      <HeaderText text="Display" />
+      <Box display="flex" className={classes.displayBox}>
-      <VncDisplay
+        <Box flexGrow={1}>
-        url="wss://spain.cdot.systems:5000/"
+          <Image src="/pngs/preview.png" width={300} height={200} />
-        style={{
+        </Box>
-          width: '50vw',
+        <Box className={classes.fullScreenBox}>
-          height: '70vh',
+          <IconButton
-        }}
+            className={classes.fullScreenButton}
-      />
+            style={{ color: BLACK }}
+            aria-label="upload picture"
+            component="span"
+            onClick={() => setMode(false)}
+          >
+            <DesktopWindowsIcon />
+          </IconButton>
+        </Box>
+      </Box>
     </Panel>
   );
 };
 
-export default Display;
+export default Preview;