signup page setup

Neo-Zenith · Jan 20, 2024 · 8e94c85 · 8e94c85
1 parent b43ce9c
commit 8e94c85
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 13 deletions.
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -1,18 +1,20 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import LandingPage from "./pages/LandingPage";
 import QueryPage from "./pages/QueryPage";
+import SignupPage from "./pages/SignupPage";
 
 function App() {
-	return (
-		<>
-			<Router>
-				<Routes>
-					<Route path="/" element={<LandingPage />} />
-					<Route path="/query" element={<QueryPage />} />
-				</Routes>
-			</Router>
-		</>
-	);
+    return (
+        <>
+            <Router>
+                <Routes>
+                    <Route path="/" element={<LandingPage />} />
+                    <Route path="/query" element={<QueryPage />} />
+                    <Route path="/signup" element={<SignupPage />} />
+                </Routes>
+            </Router>
+        </>
+    );
 }
 
 export default App;
diff --git a/client/src/components/Forms/SignupForm.jsx b/client/src/components/Forms/SignupForm.jsx
@@ -0,0 +1,94 @@
+import { Box, Button, Typography } from "@mui/material";
+import CustomTextField from "../TextField/TextField";
+import { darken } from "@mui/material/styles";
+
+export default function SignupForm() {
+    return (
+        <>
+            <Box
+                sx={{
+                    width: "50%",
+                    minWidth: "25rem",
+                    marginLeft: "max(10%, 2rem)",
+                    marginRight: "max(10%, 2rem)",
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "2.5rem",
+                }}
+            >
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        rowGap: "0.4rem",
+                    }}
+                >
+                    <Typography
+                        variant="h5"
+                        sx={{
+                            textAlign: "center",
+                            fontFamily: "Roboto",
+                            fontWeight: 600,
+                            color: "var(--color-accent)",
+                        }}
+                    >
+                        SIGN UP
+                    </Typography>
+                    <Typography
+                        variant="subtitle1"
+                        sx={{
+                            textAlign: "center",
+                            fontFamily: "Roboto",
+                            fontWeight: 300,
+                            color: "var(--color-accent)",
+                        }}
+                    >
+                        Already have an account?&nbsp;&nbsp;
+                        <a href="" style={{ color: "var(--color-tertiary)" }}>
+                            Login now
+                        </a>
+                        .
+                    </Typography>
+                </Box>
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        rowGap: "1rem",
+                    }}
+                >
+                    <CustomTextField label={"Email address"} />
+                    <CustomTextField label={"Name"} />
+                    <CustomTextField label={"Password"} type="password" />
+                    <CustomTextField
+                        label={"Confirm Password"}
+                        type="password"
+                    />
+                </Box>
+                <Box sx={{ marginLeft: "auto" }}>
+                    <Button
+                        variant="contained"
+                        disableElevation
+                        sx={{
+                            backgroundColor: "var(--color-secondary)",
+                            "&:hover": {
+                                backgroundColor: darken("#0C7489", 0.1), // Adjust the factor (0.1) as needed
+                            },
+                            color: "var(--color-secondary)",
+                            padding: "0.5rem 1.5rem",
+                        }}
+                    >
+                        <Typography
+                            sx={{
+                                color: "var(--color-accent)",
+                                fontSize: "1rem",
+                            }}
+                        >
+                            SIGN UP
+                        </Typography>
+                    </Button>
+                </Box>
+            </Box>
+        </>
+    );
+}
diff --git a/client/src/components/Navbar/Navbar.jsx b/client/src/components/Navbar/Navbar.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";

diff --git a/client/src/components/TextField/TextField.jsx b/client/src/components/TextField/TextField.jsx
@@ -0,0 +1,39 @@
+import { TextField, styled } from "@mui/material";
+import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import { inputLabelClasses } from "@mui/material/InputLabel";
+
+const CustomTextField = styled(TextField)({
+    [`& .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]:
+        {
+            borderColor: "var(--color-tertiary)",
+        },
+    [`&:hover .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline}`]:
+        {
+            borderColor: "var(--color-secondary)",
+        },
+    [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]:
+        {
+            borderColor: "var(--color-accent)",
+        },
+    [`& .${outlinedInputClasses.input}`]: {
+        color: "var(--color-tertiary)",
+    },
+    [`&:hover .${outlinedInputClasses.input}`]: {
+        color: "var(--color-tertiary)",
+    },
+    [`& .${outlinedInputClasses.root}.${outlinedInputClasses.focused} .${outlinedInputClasses.input}`]:
+        {
+            color: "var(--color-accent)",
+        },
+    [`& .${inputLabelClasses.outlined}`]: {
+        color: "var(--color-tertiary)",
+    },
+    [`&:hover .${inputLabelClasses.outlined}`]: {
+        color: "var(--color-secondary)",
+    },
+    [`& .${inputLabelClasses.outlined}.${inputLabelClasses.focused}`]: {
+        color: "var(--color-accent)",
+    },
+});
+
+export default CustomTextField;
diff --git a/client/src/index.css b/client/src/index.css
@@ -8,11 +8,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
 :root {
-	--color-primary: #13505b;
+	--color-primary: #0f434c;
 	--color-secondary: #0c7489;
 	--color-tertiary: #119da4;
 	--color-accent: #d7d9ce;
-	--color-dark: #040404;
+	--color-dark: #1c1c1c;
 }
 
 body {

diff --git a/client/src/pages/LoginPage.jsx b/client/src/pages/LoginPage.jsx
diff --git a/client/src/pages/SignupPage.jsx b/client/src/pages/SignupPage.jsx
@@ -0,0 +1,19 @@
+import { Box, TextField } from "@mui/material";
+import SignupForm from "../components/Forms/SignupForm";
+
+export default function SignupPage() {
+    return (
+        <>
+            <Box
+                sx={{
+                    minHeight: "100vh",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                }}
+            >
+                <SignupForm />
+            </Box>
+        </>
+    );
+}