From 59b290ebd9f6b66fa616b2da3c30e4e2a61101ac Mon Sep 17 00:00:00 2001 From: white <122345776@umail.ucc.ie> Date: Tue, 4 Mar 2025 16:56:49 +0000 Subject: [PATCH 1/5] UPDATE: Goose favicon added, think I prefer this to the monkey --- frontend/index.html | 3 ++- frontend/public/images/favicon_goose.ico | Bin 0 -> 15406 bytes .../images/{favicon.ico => favicon_monke.ico} | Bin 3 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 frontend/public/images/favicon_goose.ico rename frontend/public/images/{favicon.ico => favicon_monke.ico} (100%) diff --git a/frontend/index.html b/frontend/index.html index df2e671..17887eb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,8 @@ - + + Gander diff --git a/frontend/public/images/favicon_goose.ico b/frontend/public/images/favicon_goose.ico new file mode 100644 index 0000000000000000000000000000000000000000..1eb0628bf2a654d76f01e040c5bbef452e74df88 GIT binary patch literal 15406 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 literal 0 HcmV?d00001 diff --git a/frontend/public/images/favicon.ico b/frontend/public/images/favicon_monke.ico similarity index 100% rename from frontend/public/images/favicon.ico rename to frontend/public/images/favicon_monke.ico From 1d4d1a09f0d968c65e79e93f94768e0a1b85ff45 Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Tue, 4 Mar 2025 16:42:57 +0000 Subject: [PATCH 2/5] STYLE: Background Color Now Suits Every Theme --- frontend/index.html | 2 +- frontend/src/assets/styles/index.css | 26 ++++++++++++++++++++++---- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 17887eb..1242bfb 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -9,7 +9,7 @@ Gander -
+
diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css index 965d103..12a590b 100644 --- a/frontend/src/assets/styles/index.css +++ b/frontend/src/assets/styles/index.css @@ -31,6 +31,9 @@ body[data-theme="light"] { --bg-color: white; --text-color: black; + /*Global Background Colour*/ + background: linear-gradient(to top right, #2043ba, #0026a6, #63007a); + --sideBar-bg: rgb(255, 255, 255); --sideBar-text: black; --sideBar-profile-bg: rgb(224, 205, 241); @@ -80,7 +83,10 @@ body[data-theme="light"] { } body[data-theme="dark"] { - --bg-color: black; + /*Global Background Colour*/ + background: linear-gradient(to top right, #737787, #0d1e55, #567419); + + --bg-color: black; --text-color: white; --sideBar-bg: black; @@ -136,6 +142,9 @@ body[data-theme="blue"] { --bg-color: #e0f7fa; --text-color: #00539b; + /*Global Background Colour*/ + background: linear-gradient(to top right, #223b3b, #3e7bff, #170055); + --sideBar-bg: #eefafffb; --sideBar-text: #002147; --sideBar-profile-bg: #003571; @@ -185,6 +194,10 @@ body[data-theme="blue"] { } body[data-theme="green"] { + + /*Global Background Colour*/ + background: linear-gradient(to top right, #2a0d0d, #183f29, #16631e); + --bg-color: #e8f5e9; --text-color: #2e7d32; @@ -199,7 +212,7 @@ body[data-theme="green"] { --follow-text: #2e7d32; --follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754); - --liveNow: rgba(69, 150, 74, 0.6); + --liveNow: rgba(14, 173, 28, 0.491); --recommend: rgba(123, 94, 14, 0.6); /*Quick Settings*/ @@ -238,6 +251,11 @@ body[data-theme="green"] { } body[data-theme="orange"] { + + /*Global Background Colour*/ + background: linear-gradient(to top right, #074a84, #a17e1c, #4f2b61); + + --bg-color: #ffe0b2; --text-color: #e65100; @@ -251,8 +269,8 @@ body[data-theme="orange"] { --follow-text: #000000; --follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754); - --liveNow: rgba(202, 192, 53, 0.6); - --recommend: rgba(192, 111, 18, 0.6); + --liveNow: #4c008285; + --recommend: #c49c2da5; --quickBar-title-bg: #E67E22; From 726ba83a98825aee92360b9e9280d952ea88c54b Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Tue, 4 Mar 2025 17:04:48 +0000 Subject: [PATCH 3/5] STYLE: Primary Page ScrollBar --- frontend/src/assets/styles/index.css | 21 ++++++++++++++----- .../components/Layout/DynamicPageContent.tsx | 13 +++++++++--- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css index 12a590b..aa323dc 100644 --- a/frontend/src/assets/styles/index.css +++ b/frontend/src/assets/styles/index.css @@ -9,21 +9,21 @@ ::-webkit-scrollbar { - width: 10px; + width: 4px; } ::-webkit-scrollbar-track { - background: hsl(242, 100%, 10%); + background: transparent; border-radius: 5px; } ::-webkit-scrollbar-thumb { - background: #d5d5d5; + background: var(--scrollbar-color); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { - background: #555; + background: var(--scrollbar-hover); } @@ -33,6 +33,8 @@ body[data-theme="light"] { /*Global Background Colour*/ background: linear-gradient(to top right, #2043ba, #0026a6, #63007a); + --scrollbar-color: white; + --scrollbar-hover: rgb(144, 144, 144); --sideBar-bg: rgb(255, 255, 255); --sideBar-text: black; @@ -85,6 +87,8 @@ body[data-theme="light"] { body[data-theme="dark"] { /*Global Background Colour*/ background: linear-gradient(to top right, #737787, #0d1e55, #567419); + --scrollbar-color: rgb(255, 255, 255); + --scrollbar-hover: rgb(255, 255, 255); --bg-color: black; --text-color: white; @@ -144,6 +148,9 @@ body[data-theme="blue"] { /*Global Background Colour*/ background: linear-gradient(to top right, #223b3b, #3e7bff, #170055); + --scrollbar-color: white; + --scrollbar-hover: rgb(144, 144, 144); + --sideBar-bg: #eefafffb; --sideBar-text: #002147; @@ -197,6 +204,9 @@ body[data-theme="green"] { /*Global Background Colour*/ background: linear-gradient(to top right, #2a0d0d, #183f29, #16631e); + --scrollbar-color: white; + --scrollbar-hover: rgb(144, 144, 144); + --bg-color: #e8f5e9; --text-color: #2e7d32; @@ -254,7 +264,8 @@ body[data-theme="orange"] { /*Global Background Colour*/ background: linear-gradient(to top right, #074a84, #a17e1c, #4f2b61); - + --scrollbar-color: white; + --scrollbar-hover: rgb(144, 144, 144); --bg-color: #ffe0b2; --text-color: #e65100; diff --git a/frontend/src/components/Layout/DynamicPageContent.tsx b/frontend/src/components/Layout/DynamicPageContent.tsx index 4779643..e74ea8d 100644 --- a/frontend/src/components/Layout/DynamicPageContent.tsx +++ b/frontend/src/components/Layout/DynamicPageContent.tsx @@ -24,12 +24,19 @@ const DynamicPageContent: React.FC = ({ className={`${className} bg-[url(/images/background-pattern.svg)]`} style={style} > + {/* Hide Scrollbar for WebKit-based Browsers + */}
{children}
From b974ea09c5f7cb438aa20379d8ae562483b66d08 Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Tue, 4 Mar 2025 17:09:22 +0000 Subject: [PATCH 4/5] STYLE: ListRow ScrollBar --- frontend/src/assets/styles/listRow.css | 29 ++++++++++++++++------ frontend/src/components/Layout/ListRow.tsx | 2 +- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/frontend/src/assets/styles/listRow.css b/frontend/src/assets/styles/listRow.css index 5c599c4..fd9f310 100644 --- a/frontend/src/assets/styles/listRow.css +++ b/frontend/src/assets/styles/listRow.css @@ -1,8 +1,23 @@ -.hide-scrollbar::-webkit-scrollbar { - display: none; +:root { + --scrollbar-background: linear-gradient(to right, #6a11cb, #2575fc); + --scrollbar-thumb: rgba(255, 255, 255, 0.6); } - -.hide-scrollbar { - -ms-overflow-style: none; - scrollbar-width: none; -} \ No newline at end of file + +::-webkit-scrollbar { + height: 4px; +} + +::-webkit-scrollbar-track { + background: transparent; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.9); +} + diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx index e52e087..e2c532a 100644 --- a/frontend/src/components/Layout/ListRow.tsx +++ b/frontend/src/components/Layout/ListRow.tsx @@ -47,7 +47,7 @@ const ListRow = forwardRef((props, ref) => { const [currentItems, setCurrentItems] = useState(items); const slider = useRef(null); - const scrollAmount = window.innerWidth * 0.3; + const scrollAmount = window.innerWidth * 0.4; const navigate = useNavigate(); const addMoreItems = (newItems: ItemType[]) => { From 552a379baa2ed3715e0671fbd1dfc7ba4617e936 Mon Sep 17 00:00:00 2001 From: EvanLin3141 Date: Tue, 4 Mar 2025 17:30:59 +0000 Subject: [PATCH 5/5] ADD: Pfp in Following on Sidebar added styling for streamer box --- frontend/src/assets/styles/index.css | 20 +- .../src/components/Navigation/Sidebar.tsx | 270 +++++++++--------- 2 files changed, 154 insertions(+), 136 deletions(-) diff --git a/frontend/src/assets/styles/index.css b/frontend/src/assets/styles/index.css index aa323dc..f18263b 100644 --- a/frontend/src/assets/styles/index.css +++ b/frontend/src/assets/styles/index.css @@ -45,6 +45,9 @@ body[data-theme="light"] { --follow-bg: #aa00ff; --follow-text: white; --follow-shadow: 0px 0px 15px rgba(94, 94, 94, 0.754); + --streamer-box: #aa00ff; + --streamer-text: white; + --streamer-shadow: 0px 0px 10px rgba(0, 0, 0, 0.754); --liveNow: rgba(46, 16, 16, 0.6); --recommend: rgba(5, 46, 22, 0.6); @@ -102,11 +105,14 @@ body[data-theme="dark"] { --follow-bg: #a50000c6; --follow-text: rgb(255, 255, 255); --follow-shadow: 0px 0px 15px rgba(255, 255, 255, 0.966); + --streamer-box: #8b1711; + --streamer-text: white; + --streamer-shadow: 0px 0px 25px rgb(255, 255, 255); + --liveNow: rgba(77, 29, 29, 0.6); --recommend: rgba(4, 63, 28, 0.6); - --quickBar-title: rgb(255, 255, 255); --quickBar-title-bg: rgb(0, 0, 0); --quickBar-bg: #000000d3; @@ -160,7 +166,9 @@ body[data-theme="blue"] { --follow-bg: #ffffff; --follow-shadow: 0px 0px 15px rgba(161, 222, 255, 0.823); - + --streamer-box: #00b3ff; + --streamer-text: white; + --streamer-shadow: 0px 0px 10px rgb(14, 18, 93); --liveNow: rgba(5, 59, 103, 0.801); --recommend: rgba(112, 116, 96, 0.6); @@ -221,7 +229,9 @@ body[data-theme="green"] { --follow-bg: #b5ffb5; --follow-text: #2e7d32; --follow-shadow: 0px 0px 15px rgba(84, 255, 92, 0.754); - + --streamer-box: #32b90dd4; + --streamer-text: rgb(255, 255, 255); + --streamer-shadow: 0px 0px 10px rgb(1, 112, 25); --liveNow: rgba(14, 173, 28, 0.491); --recommend: rgba(123, 94, 14, 0.6); @@ -279,7 +289,9 @@ body[data-theme="orange"] { --follow-bg: #fdfd00af; --follow-text: #000000; --follow-shadow: 0px 0px 15px rgba(0, 229, 255, 0.754); - + --streamer-box: #ffff00; + --streamer-text: rgb(0, 0, 0); + --streamer-shadow: 0px 0px 10px rgba(195, 75, 0, 0.754); --liveNow: #4c008285; --recommend: #c49c2da5; diff --git a/frontend/src/components/Navigation/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar.tsx index 18b03b8..bd267dc 100644 --- a/frontend/src/components/Navigation/Sidebar.tsx +++ b/frontend/src/components/Navigation/Sidebar.tsx @@ -7,161 +7,167 @@ import { ToggleButton } from "../Input/Button"; import { getCategoryThumbnail } from "../../utils/thumbnailUtils"; interface Streamer { - user_id: number; - username: string; + user_id: number; + username: string; } interface Category { - category_id: number; - category_name: string; + category_id: number; + category_name: string; } interface SideBarProps { - extraClasses?: string; + extraClasses?: string; } const Sidebar: React.FC = ({ extraClasses = "" }) => { - const { showSideBar, setShowSideBar } = useSidebar(); - const navigate = useNavigate(); - const { username, isLoggedIn, profilePicture } = useAuth(); - const [followedStreamers, setFollowedStreamers] = useState([]); - const [followedCategories, setFollowedCategories] = useState([]); - const [justToggled, setJustToggled] = useState(false); - const sidebarId = useRef(Math.floor(Math.random() * 1000000)); + const { showSideBar, setShowSideBar } = useSidebar(); + const navigate = useNavigate(); + const { username, isLoggedIn, profilePicture } = useAuth(); + const [followedStreamers, setFollowedStreamers] = useState([]); + const [followedCategories, setFollowedCategories] = useState([]); + const [justToggled, setJustToggled] = useState(false); + const sidebarId = useRef(Math.floor(Math.random() * 1000000)); - // Fetch followed streamers & categories - useEffect(() => { - if (!isLoggedIn) return; + // Fetch followed streamers & categories + useEffect(() => { + if (!isLoggedIn) return; - const fetchFollowData = async () => { - try { - const response = await fetch("/api/user/following"); - if (!response.ok) throw new Error("Failed to fetch followed content"); - const data = await response.json(); - setFollowedStreamers(data.streams); - setFollowedCategories(data.categories); - } catch (error) { - console.error("Error fetching followed content:", error); - } - }; + const fetchFollowData = async () => { + try { + const response = await fetch("/api/user/following"); + if (!response.ok) throw new Error("Failed to fetch followed content"); + const data = await response.json(); + setFollowedStreamers(data.streams); + setFollowedCategories(data.categories); + } catch (error) { + console.error("Error fetching followed content:", error); + } + }; - fetchFollowData(); - }, [isLoggedIn]); + fetchFollowData(); + }, [isLoggedIn]); - const handleSideBar = () => { - setShowSideBar(!showSideBar); - setJustToggled(true); - setTimeout(() => setJustToggled(false), 200); - }; + const handleSideBar = () => { + setShowSideBar(!showSideBar); + setJustToggled(true); + setTimeout(() => setJustToggled(false), 200); + }; - // Keyboard shortcut to toggle sidebar - useEffect(() => { - const handleKeyPress = (e: KeyboardEvent) => { - if (e.key === "s" && document.activeElement == document.body && isLoggedIn) handleSideBar(); - }; + // Keyboard shortcut to toggle sidebar + useEffect(() => { + const handleKeyPress = (e: KeyboardEvent) => { + if (e.key === "s" && document.activeElement == document.body && isLoggedIn) handleSideBar(); + }; - document.addEventListener("keydown", handleKeyPress); + document.addEventListener("keydown", handleKeyPress); - return () => { - document.removeEventListener("keydown", handleKeyPress); - }; - }, [showSideBar, setShowSideBar, isLoggedIn]); + return () => { + document.removeEventListener("keydown", handleKeyPress); + }; + }, [showSideBar, setShowSideBar, isLoggedIn]); - return ( - <> - 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} - > - + return ( + <> + 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} + > + - {!showSideBar && !justToggled && ( - - Press S - - )} - -
+ Press S + + )} + +
- {/* Profile Info */} -
- { - e.currentTarget.src = "/images/pfps/default.png"; - e.currentTarget.onerror = null; - }} - alt="profile picture" - className="w-[3em] h-[3em] object-cover rounded-full border-[0.15em] border-purple-500 cursor-pointer" - onClick={() => navigate(`/user/${username}`)} - /> -
-
Logged in as
- -
-
+ > + {/* Profile Info */} +
+ { + e.currentTarget.src = "/images/pfps/default.png"; + e.currentTarget.onerror = null; + }} + alt="profile picture" + className="w-[3em] h-[3em] object-cover rounded-full border-[0.15em] border-purple-500 cursor-pointer" + onClick={() => navigate(`/user/${username}`)} + /> +
+
Logged in as
+ +
+
-
-
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")} - onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} - > -

Following

-
-
-

Streamers

-
- {followedStreamers.map((streamer) => ( - - ))} -
-
+
+
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")} + onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} + > +

Following

+
+
+

Streamers

+
+ {followedStreamers.map((streamer) => ( +
navigate(`/user/${streamer.username}`)} + onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--streamer-shadow)")} + onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")} + > + {`${streamer.username}'s +
{streamer.username}
+
+ ))} +
+
-
-

Categories

+
+

Categories

- {/* Followed Categories */} -
- {followedCategories.map((category) => { - return ( -
+ {followedCategories.map((category) => { + return ( +
(window.location.href = `/category/${category.category_name}`)} - > - {category.category_name} -
- {category.category_name} -
-
- ); - })} -
-
-
-
- - ); + onClick={() => (window.location.href = `/category/${category.category_name}`)} + > + {category.category_name} +
+ {category.category_name} +
+
+ ); + })} +
+
+
+ + + ); }; export default Sidebar;