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

Detailed profile improvements #52

Merged
merged 4 commits into from
Feb 19, 2024
Merged

Detailed profile improvements #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
77be749
Use radixui for dropdown.
andrezz-b Feb 18, 2024
579bd2c
Merge branch 'main' into detailed-profile-improvements
andrezz-b Feb 19, 2024
8f530d7
Improved detailed profile view.
andrezz-b Feb 19, 2024
34aa713
You can see detailed profile on matches page.
andrezz-b Feb 19, 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
766 changes: 738 additions & 28 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.18",
"@mui/material": "^5.14.18",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@tanstack/react-query": "^5.13.4",
"@tanstack/react-query-devtools": "^5.13.5",
"axios": "^1.6.2",
Expand All @@ -33,6 +35,7 @@
"react-dom": "^18.2.0",
"react-drag-drop-files": "^2.3.10",
"react-router-dom": "^6.18.0",
"react-spotify-embed": "^2.0.4",
"yup": "^1.3.2"
},
"devDependencies": {
Expand Down
26 changes: 0 additions & 26 deletions frontend/src/assets/CogIcon.tsx
View file
Open in desktop

This file was deleted.

20 changes: 0 additions & 20 deletions frontend/src/assets/HeartIcon.tsx
View file
Open in desktop

This file was deleted.

20 changes: 0 additions & 20 deletions frontend/src/assets/LogoutIcon.tsx
View file
Open in desktop

This file was deleted.

17 changes: 0 additions & 17 deletions frontend/src/assets/MatchIcon.tsx
View file
Open in desktop

This file was deleted.

13 changes: 1 addition & 12 deletions frontend/src/assets/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
import CogIcon from "./CogIcon";
import HeartIcon from "./HeartIcon";
import RiMatchLogo from "./RiMatchLogo";
import LockIcon from "./LockIcon";
import EmailAtIcon from "./EmailAtIcon";
import LogoutIcon from "./LogoutIcon";
import HamburgerMenuIcon from "./HamburgerMenuIcon";

export {
CogIcon,
HeartIcon,
RiMatchLogo,
LockIcon,
EmailAtIcon,
LogoutIcon,
HamburgerMenuIcon,
};
export { RiMatchLogo, LockIcon, EmailAtIcon, HamburgerMenuIcon };
1 change: 0 additions & 1 deletion frontend/src/assets/react.svg
View file
Open in desktop

This file was deleted.

8 changes: 6 additions & 2 deletions frontend/src/components/MatchCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import CheckIcon from "@mui/icons-material/Check";
import { UsersService } from "@/api/users";
import cx from "classnames";
import { useEffect, useMemo, useState } from "react";
import { ProfileCard } from "./ProfileCard";
import ProfileCard from "./ProfileCard";
import { useQueryClient } from "@tanstack/react-query";
import { CircularProgress } from "@mui/material";

Expand Down Expand Up @@ -162,7 +162,11 @@ const MatchCard = () => {
</div>
</MatchCardContainer>
)}
{isProfileOpen && <ProfileCard user={user} onClose={closeProfile} />}
{isProfileOpen && (
<div className="flex w-full flex-grow justify-center md:pb-8">
<ProfileCard user={user} onClose={closeProfile} />
</div>
)}
</>
);
};
Expand Down
130 changes: 82 additions & 48 deletions frontend/src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,111 @@
import { useState } from "react";
import { RiMatchLogo, CogIcon, HeartIcon, LogoutIcon } from "@/assets";
import { RiMatchLogo } from "@/assets";
import useLogout from "@/hooks/useLogout";
import useCurrentUserContext from "@/hooks/useCurrentUser";
import { Link } from "react-router-dom";
import MatchIcon from "@/assets/MatchIcon";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import * as Avatar from "@radix-ui/react-avatar";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import PeopleAltIcon from "@mui/icons-material/PeopleAlt";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import LogoutIcon from "@mui/icons-material/Logout";

const Navbar: React.FunctionComponent = () => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const logout = useLogout();
const user = useCurrentUserContext();

const handleOpenDropdown = () => {
setIsDropdownOpen(!isDropdownOpen);
};
const userInitials = user.firstName[0] + user.lastName[0];

return (
<nav className="flex items-center justify-between sticky top-0 Z-10 px-5 py-6 w-full border-b border-gray-300 dark:border-gray-700 sm:mb-8d dark:bg-[#1e1e1e] bg-white">
<nav className="flex items-center justify-between sticky top-0 sm:mb-4 px-5 py-6 w-full border-b border-gray-300 dark:border-gray-700 sm:mb-8d dark:bg-[#1e1e1e] bg-white">
<div>
<RiMatchLogo />
</div>
<Link
to="/"
className="text-red-500 text-4xl sm:absolute sm:w-52 sm:left-0 sm:right-0 sm:mr-auto sm:ml-auto sm:text-5xl flex justify-center font-semibold font-Pacifico"
className="text-red-500 text-4xl sm:absolute sm:w-52 sm:left-0 sm:right-0 sm:mr-auto sm:ml-auto sm:text-5xl flex justify-center font-semibold font-Pacifico focus-visible:outline-1 focus-visible:outline focus-visible:outline-slate-400"
>
RiMatch
</Link>
<div className="flex gap-3 items-center">
<div className="flex gap-6 items-center">
<p className="hidden sm:block text-2xl font-Montserrat">
{user.firstName}
</p>

<div
onClick={handleOpenDropdown}
className="h-12 w-12 md:h-14 md:w-14 hover:ring-4 user cursor-pointer relative ring-blue-700/30 rounded-full bg-cover bg-center "
style={{
backgroundImage: `url(${
user.profileImageUrl || "/Default_pfp.svg"
})`,
}}
>
{isDropdownOpen && (
<div className="drop-down w-48 overflow-hidden text-black bg-white dark:bg-[#3b3a3a] dark:text-white rounded-md shadow absolute z-10 top-12 right-3">
<Link
to="/user/profile"
className="px-3 py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-200 dark:hover:bg-slate-400"
<DropdownMenu.Root>
<DropdownMenu.Trigger
asChild
className="flex justify-center items-center focus-visible:outline-2 focus-visible:outline focus-visible:outline-slate-400 rounded-full"
>
<button type="button">
<Avatar.Root className="inline-flex items-center justify-center h-12 w-12 md:h-14 md:w-14 hover:ring-2 ring-red-400 select-none rounded-full">
<Avatar.Image
src={user.profileImageUrl}
alt="User profile picture"
className="w-full h-full bg-cover bg-center rounded-full"
/>
<Avatar.AvatarFallback
className="w-full h-full flex items-center justify-center text-red-500 bg-gray-100 rounded-full border-2 border-red-500"
delayMs={600}
>
{userInitials}
</Avatar.AvatarFallback>
</Avatar.Root>
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
className="w-48 text-black bg-white dark:bg-[#3b3a3a] dark:text-white rounded-md"
sideOffset={5}
align="end"
alignOffset={-5}
>
<DropdownMenu.Item
className="px-3 py-3 text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 focus-visible:outline-1 focus-visible:outline focus-visible:outline-slate-400 rounded-md"
asChild
>
<CogIcon /> <span>Profile</span>
</Link>
<Link
to="/matches"
className="px-3 py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-400"
<Link to="/user/profile" className="flex items-center gap-4">
<SettingsOutlinedIcon />
<span>Profile</span>
</Link>
</DropdownMenu.Item>

<DropdownMenu.Item
className="px-3 py-3 text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 focus-visible:outline-1 focus-visible:outline focus-visible:outline-slate-400 rounded-md"
asChild
>
<MatchIcon />
<span>My Matches</span>
</Link>
<Link
to="/user/preferences"
className="px-3 py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-200 dark:hover:bg-slate-400"
<Link to="/matches" className="flex items-center gap-4">
<PeopleAltIcon />
<span>My Matches</span>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item
className="px-3 py-3 text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 focus-visible:outline-1 focus-visible:outline focus-visible:outline-slate-400 rounded-md"
asChild
>
<HeartIcon />
<span> Preferences </span>
</Link>
<div
onClick={() => logout()}
className="px-3 py-3 text-sm font-medium flex items-center space-x-2 hover:bg-slate-200 dark:hover:bg-slate-400"
<Link
to="/user/preferences"
className="flex items-center gap-4"
>
<FavoriteBorderIcon />
<span> Preferences </span>
</Link>
</DropdownMenu.Item>
<DropdownMenu.Item
className="px-3 py-3 text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 focus-visible:outline-1 focus-visible:outline focus-visible:outline-slate-400 rounded-md w-full"
asChild
>
<span>
<button
type="button"
onClick={() => logout()}
className="flex items-center gap-4"
>
<LogoutIcon />
</span>
<span> Logout </span>
</div>
</div>
)}
</div>
<span> Logout </span>
</button>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
</div>
</nav>
);
Expand Down
Loading
Loading