Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CHE-59] Update Styling #65

Merged
6 changes: 2 additions & 4 deletions client/src/AuthenticatedApp.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import Banner from "./components/Banner/Banner";
import Navbar from "./components/Navbar/Navbar";
import Header from "./components/Header/Header";
import MainPage from "./pages/MainPage/MainPage";
import Forums from "./pages/Forums/Forums";
import Profiles from "./pages/Profiles/Profiles";
@@ -39,8 +38,7 @@ const AuthenticatedApp = () => {

return (
<div>
<Banner />
<Navbar />
<Header />
<Routes>
<Route path="main" element={<MainPage />} />
<Route path="/profiles" element={<Profiles />} />
113 changes: 113 additions & 0 deletions client/src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import React, { useState, useRef, useEffect } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import logo from "../../assets/hammer.png";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { logout } from "../../features/user/userSlice";

const Header = (): JSX.Element => {
const user = useAppSelector((state) => state.user.userData);
const dispatch = useAppDispatch();
const navigate = useNavigate();
const location = useLocation();
const [showDropdown, setShowDropdown] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);

const handleLogout = () => {
dispatch(logout());
navigate("/");
//TODO CLEAR ALL STATE
};

const currentPath = location.pathname.replace("/app/", "");

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setShowDropdown(false);
}
};

document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, [dropdownRef]);

return (
<div
className="fixed top-0 left-0 right-0 bg-gray-600 text-white p-4 md:p-6 flex items-center justify-between"
style={{ margin: "10px 20px 0 20px", zIndex: 1000 }}
>
<div className="flex items-center">
<img src={logo} alt="Code Hammers Logo" className="h-12 md:h-16" />
<h1 className="ml-3 text-xl md:text-2xl font-bold">Code Hammers</h1>
</div>

<div className="flex-grow mx-10">
<div className="flex justify-evenly space-x-4 md:space-x-6 lg:space-x-10">
<Link
to="/app/main"
className={`text-lg md:text-xl ${
currentPath === "main" ? "text-gray-300" : "hover:text-gray-300"
} transition transform hover:scale-105`}
>
MainPage
</Link>
<Link
to="/app/profiles"
className={`text-lg md:text-xl ${
currentPath === "profiles"
? "text-gray-300"
: "hover:text-gray-300"
} transition transform hover:scale-105`}
>
Profiles
</Link>
<Link
to="/app/forums"
className={`text-lg md:text-xl ${
currentPath === "forums" ? "text-gray-300" : "hover:text-gray-300"
} transition transform hover:scale-105`}
>
Forums
</Link>
</div>
</div>
<div className="relative">
<button
onClick={() => setShowDropdown(!showDropdown)}
className="bg-gray-700 hover:bg-gray-800 font-bold py-2 px-4 rounded"
>
Account
</button>
{showDropdown && (
<div
ref={dropdownRef}
className="absolute right-0 mt-2 py-2 w-48 bg-gray-700 rounded-md shadow-xl z-20"
>
<a
href="#!"
className="block px-4 py-2 text-sm text-white hover:bg-gray-800"
onClick={() => {
navigate("/app/profile");
setShowDropdown(false);
}}
>
Go to Profile
</a>
<a
href="#!"
className="block px-4 py-2 text-sm text-white hover:bg-gray-800"
onClick={handleLogout}
>
Logout
</a>
</div>
)}
</div>
</div>
);
};

export default Header;
102 changes: 99 additions & 3 deletions client/src/pages/MainPage/MainPage.tsx
Original file line number Diff line number Diff line change
@@ -5,9 +5,105 @@ const MainPage = (): JSX.Element => {
const user = useAppSelector((state) => state.user.userData);

return (
<div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
<h1 className="text-4xl font-extrabold mb-4">Main Page</h1>
<h1>Welcome {user?.firstName} !</h1>
<div className="pt-40 min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
<h1 className="text-4xl font-extrabold mb-4">Welcome!</h1>

<section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-l from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
<img
src="https://picsum.photos/200/300?grayscale"
alt="Description of Image 1"
className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover"
style={{ maxHeight: "300px" }}
/>
<div className="flex-grow">
<h3 className="text-2xl font-bold mb-2">About Code Hammers</h3>
<p className="text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
dapibus dictum.Duis tempus diam ac massa bibendum, sed tempus sapien
posuere. In elementum enim ac dui interdum porta. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac.
</p>
</div>
</section>

<section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
<img
src="https://picsum.photos/200/300?grayscale"
alt="Description of Image 1"
className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover md:order-last"
style={{ maxHeight: "300px" }}
/>
<div className="flex-grow">
<h3 className="text-2xl font-bold mb-2">Features</h3>
<p className="text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
dapibus dictum. Duis tempus diam ac massa bibendum, sed tempus
sapien posuere. In elementum enim ac dui interdum porta.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac.
</p>
</div>
</section>

<section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-l from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
<img
src="https://picsum.photos/200/300?grayscale"
alt="Description of Image 1"
className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover"
style={{ maxHeight: "300px" }}
/>
<div className="flex-grow">
<h3 className="text-2xl font-bold mb-2">Get Started!</h3>
<p className="text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
dapibus dictum.Duis tempus diam ac massa bibendum, sed tempus sapien
posuere. In elementum enim ac dui interdum porta. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac.
</p>
</div>
</section>

<section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
<img
src="https://picsum.photos/200/300?grayscale"
alt="Description of Image 1"
className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover md:order-last"
style={{ maxHeight: "300px" }}
/>
<div className="flex-grow">
<h3 className="text-2xl font-bold mb-2">Boopity Bops</h3>
<p className="text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
dapibus dictum. Duis tempus diam ac massa bibendum, sed tempus
sapien posuere. In elementum enim ac dui interdum porta.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac.
</p>
</div>
</section>

<section className="w-full max-w-4xl p-4 mt-4 bg-gradient-to-l from-gray-700 via-gray-800 to-gray-900 rounded-lg shadow-lg flex md:flex-row flex-col items-center gap-4">
<img
src="https://picsum.photos/200/300?grayscale"
alt="Description of Image 1"
className="flex-shrink-0 w-full md:w-1/2 rounded-lg object-cover"
style={{ maxHeight: "300px" }}
/>
<div className="flex-grow">
<h3 className="text-2xl font-bold mb-2">Bopitty Boops</h3>
<p className="text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
in ligula eu erat sollicitudin porttitor. Nunc congue mi eget nunc
dapibus dictum.Duis tempus diam ac massa bibendum, sed tempus sapien
posuere. In elementum enim ac dui interdum porta. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac.
</p>
</div>
</section>
</div>
);
};
17 changes: 0 additions & 17 deletions client/src/pages/MainPage/__snapshots__/MainPage.test.tsx.snap

This file was deleted.