From c857c40fbd0ee5c90ec101e3f3a19b099370d3c2 Mon Sep 17 00:00:00 2001 From: qt-coder Date: Fri, 25 Jun 2021 08:07:36 +0800 Subject: [PATCH] Added some margin to home page card grid --- components/Card.js | 2 +- pages/controlpanel/commands.js | 144 ++++++++++++++++----------------- styles/globals.css | 1 + 3 files changed, 74 insertions(+), 73 deletions(-) diff --git a/components/Card.js b/components/Card.js index 3ea7713..61d5f96 100644 --- a/components/Card.js +++ b/components/Card.js @@ -4,7 +4,7 @@ import Link from 'next/link' const useStyles = makeStyles({ homeCard: { - width: '350px', + width: '300px', height: '150px', background: '#1f1b24', margin: '10px', diff --git a/pages/controlpanel/commands.js b/pages/controlpanel/commands.js index 8605bd5..c160ac2 100644 --- a/pages/controlpanel/commands.js +++ b/pages/controlpanel/commands.js @@ -1,72 +1,72 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableContainer from '@material-ui/core/TableContainer'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import Paper from '@material-ui/core/Paper'; -import Head from 'next/head' -import { useSession } from 'next-auth/client' - -const useStyles = makeStyles({ - table: { - minWidth: 650, - }, -}); - -function createData(name, description, status) { - return { name, description, status }; -} - -const rows = [ - createData('Command', 'Description', true), - createData('Command', 'Description', true), - createData('Command', 'Description', true), - createData('Command', 'Description', true), -]; - -function Commands() { - const [session, loading] = useSession() - const classes = useStyles(); - - return ( - <> - {session && - <> - - Cath Commands - - - - - - Commands - Description - Status - - - - {rows.map((row) => ( - - - {row.name} - - {row.description} - {row.status ? 'Online' : 'Offline'} - - ))} - -
- - - } {!session && <> -

Seems like you're not logged in. Log in to get started!

- - } - - ); -} - -export default Commands +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; +import Head from 'next/head' +import { useSession } from 'next-auth/client' + +const useStyles = makeStyles({ + table: { + minWidth: 650, + }, +}); + +function createData(name, description, status) { + return { name, description, status }; +} + +const rows = [ + createData('Command', 'Description', true), + createData('Command', 'Description', true), + createData('Command', 'Description', true), + createData('Command', 'Description', true), +]; + +function Commands() { + const [session, loading] = useSession() + const classes = useStyles(); + + return ( + <> + {session && + <> + + Cath Commands + + + + + + Commands + Description + Status + + + + {rows.map((row) => ( + + + {row.name} + + {row.description} + {row.status ? 'Online' : 'Offline'} + + ))} + +
+ + + } {!session && <> +

Seems like you're not logged in. Log in to get started!

+ + } + + ); +} + +export default Commands diff --git a/styles/globals.css b/styles/globals.css index 47e9259..80339b4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -40,6 +40,7 @@ a { } .grid { + margin: 50px; margin-top: 50px; display: grid; grid-template-columns: repeat(auto-fill, 350px);