Merge pull request #18 from BookHive-ufcg/feat/login-signup-style

Login and Signup pages
BookHive-ufcg · Sep 14, 2024 · 040a8da · 040a8da · github-actions · Sep 14, 2024
2 parents b05bf70 + f267f17
commit 040a8da
Show file tree

Hide file tree

Showing 15 changed files with 328 additions and 19 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,10 +1,10 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-primary: "Metamorphous";
-  --font-secondary: "Open Sans Hebrew";
+  --font-secondary: sans-serif;
 
   --font-color-secondary: #4a4545;
+  --font-color-tertiary: #999;
 
   --color-primary: #ffdd4b;
   --color-grey: #555;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,13 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Metamorphous } from "next/font/google";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
 import Header from "@/components/Header";
 
-const inter = Inter({ subsets: ["latin"] });
+const metamorphous = Metamorphous({
+  subsets: ["latin"],
+  weight: "400",
+});
 
 export const metadata: Metadata = {
   title: "Book Hive",
@@ -17,8 +20,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
+    <html lang="en" className={metamorphous.className}>
+      <body>
         <Header />
         {children}
         <Navbar />

diff --git a/src/app/login/login.module.css b/src/app/login/login.module.css
@@ -0,0 +1,94 @@
+.container {
+  padding: 2rem 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.leftContainer {
+  width: 50%;
+}
+
+.leftContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.description {
+  margin-right: 10%;
+  text-align: right;
+  color: var(--font-color-secondary);
+  font-family: var(--font-secondary);
+  font-size: 1.35rem;
+}
+
+.rightContainer {
+  width: 50%;
+}
+
+.rightContent {
+  padding: 0 4rem;
+}
+
+.title {
+  font-size: 2.2rem;
+  text-transform: uppercase;
+}
+
+.subTitle {
+  font-size: 1.2rem;
+  color: var(--font-color-secondary);
+  font-family: var(--font-secondary);
+}
+
+.form {
+  margin: 3rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.formGroup {
+  margin-top: 1rem;
+}
+
+.forgotPassword {
+  color: var(--font-color-secondary);
+  text-decoration: none;
+  font-size: 0.8rem;
+  margin-left: auto;
+  font-family: var(--font-secondary);
+  font-size: 1.1rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.button {
+  margin-top: 1.5rem;
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin-top: 4rem;
+  margin-bottom: 1rem;
+}
+
+.separator::before,
+.separator::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid var(--color-grey);
+}
+
+.separator span {
+  padding: 0 10px;
+  color: var(--color-grey);
+  font-size: 22px;
+  font-family: var(--font-secondary);
+  font-size: 1.4rem;
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -1,3 +1,69 @@
+import styles from "./login.module.css";
+
+import Input from "@/components/Input";
+import Button from "@/components/Button";
+import Image from "next/image";
+import Link from "next/link";
+
 export default function Login() {
-  return <main></main>;
+  return (
+    <main>
+      <div className={styles.container}>
+        <div className={styles.leftContainer}>
+          <div className={styles.leftContent}>
+            <Image
+              src="/logo.svg"
+              width={300}
+              height={200}
+              alt="Logo"
+              className={styles.logo}
+            />
+          </div>
+
+          <p className={styles.description}>Join us and find your honeycomb</p>
+        </div>
+
+        <div className={styles.rightContainer}>
+          <div className={styles.rightContent}>
+            <h1 className={styles.title}>Sign in to BookHive</h1>
+            <p className={styles.subTitle}>Use your username and password</p>
+            <form className={styles.form}>
+              <div className={styles.formGroup}>
+                <Input
+                  type="text"
+                  id="username"
+                  placeholder="Username"
+                  label="Username"
+                />
+              </div>
+              <div className={styles.formGroup}>
+                <Input
+                  type="password"
+                  id="password"
+                  placeholder="Password"
+                  label="Password"
+                />
+              </div>
+
+              <a className={styles.forgotPassword} href="#">
+                Forgot your password?
+              </a>
+
+              <Button className={styles.button}>Login</Button>
+            </form>
+
+            <div className={styles.separator}>
+              <span>New Here?</span>
+            </div>
+
+            <Link href="/signup">
+              <Button className={styles.button} variant="secondary">
+                Sign up
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
 }
diff --git a/src/app/signin/page.tsx b/src/app/signin/page.tsx
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -0,0 +1,28 @@
+import Input from "@/components/Input";
+import styles from "./signup.module.css";
+import Button from "@/components/Button";
+
+export default function Signup() {
+  return (
+    <main>
+      <div className={styles.signup}>
+        <div className={styles.presentation}>
+          <h1 className={styles.title}>
+            Signup,
+            <br />
+            Bee a BookHiver!
+          </h1>
+        </div>
+
+        <div className={styles.gridContainer}>
+          <Input type="text" id="firstName" label="First name" />
+          <Input type="text" id="lastName" label="Last name" />
+          <Input type="date" id="date" label="Date of birth" />
+          <Input type="text" id="username" label="Username" />
+          <Input type="password" id="password" label="Password" />
+          <Button className={styles.button}>Join us</Button>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/signup/signup.module.css b/src/app/signup/signup.module.css
@@ -0,0 +1,25 @@
+.signup {
+  width: 100%;
+  padding: 4rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.presentation {
+  height: 20vh;
+}
+
+.title {
+  font-weight: 400;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-gap: 2.5rem 4rem;
+}
+
+.button {
+  height: 4.1rem;
+  align-self: flex-end;
+}
diff --git a/src/components/Button/button.module.css b/src/components/Button/button.module.css
@@ -0,0 +1,27 @@
+.button {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.primary {
+  background-color: #ffd700;
+  color: #000;
+}
+
+.primary:hover {
+  background-color: #e6c200;
+}
+
+.secondary {
+  background-color: #000;
+  color: #ffd700;
+}
+
+.secondary:hover {
+  background-color: #333;
+}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -0,0 +1,23 @@
+import React, { ButtonHTMLAttributes } from "react";
+import styles from "./button.module.css";
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary";
+};
+
+const Button = ({
+  children,
+  variant = "primary",
+  className,
+  ...props
+}: ButtonProps) => {
+  const buttonClass = `${styles.button} ${styles[variant]} ${className || ""}`;
+
+  return (
+    <button className={buttonClass.trim()} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Header/header.module.css b/src/components/Header/header.module.css
@@ -8,7 +8,6 @@
 }
 
 .backButtonContainer {
-  /* same with from Image tag */
   min-width: 40px;
 }
 

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,23 +1,22 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import styles from "./header.module.css";
 import Profile from "../Profile";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 const Header = () => {
   const pathname = usePathname();
+  const router = useRouter() ?? null;
 
   return (
     <header className={styles.header}>
       <div className={styles.backButtonContainer}>
         {pathname !== "/" && (
-          <Link href="/">
-            <button className={styles.backButton}>
-              <Image src="/arrow.svg" alt="Back" width={20} height={30} />
-            </button>
-          </Link>
+          <button onClick={() => router.back()} className={styles.backButton}>
+            <Image src="/arrow.svg" alt="Back" width={20} height={30} />
+          </button>
         )}
       </div>
       <Image
@@ -27,7 +26,8 @@ const Header = () => {
         alt="Logo"
         className={styles.logo}
       />
-      <Profile />
+      {pathname !== "/login" && pathname !== "/signup" && <Profile />}
+      {(pathname === "/login" || pathname === "/signup") && <div />}
     </header>
   );
 };

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -0,0 +1,17 @@
+import React, { InputHTMLAttributes } from "react";
+import styles from "./input.module.css";
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  label: string;
+};
+
+const Input = ({ label, ...props }: InputProps) => {
+  return (
+    <div>
+      <label className={styles.label}>{label}</label>
+      <input className={styles.input} {...props} />
+    </div>
+  );
+};
+
+export default Input;
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ @@
     }
     .backButtonContainer {
-      /* same with from Image tag */
       min-width: 40px;
     }
@@ Expand Down @@