(feat): add sign up page, rename register to signup

client/src/App.tsx

@@ -1,6 +1,6 @@
 //#region Imports
 import { useRoutes, useLocation } from "react-router-dom";
-import { Register, Home, Settings, Signin } from "./pages";
+import { Signup, Home, Settings, Signin } from "./pages";
 import { AnimatePresence } from "framer-motion";
 import React, { useEffect, useState } from "react";
 import UserSettings from "./pages/settings/user/usersettings.page";
@@ -48,8 +48,8 @@ const App: React.FC = () => {
       ),
     },
     {
-      path: "/register",
-      element: <Register />,
+      path: "/signup",
+      element: <Signup />,
     },
     {
       path: "/settings",

client/src/interfaces/RegisterInterface.ts

@@ -1,4 +1,4 @@
-export default interface RegisterInterface {
+export default interface SignupInterface {
   email: string;
   username: string;
   password: string;

client/src/pages/errors/404/notfound.errorpage.tsx

@@ -13,15 +13,14 @@ const NotFound_E: React.FC<NotFound_EProps> = () => {
   return (
     <section className="offline_e">
       <div className="flex items-center justify-center h-screen">
-        <div className="grid items-center max-w-lg">
-          <Image
+        <div className="grid justify-center items-center">
+          <img
             src={missingItemIcon}
+            className="w-28 h-28 mb-5 mx-auto rounded-md"
             alt="404_E"
-            height="200px"
-            width="200px"
           />
           <div className="text-center">
-            <p className="text-2xl font-bold font-heading">
+            <p className="text-2xl font-heading">
               Where did that page go again?
             </p>
             <p>Bad news. That page seems to be missing.</p>
@@ -45,8 +44,8 @@ const NotFound_E: React.FC<NotFound_EProps> = () => {
       <div
         className={`fixed p-2 flex font-bold justify-center rounded-t-md items-center bottom-0 w-screen bg-secondaryBG`}
       >
-        <BsExclamationCircle size="20" className="text-red-500 mr-2" /> E_404:
-        Cannot get {location.pathname}
+        <BsExclamationCircle size="20" className="text-danger mr-2" /> Error
+        404: Cannot get {location.pathname}
       </div>
     </section>
   );

client/src/pages/index.ts

@@ -1,4 +1,4 @@
 export { Home } from "./home/home.page";
 export { Signin } from "./signin/signin.page";
-export { Register } from "./register/register.page";
+export { Signup } from "./signup/signup.page";
 export { Settings } from "./settings/settings.page";

client/src/pages/signin/components/card_form.signin.tsx

@@ -103,7 +103,7 @@ export const SigninCardForm: FC<IProps> = (props) => {
           >
             Continue
           </Button>
-          <Link to="/register">
+          <Link to="/signup">
             <Button color="primary" variant="shadow">
               Sign up
             </Button>

client/src/pages/signup/components/card.signup.tsx

@@ -0,0 +1,22 @@
+import { Card } from "@nextui-org/react";
+import React, { FC } from "react";
+import { SignupCardHeader } from "./card_header.signup";
+import { SignupCardBody } from "./card_body.signup";
+import { SignupCardFooter } from "./card_footer.signup";
+
+interface IProps {}
+
+/**
+ * @author
+ * @function @SignupCard
+ **/
+
+export const SignupCard: FC<IProps> = (props) => {
+  return (
+    <Card className="signin__card bg-secondaryBG w-[428px]">
+      <SignupCardHeader />
+      <SignupCardBody />
+      <SignupCardFooter />
+    </Card>
+  );
+};

client/src/pages/signup/components/card_body.signup.tsx

@@ -0,0 +1,29 @@
+import { Button, CardBody, Divider } from "@nextui-org/react";
+import React, { FC } from "react";
+import { SignupCardForm } from "./card_form.signup";
+import { BsGoogle } from "react-icons/bs";
+import { BiDotsVerticalRounded, BiMenu } from "react-icons/bi";
+
+interface IProps {}
+
+/**
+ * @author
+ * @function @SignupCardBody
+ **/
+
+export const SignupCardBody: FC<IProps> = (props) => {
+  return (
+    <CardBody className="px-10">
+      <SignupCardForm />
+      <Divider className="mt-[23px] mb-[17px]" />
+      <div className="buttons flex">
+        <Button isDisabled className="mt-[14px]" fullWidth>
+          <BsGoogle size={24} /> Google
+        </Button>
+        <Button isDisabled isIconOnly className="mt-[14px] ml-2">
+          <BiDotsVerticalRounded size={24} />
+        </Button>
+      </div>
+    </CardBody>
+  );
+};

client/src/pages/signup/components/card_footer.signup.tsx

@@ -0,0 +1,17 @@
+import { CardFooter } from "@nextui-org/react";
+import React, { FC } from "react";
+
+interface IProps {}
+
+/**
+ * @author
+ * @function @SignupCardFooter
+ **/
+
+export const SignupCardFooter: FC<IProps> = (props) => {
+  return (
+    <CardFooter className="px-10 mb-5 opacity-50">
+      <p>By signing up, you agree to our EULA and Privacy Policy.</p>
+    </CardFooter>
+  );
+};