Changed cards to use Chakra UI

components/Card.js

@@ -1,38 +1,17 @@
-import { makeStyles } from '@material-ui/core'
 import React from 'react'
 import Link from 'next/link'
+import {Text, Flex, Button} from '@chakra-ui/react'
 
-const useStyles = makeStyles({
+function Card({title, desc, link}) {
-    homeCard: {
-        width: '300px',
-        height: '150px',
-        background: '#1f1b24',
-        margin: '10px',
-        padding: '20px',
-        borderRadius: '15px',
-
-        '&:hover': {
-            background: '#2c2633',
-        }
-    },
-    title: {
-        marginTop: '3px',
-    },
-    desc: {}
-})
-
-function HomeCard({title, desc, link=''}) {
-
-    const classes = useStyles()
-
     return (
         <Link href={link}>
-            <div className={classes.homeCard}>
+            <Flex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px'>
-                <h1 className={classes.title}>{title}</h1>
+                <Text fontSize='2xl'>{title}</Text>
-                <p className={classes.desc}>{desc}</p>
+                <Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text>
-            </div>
+                <Button colorScheme='teal' variant='outline'>Learn More</Button>
+            </Flex>
         </Link>
     )
 }
 
-export default HomeCard
+export default Card

components/CardContainer.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import Link from 'next/link'
-
-const useStyles = makeStyles({
-    root: {
-        minWidth: 275,
-    },
-    bullet: {
-        display: 'inline-block',
-        margin: '0 2px',
-        transform: 'scale(0.8)',
-    },
-    title: {
-        fontSize: 14,
-    },
-    pos: {
-        marginBottom: 12,
-    },
-});
-
-export default function CardContainer(props) {
-    const classes = useStyles();
-
-    return (
-        <a href={props.link}>
-            <Card className={classes.root} style={{ background: '#1F1B24', border: '2px solid #00c7b6' }}>
-                <CardContent>
-                    <Typography variant="h5" component="h2">
-                        {props.title}
-                    </Typography>
-                    <Typography variant="body2" component="p">
-                        {props.children}
-                    </Typography>
-                </CardContent>
-                <CardActions>
-                    <Button size="small">Learn More</Button>
-                </CardActions>
-            </Card>
-        </a>
-    );
-}

pages/controlpanel/index.js

@@ -2,14 +2,15 @@ import React from 'react'
 import Card from '../../components/Card'
 import Head from 'next/head'
 import { useSession } from 'next-auth/client'
-import { Text } from "@chakra-ui/react"
+import { Flex, Text, Spacer } from "@chakra-ui/react"
+
 
 function Index() {
 
     const [session, loading] = useSession()
 
     return (
-        <>
+        <>  
             {!session && <>
                 <h1>Seems like you&apos;re not logged in. Log in to get started!</h1>
             </>
@@ -19,10 +20,14 @@ function Index() {
                     <title>Cath Control Panel</title>
                 </Head>
                 <div>
-                    <Text fontSize='4xl'>Control Panel</Text>
+                    <Text fontSize='4xl' marginBottom='15'>Control Panel</Text>
-                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
+                    <Flex direction='column'>
-                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
+                        <Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
-                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
+                        <Spacer/>
+                        <Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
+                        <Spacer/>
+                        <Card title='Commands' desc='Control your commands' link='/controlpanel/commands'/>
+                    </Flex>
                 </div>
             </>
             }