changes

apps/admin-portal/src/app/events/page.tsx

@@ -1,10 +1,24 @@
 import EventCreateForm from '@/components/EventCreateForm';
+import { Box, Typography } from '@mui/material'; 
 
 export default function EventCreationPage() {
   return (
-    <>
-      <h1>Event Creation Page</h1>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 2.5,
+      }}
+    >
+
+      <Typography variant="h3"  
+      sx={{ mb: 3 }}>
+        Event Creation
+      </Typography>
+
       <EventCreateForm />
-    </>
+    </Box>
   );
 }

apps/admin-portal/src/app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import HeaderBar from '@/components/Appbar';
+import EventCreationPage from './events/page';
 export default function Home() {
-  return <HeaderBar />;
+  return <EventCreationPage />;
 }

apps/admin-portal/src/components/EventCreateForm/index.tsx

@@ -1,28 +1,55 @@
-'use client';
 import React from 'react';
-import { Input } from '@mui/base/Input';
-import { Box } from '@mui/material';
+import { Box, Button, Typography, TextField } from '@mui/material'; 
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'; // for clock functionality
-import { TimePicker } from '@mui/x-date-pickers';
-import { DatePicker } from '@mui/x-date-pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { TimePicker, DatePicker } from '@mui/x-date-pickers';
 
 export default function EventCreateForm() {
   return (
-    //LocalizationProvider wraps everything so it doesn't have to be retyped multiple times
     <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Box>
-        <div style={{ display: 'flex', margin: '16px' }}>
-          <Input />
-        </div>
-        <div style={{ display: 'flex', margin: '16px' }}>
-          <DatePicker label="Event Date" />
-          <TimePicker label="Event Time" />
-        </div>
-        <button type="button" style={{ margin: '16px', marginTop: '0px' }}>
+      <Box
+        sx={{
+          maxWidth: 600,
+          width: '30%',
+          mx: 'auto',
+          // p: helps in padding, which makes the page look uniform
+          p: 3,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 2.5,
+          backgroundColor: '#f5f5f5',
+          borderRadius: 4.5,
+        }}
+      >
+        <Typography
+          variant="h4"
+          sx={{ textAlign: 'center', mb: 2 }}
+        >
+          Create Event
+        </Typography>
+
+        <TextField
+          placeholder="Event Name"
+          sx={{ p: 1, width: '100%', borderRadius: 2 }}
+        />
+
+        <DatePicker
+          label="Event Date"
+          sx={{ width: '100%' }}
+        />
+
+        <TimePicker
+          label="Event Time"
+          sx={{ width: '100%' }}
+        />
+
+        <Button variant="contained" 
+        color="primary" 
+        sx={{ mt: 2, width: '100%', py: 1.5 }}>
           Submit
-        </button>
+        </Button>
       </Box>
     </LocalizationProvider>
   );
-}
+}