feat: add styles one

package.json

@@ -17,7 +17,6 @@
   "dependencies": {
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@fontsource/roboto": "4.5.8",
     "@hookform/resolvers": "3.3.4",
     "@mui/material": "5.15.10",
     "@next-auth/prisma-adapter": "^1.0.6",

src/components/layout.tsx

@@ -3,9 +3,11 @@ import NavBar from "./navbar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <main>
+    <main className="light-palette main-layout">
       <NavBar />
-      <Container>{children}</Container>
+      <Container maxWidth="sm" sx={{ mt: 4 }}>
+        {children}
+      </Container>
     </main>
   );
 }

src/components/login-btn.tsx

@@ -7,15 +7,33 @@ export default function LoginButton() {
     return (
       <>
         Signed in as {session.user?.email} <br />
-        <Button sx={{ color: "white" }} onClick={() => signOut()}>
+        <Button
+          sx={{ color: "white", fontSize: "18px" }}
+          onClick={() => signOut()}
+        >
           Sign out
         </Button>
       </>
     );
   }
   return (
     <>
-      <Button sx={{ color: "white" }} onClick={() => signIn()}>
+      <Button
+        sx={{
+          color: "#0a0a23",
+          fontSize: "18px",
+          maxHeight: "30px",
+          marginLeft: "1rem",
+          border: "3px solid #feac32",
+          borderRadius: "0",
+          background: "#feac32",
+          backgroundImage: "linear-gradient(#fecc4c,#ffac33)",
+          textTransform: "none",
+          padding: "0.5rem 1rem",
+        }}
+        className="login-btn"
+        onClick={() => signIn()}
+      >
         Sign in
       </Button>
     </>

src/components/navbar.tsx

@@ -1,14 +1,9 @@
-import {
-  AppBar,
-  Toolbar,
-  Link as MUILink,
-  Container,
-  Box,
-} from "@mui/material";
+import { AppBar, Toolbar, Link as MUILink, Box } from "@mui/material";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 
 import LoginButton from "@/components/login-btn";
+import Logo from "./logo";
 import { forwardRef } from "react";
 
 const NextLink = forwardRef<
@@ -21,32 +16,71 @@ const NextLink = forwardRef<
 export default function NavBar() {
   const session = useSession();
   return (
-    <AppBar position="static">
-      <Container maxWidth="xl">
-        <Toolbar>
-          <Box sx={{ flexGrow: 1 }}>
-            <MUILink
-              href="/"
-              prefetch={false} // This must be false or new events will not 
-              // appear on the home page until it is refreshed
-              component={NextLink}
-              variant="h6"
-              sx={{ color: "white", paddingRight: "1rem" }}
-            >
-              Home
-            </MUILink>
-            <MUILink
-              href="/add-event"
-              component={NextLink}
-              variant="h6"
-              sx={{ color: "white" }}
-            >
-              Add Event
-            </MUILink>
-          </Box>
+    <AppBar position="static" className="navigation-container">
+      <Toolbar className="navigation-toolbar">
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            fontSize: "18px",
+            textDecoration: "none",
+            width: "33%",
+          }}
+        ></Box>
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            fontSize: "18px",
+            textDecoration: "none",
+            width: "33%",
+          }}
+        >
+          <MUILink
+            href="/"
+            prefetch={false}
+            component={NextLink}
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
+            <Logo />
+          </MUILink>
+        </Box>
+
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            justifyContent: "flex-end",
+            width: "33%",
+          }}
+        >
+          <MUILink
+            href="/"
+            prefetch={false}
+            component={NextLink}
+            variant="h6"
+            className="nav-button"
+          >
+            Home
+          </MUILink>
+          <MUILink
+            href="/add-event"
+            component={NextLink}
+            variant="h6"
+            className="nav-button"
+          >
+            Add Event
+          </MUILink>
           <LoginButton />
-        </Toolbar>
-      </Container>
+        </Box>
+      </Toolbar>
     </AppBar>
   );
 }

src/pages/_app.tsx

@@ -1,15 +1,19 @@
 import { SessionProvider } from "next-auth/react";
 import Head from "next/head";
-import { CssBaseline } from "@mui/material";
+import { CssBaseline, createTheme, ThemeProvider } from "@mui/material";
 import type { AppProps } from "next/app";
 
 import Layout from "@/components/layout";
+import "./event-fields.css";
+import "./fonts.css";
+import "./variables.css";
+import "./main.css";
 
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import './event-fields.css';
+const theme = createTheme({
+  typography: {
+    fontFamily: ["Lato", "sans-serif"].join(","),
+  },
+});
 
 export default function App({
   Component,
@@ -21,9 +25,11 @@ export default function App({
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
+      <ThemeProvider theme={theme}>
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
     </SessionProvider>
   );
 }

src/pages/add-event.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { typeboxResolver } from "@hookform/resolvers/typebox";
-import { Paper, Button, Stack, Typography } from "@mui/material";
+import { Button, Stack, Typography } from "@mui/material";
 
 import { type EventData, eventSchema } from "@/validation/schema";
 import FormField from "@/components/form-field";
@@ -31,65 +31,67 @@ export default function AddEvent() {
   };
 
   return (
-    <Paper
-      variant="outlined"
-      sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}
-    >
-      <form onSubmit={handleSubmit(postEvent)}>
-        <Typography variant="h6" gutterBottom>
-          Add event
-        </Typography>
-        <Stack spacing={2}>
-          <FormField
-            type="text"
-            label="Event Name"
-            errors={errors}
-            helperText="Event names must be between 1 and 100 characters long"
-            {...register("name", { required: true })}
-          />
+    <form className={"input-form"} onSubmit={handleSubmit(postEvent)}>
+      <Typography component="h1" variant="h3">
+        Tech Event Calendar
+      </Typography>
+      <Typography component="h2" variant="h4">
+        Add an event
+      </Typography>
+      <hr />
+      <Stack spacing={2}>
+        <FormField
+          type="text"
+          label="Event Name"
+          errors={errors}
+          helperText="Event names must be between 1 and 100 characters long"
+          {...register("name", { required: true })}
+        />
 
-          <FormField
-            type="url"
-            label="URL"
-            errors={errors}
-            helperText="URLs must include the protocol (http:// or https://)"
-            {...register("link", { required: true })}
-          />
+        <FormField
+          type="url"
+          label="URL"
+          errors={errors}
+          helperText="URLs must include the protocol (http:// or https://)"
+          {...register("link", { required: true })}
+        />
 
-          <FormField
-            type="datetime-local"
-            label="Date"
-            errors={errors}
-            helperText="Dates must be ISO8601 compliant"
-            {...register("date", {
-              required: true,
-              setValueAs: (value) =>
-                value ? new Date(value).toISOString() : "",
-            })}
-          />
+        <FormField
+          type="datetime-local"
+          label="Date"
+          errors={errors}
+          helperText="Dates must be ISO8601 compliant"
+          {...register("date", {
+            required: true,
+            setValueAs: (value) => (value ? new Date(value).toISOString() : ""),
+          })}
+        />
 
-          <FormField
-            type="text"
-            label="Latitude"
-            errors={errors}
-            helperText="Latitude must be between -90 and 90 inclusive"
-            dataCy="input-latitude-add"
-            {...register("latitude", { required: true, valueAsNumber: true })}
-          />
-          <FormField
-            type="text"
-            label="Longitude"
-            errors={errors}
-            helperText="Longitude must be between -180 and 180 inclusive"
-            dataCy="input-longitude-add"
-            {...register("longitude", { required: true, valueAsNumber: true })}
-          />
+        <FormField
+          type="text"
+          label="Latitude"
+          errors={errors}
+          helperText="Latitude must be between -90 and 90 inclusive"
+          dataCy="input-latitude-add"
+          {...register("latitude", { required: true, valueAsNumber: true })}
+        />
+        <FormField
+          type="text"
+          label="Longitude"
+          errors={errors}
+          helperText="Longitude must be between -180 and 180 inclusive"
+          dataCy="input-longitude-add"
+          {...register("longitude", { required: true, valueAsNumber: true })}
+        />
 
-          <Button data-cy="submit-add-event" type="submit">
-            Submit
-          </Button>
-        </Stack>
-      </form>
-    </Paper>
+        <Button
+          data-cy="submit-add-event"
+          type="submit"
+          className="submit-button"
+        >
+          Add
+        </Button>
+      </Stack>
+    </form>
   );
 }