From f114d2ef849698ddc3dbd5fce3648a739899e764 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Mon, 22 Jul 2024 20:15:28 -0400 Subject: [PATCH] Rewrite homepage to align with designs (#19) * (WIP) Rewrite homepage to align with designs * Delete src/components/images/banners/homepage_text_outline.svg * py * Better alignment of copyright logo * add homepage banner svg * adjust page layout + a bit more mobile friendly * elevate opacity control to container & move text outline to page content start for mobile * pad text outline a bit & make text on homepage selectable * adjust homepage banner clip path * mobile padding + make outline move with padding * remove score carousel stack for now * align statistics properly * add shadows to statistics icons * adjust spacings a bit * align text to the right * align text to center for mobile * scale outline with width * Fix css errors in tsx components * Remove svg clip path * Disable text overlay on homepage * Add navbar outline on homepage * Fix navbar spacing on mobile * Remove unused png --------- Co-authored-by: infernalfire72 --- src/components/Footer.tsx | 6 +- src/components/Navbar.tsx | 19 +- .../images/banners/homepage_banner.svg | 23 ++ .../images/icons/HomepagePPIcon.tsx | 62 +++++ .../images/icons/HomepageScoresIcon.tsx | 48 ++++ .../images/icons/HomepageUsersIcon.tsx | 48 ++++ .../images/logos/HomepageTextOutline.tsx | 81 ++++++ .../images/logos/WhiteoutAkatsukiLogo.tsx | 44 ++++ src/pages/HomePage.tsx | 243 ++++++++++++------ 9 files changed, 489 insertions(+), 85 deletions(-) create mode 100644 src/components/images/banners/homepage_banner.svg create mode 100644 src/components/images/icons/HomepagePPIcon.tsx create mode 100644 src/components/images/icons/HomepageScoresIcon.tsx create mode 100644 src/components/images/icons/HomepageUsersIcon.tsx create mode 100644 src/components/images/logos/HomepageTextOutline.tsx create mode 100644 src/components/images/logos/WhiteoutAkatsukiLogo.tsx diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 7826f66..3a293e7 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -117,8 +117,10 @@ export default function Footer() { pb={4} spacing={{ xs: 2, sm: 0 }} > - - + + + + Akatsuki 2024 diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index a4e1342..93b9d7e 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -10,7 +10,7 @@ import { debounce, Box, } from "@mui/material" -import { Link, useNavigate } from "react-router-dom" +import { Link, useLocation, useNavigate } from "react-router-dom" import { FavoriteOutlined } from "@mui/icons-material" import { removeIdentityFromLocalStorage, @@ -25,6 +25,11 @@ import { } from "../adapters/akatsuki-api/search" import { UserPrivileges } from "../privileges" +const PAGES_WITH_VISIBLE_OUTLINE = ["/"] + +const shouldUseVisibleOutline = (pagePathName: string) => + PAGES_WITH_VISIBLE_OUTLINE.includes(pagePathName) + export default function Navbar() { const navigate = useNavigate() const { identity, setIdentity } = useIdentityContext() @@ -36,6 +41,9 @@ export default function Navbar() { const [searchQueryValue, setSearchQueryValue] = useState(null) + const location = useLocation() + const useVisibleOutline = shouldUseVisibleOutline(location.pathname) + const handleLogout = async () => { if (identity !== null) { console.warn("User attempted a logout without being logged in") @@ -80,14 +88,19 @@ export default function Navbar() { left={0} // In line with https://mui.com/material-ui/customization/z-index/ zIndex={900} - sx={{ bgcolor: "transparent" }} + sx={{ + background: useVisibleOutline + ? "linear-gradient(0deg, rgba(17, 14, 27, 0.6) 0%, rgba(17, 14, 27, 0.528) 100%)" + : "transparent", + }} > {/* Left Navbar */} + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/images/icons/HomepagePPIcon.tsx b/src/components/images/icons/HomepagePPIcon.tsx new file mode 100644 index 0000000..5db7c85 --- /dev/null +++ b/src/components/images/icons/HomepagePPIcon.tsx @@ -0,0 +1,62 @@ +export const HomepagePPIcon = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/images/icons/HomepageScoresIcon.tsx b/src/components/images/icons/HomepageScoresIcon.tsx new file mode 100644 index 0000000..88a4a40 --- /dev/null +++ b/src/components/images/icons/HomepageScoresIcon.tsx @@ -0,0 +1,48 @@ +export const HomepageScoresIcon = () => { + return ( + + + + + + + + + + + + + + + ) +} diff --git a/src/components/images/icons/HomepageUsersIcon.tsx b/src/components/images/icons/HomepageUsersIcon.tsx new file mode 100644 index 0000000..b39c4cb --- /dev/null +++ b/src/components/images/icons/HomepageUsersIcon.tsx @@ -0,0 +1,48 @@ +export const HomepageUsersIcon = () => { + return ( + + + + + + + + + + + + + + + ) +} diff --git a/src/components/images/logos/HomepageTextOutline.tsx b/src/components/images/logos/HomepageTextOutline.tsx new file mode 100644 index 0000000..afcf80d --- /dev/null +++ b/src/components/images/logos/HomepageTextOutline.tsx @@ -0,0 +1,81 @@ +export const HomepageTextOutline = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/components/images/logos/WhiteoutAkatsukiLogo.tsx b/src/components/images/logos/WhiteoutAkatsukiLogo.tsx new file mode 100644 index 0000000..b194f7d --- /dev/null +++ b/src/components/images/logos/WhiteoutAkatsukiLogo.tsx @@ -0,0 +1,44 @@ +export const WhiteoutAkatsukiLogo = () => { + return ( + + + + + + + + + + + ) +} diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 781999a..567daa0 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,85 +1,168 @@ -import { - Button, - Grid, - Typography, - type ButtonPropsColorOverrides, -} from "@mui/material" -import { Link } from "react-router-dom" -import Stack from "@mui/material/Stack" -import { type OverridableStringUnion } from "@mui/types" -import { useIdentityContext } from "../context/identity" +import { HomepageTextOutline } from "../components/images/logos/HomepageTextOutline" +import HomepageBanner from "../components/images/banners/homepage_banner.svg" -const NavButton = ({ - to, - color, - label, -}: { - to: string - color: OverridableStringUnion< - | "inherit" - | "primary" - | "secondary" - | "success" - | "error" - | "info" - | "warning", - ButtonPropsColorOverrides - > - label: string -}) => { - return ( - - - - ) -} - -const Header = () => ( - <> - - Welcome to Akatsuki - - - The largest competitive osu! private server - - -) +import Box from "@mui/material/Box" +import Stack from "@mui/material/Stack" +import Typography from "@mui/material/Typography" +import { Button, Container, Grid } from "@mui/material" +import { HomepagePPIcon } from "../components/images/icons/HomepagePPIcon" +import { HomepageUsersIcon } from "../components/images/icons/HomepageUsersIcon" +import { HomepageScoresIcon } from "../components/images/icons/HomepageScoresIcon" +import { WhiteoutAkatsukiLogo } from "../components/images/logos/WhiteoutAkatsukiLogo" +import { Link } from "react-router-dom" export const HomePage = () => { - const { identity } = useIdentityContext() - return ( - - -
- - - - {identity ? ( - - ) : ( - - )} - - - - + + + + {/* TODO: figure out how to scale this */} + {/* + + */} + + + + + + + Welcome to Akatsuki! We are an osu! private server mainly + based around the relax mod - featuring score submission, + leaderboards & rankings, custom pp, and much more for relax, + autopilot and vanilla osu! + + + + + + + + + + + + + + + + + + + + 1,483,238 + + + pp earned + + + + + + + 92,383,238 + + + scores set + + + + + + + + + + + + + 172,395 + + + registered users + + + + + + + + + + ) }