dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

REFACTOR: Align icon imports;

Browse Source 
REFACTOR: Remove obsolete `EditButton` component
This commit is contained in:
Chris-1010
2025-02-27 12:28:44 +00:00
parent eb65e71cfb
commit cba900f8e0
14 changed files with 162 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { ToggleButton } from "../Input/Button"; import { ToggleButton } from "../Input/Button";
import { LogIn as LogInIcon, User as UserIcon } from "lucide-react"; import { LogInIcon, UserIcon } from "lucide-react";
import LoginForm from "./LoginForm"; import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm"; import RegisterForm from "./RegisterForm";
import ForgotPasswordForm from "./ForgotPasswordForm"; import ForgotPasswordForm from "./ForgotPasswordForm";

2
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Input from "../Input/Input"; import Input from "../Input/Input";
import Button, { ToggleButton } from "../Input/Button"; import Button from "../Input/Button";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth"; import GoogleLogin from "./OAuth";
import { CircleHelp as ForgotIcon } from "lucide-react"; import { CircleHelp as ForgotIcon } from "lucide-react";

17
frontend/src/components/Input/Button.tsx
View File

@@ -23,23 +23,6 @@ const Button: React.FC<ButtonProps> = ({
); );
}; };
interface EditButtonProps extends ButtonProps {}
export const EditButton: React.FC<EditButtonProps> = ({
children = "",
extraClasses = "",
onClick,
}) => {
return (
<button
className={`${extraClasses} p-[0.5em] bg-yellow-500 hover:bg-black rounded-[3rem] border-2 border-white shadow-lg transition-all duration-300`}
onClick={onClick}
>
{children}
</button>
);
};
interface ToggleButtonProps extends ButtonProps { interface ToggleButtonProps extends ButtonProps {
toggled?: boolean; toggled?: boolean;
} }

2
frontend/src/components/Input/SearchBar.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import Input from "./Input"; import Input from "./Input";
import { Search as SearchIcon } from "lucide-react"; import { SearchIcon } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
interface SearchBarProps { interface SearchBarProps {

2
frontend/src/components/Layout/Footer.tsx
View File

@@ -1,4 +1,4 @@
import { Mail as MailIcon } from "lucide-react"; import { MailIcon } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
const Footer = () => { const Footer = () => {

4
frontend/src/components/Layout/ListRow.tsx
View File

@@ -1,6 +1,6 @@
import { import {
ArrowLeft as ArrowLeftIcon, ArrowLeftIcon,
ArrowRight as ArrowRightIcon, ArrowRightIcon,
} from "lucide-react"; } from "lucide-react";
import React, { import React, {
forwardRef, forwardRef,

6
frontend/src/components/Navigation/Navbar.tsx
View File

@@ -2,9 +2,9 @@ import React, { useEffect } from "react";
import Logo from "../Layout/Logo"; import Logo from "../Layout/Logo";
import Button, { ToggleButton } from "../Input/Button"; import Button, { ToggleButton } from "../Input/Button";
import { import {
LogIn as LogInIcon, LogInIcon,
LogOut as LogOutIcon, LogOutIcon,
Settings as SettingsIcon, SettingsIcon,
Radio as LiveIcon, Radio as LiveIcon,
} from "lucide-react"; } from "lucide-react";
import SearchBar from "../Input/SearchBar"; import SearchBar from "../Input/SearchBar";

2
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Sidebar as SidebarIcon } from "lucide-react"; import { SidebarIcon } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import { useSidebar } from "../../context/SidebarContext"; import { useSidebar } from "../../context/SidebarContext";

12
frontend/src/components/Settings/ThemeSetting.tsx
View File

@@ -1,38 +1,38 @@
import React from "react"; import React from "react";
import { Sun, Moon, Droplet, Leaf, Flame } from "lucide-react"; import { SunIcon, MoonIcon, DropletIcon, LeafIcon, FlameIcon } from "lucide-react";
import { useTheme } from "../../context/ThemeContext"; import { useTheme } from "../../context/ThemeContext";
const themeConfig = { const themeConfig = {
light: { light: {
icon: Sun, icon: SunIcon,
color: "text-yellow-400", color: "text-yellow-400",
background: "bg-white", background: "bg-white",
hoverBg: "hover:bg-gray-100", hoverBg: "hover:bg-gray-100",
label: "Light Theme", label: "Light Theme",
}, },
dark: { dark: {
icon: Moon, icon: MoonIcon,
color: "text-white", color: "text-white",
background: "bg-gray-800", background: "bg-gray-800",
hoverBg: "hover:bg-gray-700", hoverBg: "hover:bg-gray-700",
label: "Dark Theme", label: "Dark Theme",
}, },
blue: { blue: {
icon: Droplet, icon: DropletIcon,
color: "text-blue-500", color: "text-blue-500",
background: "bg-blue-50", background: "bg-blue-50",
hoverBg: "hover:bg-blue-100", hoverBg: "hover:bg-blue-100",
label: "Blue Theme", label: "Blue Theme",
}, },
green: { green: {
icon: Leaf, icon: LeafIcon,
color: "text-green-500", color: "text-green-500",
background: "bg-green-50", background: "bg-green-50",
hoverBg: "hover:bg-green-100", hoverBg: "hover:bg-green-100",
label: "Green Theme", label: "Green Theme",
}, },
orange: { orange: {
icon: Flame, icon: FlameIcon,
color: "text-orange-500", color: "text-orange-500",
background: "bg-orange-50", background: "bg-orange-50",
hoverBg: "hover:bg-orange-100", hoverBg: "hover:bg-orange-100",

4
frontend/src/components/Stream/ChatPanel.tsx
View File

@@ -6,7 +6,7 @@ import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext"; import { useAuth } from "../../context/AuthContext";
import { useSocket } from "../../context/SocketContext"; import { useSocket } from "../../context/SocketContext";
import { useChat } from "../../context/ChatContext"; import { useChat } from "../../context/ChatContext";
import { ArrowLeftFromLineIcon, ArrowRightFromLine } from "lucide-react"; import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon } from "lucide-react";
interface ChatMessage { interface ChatMessage {
chatter_username: string; chatter_username: string;
@@ -149,7 +149,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
onClick={toggleChat} onClick={toggleChat}
className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[3.3vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[50] duration-[0.3s] transition-all`} className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[3.3vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[50] duration-[0.3s] transition-all`}
> >
{showChat ? <ArrowRightFromLine /> : <ArrowLeftFromLineIcon />} {showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
<small className={`absolute ${showChat ? "right-0 group-hover:-right-[4vw]" : "left-0 group-hover:-left-[4vw]"} p-1 rounded-md group-hover:bg-white/10 w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}> <small className={`absolute ${showChat ? "right-0 group-hover:-right-[4vw]" : "left-0 group-hover:-left-[4vw]"} p-1 rounded-md group-hover:bg-white/10 w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}>
Press C Press C

8
frontend/src/pages/FollowedCategories.tsx
View File

@@ -1,11 +1,9 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useAuth } from "../context/AuthContext"; import { useAuth } from "../context/AuthContext";
import { useSidebar } from "../context/SidebarContext"; import { CircleMinus as RemoveIcon, CirclePlus as AddIcon } from "lucide-react";
import { CircleMinus, CirclePlus, Sidebar as SidebarIcon } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import DynamicPageContent from "../components/Layout/DynamicPageContent"; import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
import Button from "../components/Input/Button"; import Button from "../components/Input/Button";
import { useCategoryFollow } from "../hooks/useCategoryFollow"; import { useCategoryFollow } from "../hooks/useCategoryFollow";
import { ListItemProps as StreamData } from "../components/Layout/ListItem"; import { ListItemProps as StreamData } from "../components/Layout/ListItem";
@@ -125,9 +123,9 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
onClick={() => toggleFollow(category.category_id, category.category_name)} onClick={() => toggleFollow(category.category_id, category.category_name)}
> >
{category.isFollowing ? ( {category.isFollowing ? (
<CircleMinus className="text-white w-5 h-5" /> <RemoveIcon className="text-white w-5 h-5" />
) : ( ) : (
<CirclePlus className="text-white w-5 h-5" /> <AddIcon className="text-white w-5 h-5" />
)} )}
</Button> </Button>

220
frontend/src/pages/Following.tsx
View File

@@ -8,122 +8,136 @@ import { CategoryType } from "../types/CategoryType";
// Define TypeScript interfaces // Define TypeScript interfaces
interface Streamer { interface Streamer {
user_id: number; user_id: number;
username: string; username: string;
} }
interface FollowingProps { interface FollowingProps {
extraClasses?: string; extraClasses?: string;
} }
const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => { const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
const { showSideBar, setShowSideBar } = useSidebar(); const { showSideBar, setShowSideBar } = useSidebar();
const navigate = useNavigate(); const navigate = useNavigate();
const { username, isLoggedIn } = useAuth(); const { username, isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]); const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
// Fetch followed streamers // Fetch followed streamers
useEffect(() => { useEffect(() => {
const fetchFollowedStreamers = async () => { const fetchFollowedStreamers = async () => {
try { try {
const response = await fetch("/api/user/following"); const response = await fetch("/api/user/following");
if (!response.ok) throw new Error("Failed to fetch followed streamers"); if (!response.ok) throw new Error("Failed to fetch followed streamers");
const data = await response.json(); const data = await response.json();
setFollowedStreamers(data.streamers || []); setFollowedStreamers(data.streamers || []);
} catch (error) { } catch (error) {
console.error("Error fetching followed streamers:", error); console.error("Error fetching followed streamers:", error);
} }
};
if (isLoggedIn) {
fetchFollowedStreamers();
}
}, [isLoggedIn]);
// Handle sidebar toggle
const handleSideBar = () => {
setShowSideBar(!showSideBar);
}; };
return ( if (isLoggedIn) {
<> fetchFollowedStreamers();
{/* Sidebar Toggle Button */} }
<ToggleButton }, [isLoggedIn]);
onClick={handleSideBar}
extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]" // Handle sidebar toggle
} ease-in-out cursor-pointer z-[50]`} const handleSideBar = () => {
toggled={showSideBar} setShowSideBar(!showSideBar);
};
return (
<>
{/* Sidebar Toggle Button */}
<ToggleButton
onClick={handleSideBar}
extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar}
>
<SidebarIcon className="h-[2vw] w-[2vw]" />
{showSideBar && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press S
</small>
)}
</ToggleButton>
{/* Sidebar Container */}
<div
id="sidebar"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
>
{/* Profile Info */}
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
<img
src="/images/monkey.png"
alt="profile picture"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
/>
<div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
Logged in as
</h5>
<button
className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)}
> >
<SidebarIcon className="h-[2vw] w-[2vw]" /> <div className="text-[var(--sideBar-profile-text)]">
{username}
</div>
</button>
</div>
</div>
{showSideBar && ( {/* Following Section */}
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200"> <div
Press S id="following"
</small> className="flex flex-col flex-grow justify-evenly p-4 gap-4"
)} >
</ToggleButton> <div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
Following
</h1>
</div>
{/* Sidebar Container */} {/* Streamers Followed */}
<div <div
id="sidebar" id="streamers-followed"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide className="flex flex-col flex-grow items-center"
transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full" >
} ${extraClasses}`} <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
> Streamers
{/* Profile Info */} </h2>
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]"> <div className="flex flex-col flex-grow justify-evenly w-full">
<img {followedStreamers.map((streamer) => (
src="/images/monkey.png" <button
alt="profile picture" key={`streamer-${streamer.username}`}
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer" className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${username}`)} onClick={() => navigate(`/user/${streamer.username}`)}
/> >
<div className="text-center flex flex-col items-center justify-center"> {streamer.username}
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]"> </button>
Logged in as ))}
</h5>
<button
className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)}
>
<div className="text-[var(--sideBar-profile-text)]">{username}</div>
</button>
</div>
</div>
{/* Following Section */}
<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
<div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
Following
</h1>
</div>
{/* Streamers Followed */}
<div id="streamers-followed" className="flex flex-col flex-grow items-center">
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
Streamers
</h2>
<div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => (
<button
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
</button>
))}
</div>
</div>
</div>
</div> </div>
</> </div>
); </div>
</div>
</>
);
}; };
export default Following; export default Following;

4
frontend/src/pages/StreamDashboardPage.tsx
View File

@@ -3,7 +3,7 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
import Button from "../components/Input/Button"; import Button from "../components/Input/Button";
import Input from "../components/Input/Input"; import Input from "../components/Input/Input";
import { useCategories } from "../hooks/useContent"; import { useCategories } from "../hooks/useContent";
import { X as XIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react"; import { X as CloseIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
import { useAuth } from "../context/AuthContext"; import { useAuth } from "../context/AuthContext";
import { debounce } from "lodash"; import { debounce } from "lodash";
import VideoPlayer from "../components/Stream/VideoPlayer"; import VideoPlayer from "../components/Stream/VideoPlayer";
@@ -365,7 +365,7 @@ const StreamDashboardPage: React.FC = () => {
onClick={clearThumbnail} onClick={clearThumbnail}
className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors" className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors"
> >
<XIcon size={16} className="text-white" /> <CloseIcon size={16} className="text-white" />
</button> </button>
)} )}
</div> </div>

35
frontend/src/pages/UserPage.tsx
View File

@@ -5,11 +5,11 @@ import { useAuth } from "../context/AuthContext";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { useFollow } from "../hooks/useFollow"; import { useFollow } from "../hooks/useFollow";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Button, { EditButton } from "../components/Input/Button"; import Button from "../components/Input/Button";
import DynamicPageContent from "../components/Layout/DynamicPageContent"; import DynamicPageContent from "../components/Layout/DynamicPageContent";
import LoadingScreen from "../components/Layout/LoadingScreen"; import LoadingScreen from "../components/Layout/LoadingScreen";
import { StreamListItem } from "../components/Layout/ListItem"; import { StreamListItem } from "../components/Layout/ListItem";
import { Camera } from "lucide-react"; import { CameraIcon } from "lucide-react";
interface UserProfileData { interface UserProfileData {
id: number; id: number;
@@ -40,7 +40,8 @@ const UserPage: React.FC = () => {
const bgColors = { const bgColors = {
personal: "", personal: "",
streamer: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 0, 0.5)]", // offline streamer streamer:
"bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 0, 0.5)]", // offline streamer
user: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 241, 0.5)]", user: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 241, 0.5)]",
admin: admin:
"bg-gradient-to-r from-[rgba(255,100,100,0.5)] via-transparent to-[rgba(100,100,255,0.5)]", "bg-gradient-to-r from-[rgba(255,100,100,0.5)] via-transparent to-[rgba(100,100,255,0.5)]",
@@ -107,12 +108,12 @@ const UserPage: React.FC = () => {
return ( return (
<DynamicPageContent <DynamicPageContent
className={`min-h-screen ${profileData.isLive className={`min-h-screen ${
? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]" profileData.isLive
: bgColors[userPageVariant] ? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
} text-white flex flex-col`} : bgColors[userPageVariant]
} text-white flex flex-col`}
> >
<div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full"> <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
<div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8"> <div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
{/* Profile Section - TOP */} {/* Profile Section - TOP */}
@@ -140,7 +141,9 @@ const UserPage: React.FC = () => {
rounded-full overflow-hidden flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20" rounded-full overflow-hidden flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
style={{ boxShadow: "var(--user-pfp-border-shadow)" }} style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
> >
<label className={`relative ${isUser ? 'cursor-pointer group' : ''}`}> <label
className={`relative ${isUser ? "cursor-pointer group" : ""}`}
>
<img <img
src="/images/monkey.png" src="/images/monkey.png"
alt={`${profileData.username}'s profile`} alt={`${profileData.username}'s profile`}
@@ -151,13 +154,15 @@ const UserPage: React.FC = () => {
<> <>
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div> <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<Camera size={32} className="text-white bg-black/50 p-1 rounded-full" /> <CameraIcon
size={32}
className="text-white bg-black/50 p-1 rounded-full"
/>
</div> </div>
<input type="file" className="hidden" /> <input type="file" className="hidden" />
</> </>
)} )}
</label> </label>
</div> </div>
{/* Username - Now Directly Below PFP */} {/* Username - Now Directly Below PFP */}
@@ -284,7 +289,8 @@ const UserPage: React.FC = () => {
} }
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
> >
<button className="text-[var(--follow-text)] whitespace-pre-wrap" <button
className="text-[var(--follow-text)] whitespace-pre-wrap"
onClick={() => navigate(`/user/${username}/following`)} onClick={() => navigate(`/user/${username}/following`)}
> >
Following Following
@@ -312,10 +318,11 @@ const UserPage: React.FC = () => {
} }
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
> >
<button onClick={() => navigate(`/user/${username}/yourCategories`)}> <button
onClick={() => navigate(`/user/${username}/yourCategories`)}
>
Categories Categories
</button> </button>
</div> </div>
</div> </div>
</div> </div>