diff --git a/striker-ui/components/Display/Preview.tsx b/striker-ui/components/Display/Preview.tsx index 6b4ea22b..0b2e6a30 100644 --- a/striker-ui/components/Display/Preview.tsx +++ b/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>; @@ -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 ( + + setMode(false)} + > + + + setMode(false)} > diff --git a/striker-ui/components/Header.tsx b/striker-ui/components/Header.tsx index 05db2909..79d492d2 100644 --- a/striker-ui/components/Header.tsx +++ b/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 => { - + {ICONS.map( (icon): JSX.Element => ( { src={icon.image} // eslint-disable-next-line react/jsx-props-no-spreading {...ICON_SIZE} + className={classes.icons} /> ), diff --git a/striker-ui/pages/server/index.tsx b/striker-ui/pages/server/index.tsx index dde4121a..1aa79a3d 100644 --- a/striker-ui/pages/server/index.tsx +++ b/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%',