diff --git a/striker-ui/pages/server/index.tsx b/striker-ui/pages/server/index.tsx index b9dc9723..6d2bee1f 100644 --- a/striker-ui/pages/server/index.tsx +++ b/striker-ui/pages/server/index.tsx @@ -1,21 +1,29 @@ import { useState } from 'react'; import { useRouter } from 'next/router'; import Head from 'next/head'; -import { Box } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import { Box } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { FullSize, Preview } from '../../components/Display'; import Header from '../../components/Header'; -const useStyles = makeStyles((theme) => ({ - preview: { +const PREFIX = 'Server'; + +const classes = { + preview: `${PREFIX}-preview`, + fullView: `${PREFIX}-fullView`, +}; + +const StyledDiv = styled('div')(({ theme }) => ({ + [`& .${classes.preview}`]: { width: '25%', height: '100%', [theme.breakpoints.down('md')]: { width: '100%', }, }, - fullView: { + + [`& .${classes.fullView}`]: { display: 'flex', flexDirection: 'row', width: '100%', @@ -25,13 +33,12 @@ const useStyles = makeStyles((theme) => ({ const Server = (): JSX.Element => { const [previewMode, setPreviewMode] = useState(true); - const classes = useStyles(); const router = useRouter(); const { uuid, server_name } = router.query; return ( - <> + {server_name} @@ -54,7 +61,7 @@ const Server = (): JSX.Element => { /> ))} - + ); };