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.

Sign up for GitHub

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-147] Restyle Buttons For Consistency #124

Merged
merged 8 commits into from
May 24, 2024
Merged

[CHE-147] Restyle Buttons For Consistency #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
78bacb4
CHE-147 Micahs first commit
Mnelson98 May 21, 2024
480289f
CHE-147 updated style for account button within the header
Mnelson98 May 22, 2024
a7cafa1
CHE-147 restyled buttons on the edit profile page
Mnelson98 May 22, 2024
9d09264
Merge branch 'CHE-113/story/Profiles-Improvements' into CHE-147/subta…
Mnelson98 May 24, 2024
88fc5d7
removed unecessary comment and updated css styling for header accoun…
Mnelson98 May 24, 2024
39d8e13
Restyle all header classes to meet style guide requirements
Mnelson98 May 24, 2024
938d89e
udpate all classes in the EditProfilePage to meet style guide require…
Mnelson98 May 24, 2024
295c8aa
updated class style order in the header
Mnelson98 May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions client/src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,16 @@ const Header = (): JSX.Element => {

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"
className="bg-gray-600 fixed flex items-center justify-between left-0 md:p-6 p-4 right-0 text-white top-0"
style={{ margin: "10px 20px 0 20px", zIndex: 1000 }}
>
<Link to="/app/main" 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>
<h1 className="font-bold md:text-2xl ml-3 text-xl">Code Hammers</h1>
</Link>

<div className="flex-grow mx-10">
<div className="flex justify-evenly space-x-4 md:space-x-6 lg:space-x-10">
<div className="flex justify-evenly lg:space-x-10 md:space-x-6 space-x-4">
<Link
to="/app/directory"
className={`text-lg md:text-xl ${
Expand All @@ -56,7 +56,7 @@ const Header = (): JSX.Element => {
</Link>
<Link
to="/app/profiles"
className={`text-lg md:text-xl ${
className={`md:text-xl text-lg ${
currentPath === "profiles"
? "text-gray-300"
: "hover:text-gray-300"
Expand All @@ -66,7 +66,7 @@ const Header = (): JSX.Element => {
</Link>
<Link
to="/app/forums"
className={`text-lg md:text-xl ${
className={`md:text-xl text-lg ${
currentPath === "forums" ? "text-gray-300" : "hover:text-gray-300"
} transition transform hover:scale-105`}
>
Expand All @@ -77,18 +77,18 @@ const Header = (): JSX.Element => {
<div className="relative">
<button
onClick={() => setShowDropdown(!showDropdown)}
className="bg-gray-700 hover:bg-gray-800 font-bold py-2 px-4 rounded"
className="bg-blue-500 font-bold hover:bg-blue-700 px-4 py-2 rounded text-white"
>
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"
className="absolute bg-gray-700 mt-2 py-2 right-0 rounded-md shadow-xl w-48 z-20"
>
<a
href="#!"
className="block px-4 py-2 text-sm text-white hover:bg-gray-800"
className="block hover:bg-gray-800 px-4 py-2 text-sm text-white"
onClick={() => {
navigate("/app/editProfile");
setShowDropdown(false);
Expand All @@ -98,7 +98,7 @@ const Header = (): JSX.Element => {
</a>
<a
href="#!"
className="block px-4 py-2 text-sm text-white hover:bg-gray-800"
className="block hover:bg-gray-800 px-4 py-2 text-sm text-white"
onClick={handleLogout}
>
Logout
Expand Down
27 changes: 13 additions & 14 deletions client/src/pages/EditProfilePage/EditProfilePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ const EditProfilePage = () => {
useEffect(() => {
if (userID) dispatch(fetchUserProfile(userID as string));
}, [dispatch]);

useEffect(() => {
if (profile) {
setFormData({
Expand Down Expand Up @@ -84,35 +83,35 @@ const EditProfilePage = () => {
}

return (
<div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-start pt-20 p-4">
<h1 className="text-4xl font-extrabold mb-4 mt-16">Edit Profile</h1>
<div className="w-full max-w-4xl bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 pt-6 pb-6 pl-6 pr-6 rounded-lg shadow-lg flex flex-col items-center">
<div className="bg-gray-900 flex flex-col items-center justify-start min-h-screen p-4 pt-20 text-white">
<h1 className="font-extrabold mb-4 mt-16 text-4xl">Edit Profile</h1>
<div className="bg-gradient-to-r flex flex-col from-gray-700 items-center max-w-4xl pb-6 pl-6 pr-6 pt-6 rounded-lg shadow-lg to-gray-900 via-gray-800 w-full">
<form onSubmit={handleSubmit} className=" w-full">
{profile?.profilePhoto && (
<div className="mb-4 text-center">
<img
src={profile.profilePhoto}
alt="Profile"
className="rounded-full h-32 w-32 object-cover mx-auto"
className="h-32 mx-auto object-cover rounded-full w-32"
/>
</div>
)}

<label className="block text-sm font-bold mb-2" htmlFor="email">
<label className="block font-bold mb-2 text-sm" htmlFor="email">
Email
<input
className="w-full p-2 rounded bg-gray-800 text-white"
className="bg-gray-800 p-2 rounded text-white w-full"
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
/>
</label>
<label className="block text-sm font-bold mb-2" htmlFor="personalBio">
<label className="block font-bold mb-2 text-sm" htmlFor="personalBio">
Personal Bio
<input
className="w-full p-2 rounded bg-gray-800 text-white"
className="bg-gray-800 p-2 rounded text-white w-full"
id="personalBio"
name="personalBio"
type="text"
Expand All @@ -121,29 +120,29 @@ const EditProfilePage = () => {
/>
</label>
<button
className="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded"
className="bg-blue-500 font-bold hover:bg-blue-700 px-4 py-2 rounded text-white"
type="submit"
>
Save Changes
</button>
</form>
<div className="mt-6">
<h3 className="text-2xl font-bold mb-4">Upload Profile Picture</h3>
<h3 className="font-bold mb-4 text-2xl">Upload Profile Picture</h3>
<input
ref={fileInputRef}
type="file"
onChange={handleFileChange}
style={{ display: "none" }}
/>
{file && <p className="text-lg mt-2">{file.name}</p>}
{file && <p className="mt-2 text-lg">{file.name}</p>}
<button
className="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded mt-4 mr-2"
className="bg-blue-500 font-bold hover:bg-blue-700 mr-2 mt-4 px-4 py-2 rounded text-white"
onClick={handleFileInputClick}
>
Choose File
</button>
<button
className="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded mt-4 ml-2"
className="bg-blue-500 font-bold hover:bg-blue-700 ml-2 mt-4 px-4 py-2 rounded text-white"
onClick={handleImageUpload}
>
Upload Image
Expand Down
Loading