feat: make grids responsive

3 files changed, 13 insertions, 28 deletions

diff --git a/src/containers/BsuFantomSection/BsuFantomSection.tsx b/src/containers/BsuFantomSection/BsuFantomSection.tsx
index 33f39b2..6420402 100644
--- a/src/containers/BsuFantomSection/BsuFantomSection.tsx
+++ b/src/containers/BsuFantomSection/BsuFantomSection.tsx
@@ -27,7 +27,7 @@ const BsuFantomSection: React.FC = () => {
             <ContentSection sectionName="Upcoming events" level={2}>
               <Grid container spacing={2}>
                 {events?.map((event, index) => (
-                  <Grid item xs={4}>
+                  <Grid item lg={3} md={4} sm={6} xs={12}>
                     <EventCard event={event} mutate={mutate} />
                   </Grid>
                 ))}
diff --git a/src/containers/BsuFantomSection/EventForm.tsx b/src/containers/BsuFantomSection/EventForm.tsx
index 64ea46b..e52dc5d 100644
--- a/src/containers/BsuFantomSection/EventForm.tsx
+++ b/src/containers/BsuFantomSection/EventForm.tsx
@@ -45,25 +45,25 @@ const EventForm: React.FC<PropTypes> = ({ mutate }) => {
           value={date}
           onChange={createHandler(setDate)}
           variant="outlined"
-          label="When"
+          label="Date"
           required
         />
       </Grid>
       <Grid item>
         <TextField
-          value={attendanceId}
-          onChange={createHandler(setAttendanceId)}
+          value={conferenceId}
+          onChange={createHandler(setConferenceId)}
           variant="outlined"
-          label="Attendance ID"
+          label="Conference ID"
+          required
         />
       </Grid>
       <Grid item>
         <TextField
-          value={conferenceId}
-          onChange={createHandler(setConferenceId)}
+          value={attendanceId}
+          onChange={createHandler(setAttendanceId)}
           variant="outlined"
-          label="Conference ID"
-          required
+          label="Attendance ID"
         />
       </Grid>
       <Grid item xs={12}>
diff --git a/src/containers/BsuFantomSection/LoginForm.tsx b/src/containers/BsuFantomSection/LoginForm.tsx
index 208c1f7..3204a64 100644
--- a/src/containers/BsuFantomSection/LoginForm.tsx
+++ b/src/containers/BsuFantomSection/LoginForm.tsx
@@ -1,24 +1,9 @@
 import React, { useState } from 'react';
-import { ContentSection } from 'react-benzin';
-import { Link, TextField, Button, Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { TextField, Button, Grid } from '@material-ui/core';
 import { useAuth } from '../../hooks/useAuth';
 
 
-const useStyles = makeStyles(theme => ({
-  form: {
-    width: theme.spacing(50),
-    display: 'flex',
-    flexDirection: 'column',
-    '& > *': {
-      margin: theme.spacing(1)
-    }
-  },
-}));
-
-
 const LoginForm: React.FC = () => {
-  const classes = useStyles();
   const { login } = useAuth();
   const [username, setUsername] = useState<string>('');
   const [password, setPassword] = useState<string>('');
@@ -35,7 +20,7 @@ const LoginForm: React.FC = () => {
 
   return (
       <Grid container direction="column" spacing={2}>
-        <Grid item xs={3}>
+        <Grid item md={3} xs={12}>
           <TextField
             onChange={handleChangeUsername}
             variant="outlined"
@@ -43,7 +28,7 @@ const LoginForm: React.FC = () => {
             fullWidth
           />
         </Grid>
-        <Grid item xs={3}>
+        <Grid item md={3} xs={12}>
           <TextField
             onChange={handleChangePassword}
             variant="outlined"
@@ -52,7 +37,7 @@ const LoginForm: React.FC = () => {
             fullWidth
           />
         </Grid>
-        <Grid item xs={3}>
+        <Grid item md={3} xs={12}>
           <Button
             onClick={handleSubmit}
             variant="contained"