REFACTOR: Align icon imports;
REFACTOR: Remove obsolete `EditButton` component
This commit is contained in:
@@ -5,11 +5,11 @@ import { useAuth } from "../context/AuthContext";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useFollow } from "../hooks/useFollow";
|
||||
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 LoadingScreen from "../components/Layout/LoadingScreen";
|
||||
import { StreamListItem } from "../components/Layout/ListItem";
|
||||
import { Camera } from "lucide-react";
|
||||
import { CameraIcon } from "lucide-react";
|
||||
|
||||
interface UserProfileData {
|
||||
id: number;
|
||||
@@ -40,8 +40,9 @@ const UserPage: React.FC = () => {
|
||||
|
||||
const bgColors = {
|
||||
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
|
||||
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)]",
|
||||
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)]",
|
||||
admin:
|
||||
"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 (
|
||||
<DynamicPageContent
|
||||
className={`min-h-screen ${profileData.isLive
|
||||
? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
|
||||
: bgColors[userPageVariant]
|
||||
} text-white flex flex-col`}
|
||||
className={`min-h-screen ${
|
||||
profileData.isLive
|
||||
? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
|
||||
: 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="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
|
||||
{/* 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"
|
||||
style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
|
||||
>
|
||||
<label className={`relative ${isUser ? 'cursor-pointer group' : ''}`}>
|
||||
<label
|
||||
className={`relative ${isUser ? "cursor-pointer group" : ""}`}
|
||||
>
|
||||
<img
|
||||
src="/images/monkey.png"
|
||||
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 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>
|
||||
<input type="file" className="hidden" />
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Username - Now Directly Below PFP */}
|
||||
@@ -284,7 +289,8 @@ const UserPage: React.FC = () => {
|
||||
}
|
||||
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`)}
|
||||
>
|
||||
Following
|
||||
@@ -312,10 +318,11 @@ const UserPage: React.FC = () => {
|
||||
}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
|
||||
>
|
||||
<button onClick={() => navigate(`/user/${username}/yourCategories`)}>
|
||||
<button
|
||||
onClick={() => navigate(`/user/${username}/yourCategories`)}
|
||||
>
|
||||
Categories
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user