refactor(front-end): add a placeholder for the vnc preview

striker-ui/components/Display/Preview.tsx

@@ -3,8 +3,9 @@ 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 CropOriginal from '@material-ui/icons/Image';
 import { Panel } from '../Panels';
-import { BLACK, TEXT } from '../../lib/consts/DEFAULT_THEME';
+import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
 
 interface PreviewProps {
   setMode: Dispatch<SetStateAction<boolean>>;
@@ -12,8 +13,8 @@ interface PreviewProps {
 
 const useStyles = makeStyles(() => ({
   displayBox: {
-    paddingTop: '1em',
-    paddingBottom: 0,
+    padding: 0,
+    width: '100%',
   },
   fullScreenButton: {
     borderRadius: 8,
@@ -23,8 +24,18 @@ const useStyles = makeStyles(() => ({
     },
   },
   fullScreenBox: {
-    paddingLeft: '.7em',
-    paddingRight: 0,
+    paddingLeft: '1em',
+    padding: 0,
+  },
+  imageButton: {
+    padding: 0,
+    color: TEXT,
+  },
+  imageIcon: {
+    borderRadius: 8,
+    padding: 0,
+    backgroundColor: GREY,
+    fontSize: '8em',
   },
 }));
 
@@ -34,11 +45,20 @@ const Preview = ({ setMode }: PreviewProps): JSX.Element => {
   return (
     <Panel>
       <Box display="flex" className={classes.displayBox}>
+        <Box>
+          <IconButton
+            className={classes.imageButton}
+            style={{ color: BLACK }}
+            component="span"
+            onClick={() => setMode(false)}
+          >
+            <CropOriginal className={classes.imageIcon} />
+          </IconButton>
+        </Box>
         <Box className={classes.fullScreenBox}>
           <IconButton
             className={classes.fullScreenButton}
             style={{ color: BLACK }}
-            aria-label="upload picture"
             component="span"
             onClick={() => setMode(false)}
           >

striker-ui/components/Header.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
   barElement: {
     padding: 0,
   },
-  icons: {
+  iconBox: {
     [theme.breakpoints.down('sm')]: {
       display: 'none',
     },
@@ -35,6 +35,10 @@ const useStyles = makeStyles((theme) => ({
       paddingLeft: '15vw',
     },
   },
+  icons: {
+    paddingLeft: '.1em',
+    paddingRight: '.1em',
+  },
 }));
 
 const Header = (): JSX.Element => {
@@ -52,7 +56,7 @@ const Header = (): JSX.Element => {
               <img alt="" src="/pngs/logo.png" width="160" height="40" />
             </Button>
           </Box>
-          <Box className={`${classes.barElement} ${classes.icons}`}>
+          <Box className={`${classes.barElement} ${classes.iconBox}`}>
             {ICONS.map(
               (icon): JSX.Element => (
                 <a
@@ -69,6 +73,7 @@ const Header = (): JSX.Element => {
                     src={icon.image}
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...ICON_SIZE}
+                    className={classes.icons}
                   />
                 </a>
               ),

striker-ui/pages/server/index.tsx

@@ -8,7 +8,7 @@ import Header from '../../components/Header';
 
 const useStyles = makeStyles((theme) => ({
   child: {
-    width: '22%',
+    width: '18%',
     height: '100%',
     [theme.breakpoints.down('lg')]: {
       width: '25%',