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>

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

@@ -50,7 +50,10 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
{/* Sidebar Toggle Button */} {/* Sidebar Toggle Button */}
<ToggleButton <ToggleButton
onClick={handleSideBar} onClick={handleSideBar}
extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]" extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`} } ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar} toggled={showSideBar}
> >
@@ -67,7 +70,8 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
<div <div
id="sidebar" 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 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" transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`} } ${extraClasses}`}
> >
{/* Profile Info */} {/* Profile Info */}
@@ -86,16 +90,23 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
className="font-black text-[1.4rem] hover:underline" className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)} onClick={() => navigate(`/user/${username}`)}
> >
<div className="text-[var(--sideBar-profile-text)]">{username}</div> <div className="text-[var(--sideBar-profile-text)]">
{username}
</div>
</button> </button>
</div> </div>
</div> </div>
{/* Following Section */} {/* Following Section */}
<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4"> <div
id="following"
className="flex flex-col flex-grow justify-evenly p-4 gap-4"
>
<div <div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300" 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)")} onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
> >
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default"> <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
@@ -104,7 +115,10 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
</div> </div>
{/* Streamers Followed */} {/* Streamers Followed */}
<div id="streamers-followed" className="flex flex-col flex-grow items-center"> <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"> <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
Streamers Streamers
</h2> </h2>

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>

29
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 ${
profileData.isLive
? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]" ? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
: bgColors[userPageVariant] : bgColors[userPageVariant]
} text-white flex flex-col`} } 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>