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

UPDATE: Added beginnings of profile picture changer and changed styles

Browse Source
This commit is contained in:
JustIceO7
2025-02-27 04:49:14 +00:00
parent 40d40da956
commit 82e61f39c4
2 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/assets/styles/index.css
View File

@@ -33,11 +33,11 @@ body[data-theme="light"] {
--sideBar-bg: rgb(255, 255, 255); --sideBar-bg: rgb(255, 255, 255);
--sideBar-text: black; --sideBar-text: black;
--sideBar-profile-bg: rgb(132, 0, 255); --sideBar-profile-bg: rgb(224, 205, 241);
--sideBar-profile-text: #ffffff; --sideBar-profile-text: #ffffff;
--profile-border: #ffffff; --profile-border: #ffffff;
--follow-bg: #ff0000; --follow-bg: #aa00ff;
--follow-text: white; --follow-text: white;
--follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754); --follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754);
@@ -45,7 +45,7 @@ body[data-theme="light"] {
--recommend: rgba(5, 46, 22, 0.6); --recommend: rgba(5, 46, 22, 0.6);
--quickBar-title: #ffffff; --quickBar-title: #ffffff;
--quickBar-title-bg: rgb(132, 0, 255); --quickBar-title-bg: rgb(183, 149, 214);
--quickBar-bg: #ffffff; --quickBar-bg: #ffffff;
--quickBar-text: #000000; --quickBar-text: #000000;
--quickBar-border: #ffffff; --quickBar-border: #ffffff;

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

@@ -9,6 +9,7 @@ import Button, { EditButton } 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";
interface UserProfileData { interface UserProfileData {
id: number; id: number;
@@ -34,14 +35,15 @@ const UserPage: React.FC = () => {
const { showAuthModal, setShowAuthModal } = useAuthModal(); const { showAuthModal, setShowAuthModal } = useAuthModal();
const { username: loggedInUsername } = useAuth(); const { username: loggedInUsername } = useAuth();
const { username } = useParams(); const { username } = useParams();
const [isUser, setIsUser] = useState(true);
const navigate = useNavigate(); const navigate = useNavigate();
const bgColors = { const bgColors = {
personal: "", personal: "",
streamer: "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]", // 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-[#ff00f1] via-[#0400ff] to-[#ff00f1]", 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-[rgb(255,0,0)] via-transparent to-[rgb(0,0,255)]", "bg-gradient-to-r from-[rgba(255,100,100,0.5)] via-transparent to-[rgba(100,100,255,0.5)]",
}; };
useEffect(() => { useEffect(() => {
@@ -106,7 +108,7 @@ const UserPage: React.FC = () => {
return ( return (
<DynamicPageContent <DynamicPageContent
className={`min-h-screen ${profileData.isLive className={`min-h-screen ${profileData.isLive
? "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#2efd2d]" ? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
: bgColors[userPageVariant] : bgColors[userPageVariant]
} text-white flex flex-col`} } text-white flex flex-col`}
> >
@@ -138,12 +140,24 @@ 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)" }}
> >
<img <label className={`relative ${isUser ? 'cursor-pointer group' : ''}`}>
src="/images/monkey.png" <img
alt={`${profileData.username}'s profile`} src="/images/monkey.png"
className="sm:w-[full] h-full object-cover rounded-full alt={`${profileData.username}'s profile`}
" className="sm:w-full h-full object-cover rounded-full"
/> />
{isUser && (
<>
<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" />
</div>
<input type="file" className="hidden" />
</>
)}
</label>
</div> </div>
{/* Username - Now Directly Below PFP */} {/* Username - Now Directly Below PFP */}