diff --git a/src/assets/logo_gamestart_transparent.png b/src/assets/logo_gamestart_transparent.png new file mode 100644 index 0000000..3725d9f Binary files /dev/null and b/src/assets/logo_gamestart_transparent.png differ diff --git a/src/components/SignIn&UpCard.tsx b/src/components/SignIn&UpCard.tsx index b0a0ff4..843970b 100644 --- a/src/components/SignIn&UpCard.tsx +++ b/src/components/SignIn&UpCard.tsx @@ -1,21 +1,40 @@ import { styled } from '@mui/material/styles' +import { createTheme } from '@mui/material/styles' import MuiCard from '@mui/material/Card' +export const authTheme = createTheme({ + palette: { + primary: { + main: '#27b722', + light: '#63ce5c', + dark: '#1b8317', + contrastText: '#000000', + }, + }, +}) + export const SignInAndUpCard = styled(MuiCard)(({ theme }) => ({ display: 'flex', flexDirection: 'column', alignSelf: 'center', - width: '100%', + width: 'min(calc(100% - 3rem), 450px)', padding: theme.spacing(4), gap: theme.spacing(2), margin: 'auto', + borderColor: 'var(--secondary-component-color)', + '& a': { + color: theme.palette.primary.main, + '&:hover': { + color: theme.palette.primary.dark, + }, + }, boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', + '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)', [theme.breakpoints.up('sm')]: { width: '450px', }, ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', + '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)', }), })) diff --git a/src/components/WishlistCard.tsx b/src/components/WishlistCard.tsx index c9238bf..b51e441 100644 --- a/src/components/WishlistCard.tsx +++ b/src/components/WishlistCard.tsx @@ -6,17 +6,16 @@ export const WishlistCard = styled(MuiCard)(({ theme }) => ({ flexDirection: 'column', width: '100%', boxSizing: 'border-box', - padding: theme.spacing(4), + padding: theme.spacing(2), gap: theme.spacing(2), // margin: 'auto', boxShadow: - 'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px', + '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)', [theme.breakpoints.up('sm')]: { - width: '100%', - maxWidth: '900px', + padding: theme.spacing(4), }, ...theme.applyStyles('dark', { boxShadow: - 'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px', + '0px 5px 15px 0px var(--box-shadow-color), 0px 15px 35px -5px var(--box-shadow-color)', }), })) diff --git a/src/components/activegamecard.tsx b/src/components/activegamecard.tsx index a716349..6a89c68 100644 --- a/src/components/activegamecard.tsx +++ b/src/components/activegamecard.tsx @@ -39,7 +39,7 @@ export default function ActiveGameCard({ game, onAddToWishlist }: ActiveGameCard - + {game.name} diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 621eef9..57bac3f 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -1,12 +1,16 @@ import '../css/footer.css' -import { Gamepad2 } from 'lucide-react' +import gameStartLogo from '../assets/logo_gamestart_transparent.png' +import { Divider } from '@mui/material' export default function Footer() { return ( -
-

- © 2026 GameStart -

-
+
+ +
+

+ GameStart© 2026 +

+
+
) } diff --git a/src/components/header.tsx b/src/components/header.tsx index eae941c..d25c7fb 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,6 +1,8 @@ -import { Link } from 'react-router-dom' +import { Link, NavLink } from 'react-router-dom' import '../css/header.css' -import { House, UserRound, Search, Sparkles, Gamepad2, LogIn } from 'lucide-react' +import { House, UserRound, Search, Sparkles, LogIn } from 'lucide-react' +import gameStartLogo from '../assets/logo_gamestart_transparent.png' +import Divider from '@mui/material/Divider'; export default function Header() { const navigationLinks = [ @@ -13,22 +15,29 @@ export default function Header() { ] return ( -
+
+
-
+
+ + ) } diff --git a/src/components/pageheading.tsx b/src/components/pageheading.tsx new file mode 100644 index 0000000..c331241 --- /dev/null +++ b/src/components/pageheading.tsx @@ -0,0 +1,45 @@ +import type { ReactNode } from 'react' +import { ArrowLeft } from 'lucide-react' +import { useNavigate } from 'react-router-dom' +import '../css/pageheading.css' + +type PageHeadingProps = { + title: string + actions?: ReactNode + showBack?: boolean +} + +export default function PageHeading({ title, actions, showBack = true }: PageHeadingProps) { + const navigate = useNavigate() + + const handleBack = () => { + const historyIndex = window.history.state?.idx + if (typeof historyIndex === 'number' && historyIndex > 0) { + navigate(-1) + } else { + navigate('/') + } + } + + return ( +
+
+ {showBack ? ( + + ) : ( +
+ {actions &&
{actions}
} +
+ ) +} \ No newline at end of file diff --git a/src/css/activegamecard.css b/src/css/activegamecard.css index 8f366e4..b9f4298 100644 --- a/src/css/activegamecard.css +++ b/src/css/activegamecard.css @@ -1,8 +1,8 @@ .activeGameLayout { display: grid; gap: 1.25rem; - width: min(calc(100% - 2rem), 76rem); - margin: 1.25rem auto; + width: 100%; + margin: 1.25rem 0; } .activeGamePosterCard { @@ -13,7 +13,7 @@ overflow: hidden; border-radius: 0.375rem; background-color: var(--primary-background-color); - box-shadow: 0 2px 8px rgb(0 0 0 / 12%); + box-shadow: 0 2px 8px var(--box-shadow-color); } .activeGamePoster { @@ -30,7 +30,7 @@ z-index: 1; top: 0.75rem; right: 0.75rem; - background-color: var(--primary-component-color); + background-color: var(--primary-background-color); color: var(--primary-text-color); text-transform: none; } @@ -51,7 +51,7 @@ min-width: 0; background-color: var(--primary-component-color) !important; color: var(--primary-text-color); - box-shadow: 0 2px 8px rgb(0 0 0 / 12%); + box-shadow: 0 2px 8px var(--box-shadow-color); } .activeGameInfoContent.MuiCardContent-root, @@ -102,7 +102,7 @@ } .activeGameSaleChip.MuiChip-root { - background-color: var(--secondary-component-color); + background-color: var(--primary-background-color); color: var(--primary-text-color); font-weight: 700; } @@ -130,7 +130,7 @@ .activeGameGenreChip.MuiChip-root { border-color: transparent; - background-color: var(--secondary-component-color); + background-color: var(--primary-background-color); color: var(--primary-text-color); } @@ -156,7 +156,7 @@ .activeGameReviewsContent .MuiButton-root { align-self: flex-start; - background-color: var(--secondary-component-color); + background-color: var(--primary-background-color); color: var(--primary-text-color); text-transform: none; } @@ -169,7 +169,6 @@ @media (max-width: 48rem) { .activeGameLayout { - width: min(calc(100% - 1.5rem), 76rem); margin-block: 1rem; gap: 1.25rem; } diff --git a/src/css/footer.css b/src/css/footer.css index a4d6933..e3f5bb1 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -1,11 +1,17 @@ + .footerWrapper { + width: 100%; + flex: 0 0 auto; + margin-top: auto; +} + footer { - height: 8rem; + height: 4rem; + flex: 0 0 4rem; width: 100%; background-color: var(--secondary-background-color); display: flex; align-items: center; justify-content: center; - margin-top: auto; } footer h1 { @@ -13,10 +19,10 @@ footer h1 { align-items: center; gap: 0.5rem; margin: 0; - font-size: 2.5rem; + font-size: 1rem; } -#console { - height: 6rem; +.footerBrandLogo { + height: 1.5rem; width: auto; } diff --git a/src/css/gamepage.css b/src/css/gamepage.css index 04d32fc..4e76ae9 100644 --- a/src/css/gamepage.css +++ b/src/css/gamepage.css @@ -5,13 +5,14 @@ } .game-page { - width: min(calc(100% - 6rem), 68rem); + box-sizing: border-box; + width: min(calc(100% - 3rem), 68rem); margin: 0 auto; - padding-top: 1rem; + padding-left: 3.25rem; } -@media (max-width: 48rem) { +@media (max-width: 43.75rem) { .game-page { - width: min(calc(100% - 1rem), 68rem); + width: min(calc(100% - 2rem), 32rem); } } diff --git a/src/css/global.css b/src/css/global.css index 705f458..621db39 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -1,10 +1,12 @@ :root { /* Colors */ --primary-background-color: #ffffff; - --secondary-background-color: #0077b3; - --primary-component-color: #a3d1e0; - --secondary-component-color: #f0f8ff; + --primary-component-color: #7BCF73; + --secondary-component-color: #DAF1D7; + + --primary-accent-color: #27b722; + --box-shadow-color: #DAF1D7; /* Text */ --primary-text-color: #000000; diff --git a/src/css/header.css b/src/css/header.css index 4a799cd..4121781 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -18,8 +18,13 @@ header { margin: 0; } -#console { - height: 4rem; +#logo a { + display: flex; + align-items: center; +} + +.headerBrandLogo { + height: 2.5rem; width: auto; } @@ -39,6 +44,10 @@ header { text-decoration: none; } +#navigationMenue a.is-active { + color: var(--primary-component-color); +} + header > button { margin-left: 0.5rem; margin-right: 1rem; diff --git a/src/css/mainpage.css b/src/css/mainpage.css index f545789..b981a05 100644 --- a/src/css/mainpage.css +++ b/src/css/mainpage.css @@ -7,11 +7,16 @@ .main-page { width: min(calc(100% - 3rem), 68rem); margin: 0 auto; - padding: clamp(2rem, 8vh, 4rem) 0; + padding: 1.75rem 0 clamp(2rem, 8vh, 4rem); } -.featured-games h1 { - margin: 0 0 1.25rem; +.featured-games-title { + display: flex; + align-items: center; + min-height: 2.5rem; + margin: 0 0 1.5rem; + font-size: 2rem; + line-height: 1.2; } .featured-games-grid { @@ -23,7 +28,11 @@ @media (max-width: 43.75rem) { .main-page { width: min(calc(100% - 2rem), 32rem); - padding: clamp(1.5rem, 6vh, 2.5rem) 0; + padding: 1.25rem 0 clamp(1.5rem, 6vh, 2.5rem); + } + + .featured-games-title { + font-size: 1.75rem; } .featured-games-grid { diff --git a/src/css/pageheading.css b/src/css/pageheading.css new file mode 100644 index 0000000..c4db99e --- /dev/null +++ b/src/css/pageheading.css @@ -0,0 +1,78 @@ +.pageHeading { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + width: min(calc(100% - 3rem), 68rem); + margin: 1.75rem auto 1.5rem; +} + +.pageHeadingTitleGroup { + display: flex; + align-items: center; + gap: 0.75rem; + min-width: 0; +} + +.pageHeadingBackButton, +.pageHeadingBackSlot { + display: flex; + flex: 0 0 2.5rem; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; +} + +.pageHeadingBackButton { + padding: 0; + border: 0; + border-radius: 50%; + background: transparent; + color: var(--primary-text-color); + cursor: pointer; +} + +.pageHeadingBackButton:hover { + background: var(--secondary-component-color); +} + +.pageHeadingBackButton:focus-visible { + outline: 2px solid var(--primary-accent-color); + outline-offset: 2px; +} + +.pageHeadingBackButton svg { + width: 1.5rem; + height: 1.5rem; +} + +.pageHeadingTitle { + margin: 0; + font-size: 2rem; + line-height: 1.2; +} + +.pageHeadingActions { + display: flex; + align-items: center; + gap: 0.75rem; +} + +@media (max-width: 43.75rem) { + .pageHeading { + width: min(calc(100% - 2rem), 32rem); + margin: 1.25rem auto; + flex-wrap: wrap; + gap: 0.75rem; + } + + .pageHeadingTitle { + font-size: 1.75rem; + } + + .pageHeadingActions { + max-width: 100%; + } +} \ No newline at end of file diff --git a/src/css/passivegamecard.css b/src/css/passivegamecard.css index 388bb16..b30c15b 100644 --- a/src/css/passivegamecard.css +++ b/src/css/passivegamecard.css @@ -2,7 +2,7 @@ width: min(100%, 22rem); background-color: var(--primary-background-color); color: var(--primary-text-color); - box-shadow: 2px 3px 6px var(--primary-component-color) !important; + box-shadow: 2px 3px 6px var(--box-shadow-color) !important; } .passiveGameCardAction { @@ -52,7 +52,7 @@ justify-content: center; padding: 0 0.4rem; border-radius: 0.5rem; - background-color: var(--secondary-component-color); + background-color: var(--primary-background-color); color: var(--primary-text-color); font-size: 0.75rem; font-weight: 700; diff --git a/src/css/profilepage.css b/src/css/profilepage.css index 132bf2a..c949517 100644 --- a/src/css/profilepage.css +++ b/src/css/profilepage.css @@ -1,14 +1,27 @@ +.profileContent { + box-sizing: border-box; + width: min(calc(100% - 3rem), 68rem); + margin: 0 auto; + padding-left: 3.25rem; +} + .profile-card.MuiCard-root { - background-color: var(--primary-component-color); - width: 75%; + background-color: var(--primary-background-color); + border: 1px solid var(--secondary-component-color); + width: 100%; height: auto; display: flex; flex-direction: column; - align-self: center; - margin-top: 5rem; + margin-top: 0; margin-bottom: 5rem; } +@media (max-width: 43.75rem) { + .profileContent { + width: min(calc(100% - 2rem), 32rem); + } +} + .profile-card .MuiDivider-root { align-self: stretch; } diff --git a/src/css/searchpage.css b/src/css/searchpage.css index 4a553df..a1ebca4 100644 --- a/src/css/searchpage.css +++ b/src/css/searchpage.css @@ -1,6 +1,6 @@ .searchinput.MuiTextField-root { background-color: var(--secondary-component-color); - border-color: var(--secondary-background-color); + border-color: var(--primary-accent-color); display: flex; width: min(30rem, calc(100% - 5rem)); margin: 0; @@ -14,7 +14,7 @@ .searchinput .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline, .searchinput .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline, .searchinput .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { - border-color: var(--secondary-background-color); + border-color: var(--primary-accent-color); } .searchbar { @@ -26,7 +26,7 @@ .filterbutton { background-color: var(--primary-component-color); - border: 1px solid var(--secondary-background-color); + border: 1px solid var(--primary-accent-color); border-left: 0; border-radius: 0 4px 4px 0; height: 56px; @@ -35,7 +35,7 @@ .filterbutton.is-active, .filterbutton:active { - background-color: var(--secondary-background-color); + background-color: var(--primary-accent-color); } .filtersection { @@ -47,7 +47,7 @@ justify-content: center; gap: 0.5rem; border-top: 0; - border-color: var(--secondary-background-color); + border-color: var(--primary-accent-color); border-style: solid; width: min(30rem, calc(100% - 5rem)); padding: 1rem; @@ -58,15 +58,19 @@ } .filtersection .MuiButtonGroup-root .MuiButtonGroup-grouped { - border: 1px solid var(--secondary-background-color); + border: 1px solid var(--primary-accent-color); border-radius: 4px; } .filtersection .MuiButtonGroup-root .MuiButtonGroup-grouped:not(:last-of-type) { - border-right: 1px solid var(--secondary-background-color); + border-right: 1px solid var(--primary-accent-color); +} + +.filtersection .MuiButton-root { + color: var(--primary-text-color); } .filtersection .MuiButton-root.is-active { - background-color: var(--secondary-background-color); - color: var(--primary-background-color); + background-color: var(--secondary-component-color); + color: var(--primary-accent-color); } diff --git a/src/css/wishlistgamecard.css b/src/css/wishlistgamecard.css index ebd3bd2..cfa80b8 100644 --- a/src/css/wishlistgamecard.css +++ b/src/css/wishlistgamecard.css @@ -4,7 +4,7 @@ border-radius: 0.375rem; background-color: var(--primary-background-color); color: var(--primary-text-color); - box-shadow: 0 2px 8px rgb(0 0 0 / 12%); + box-shadow: 0 2px 8px var(--box-shadow-color); } .wishlistGameCardAction.MuiCardActionArea-root { diff --git a/src/css/wishlistpage.css b/src/css/wishlistpage.css index ed66f76..a5ae935 100644 --- a/src/css/wishlistpage.css +++ b/src/css/wishlistpage.css @@ -3,3 +3,16 @@ flex-direction: column; min-height: 100dvh; } + +.wishlistContent { + box-sizing: border-box; + width: min(calc(100% - 3rem), 68rem); + margin: 0 auto; + padding-left: 3.25rem; +} + +@media (max-width: 43.75rem) { + .wishlistContent { + width: min(calc(100% - 2rem), 32rem); + } +} diff --git a/src/pages/gamepage.tsx b/src/pages/gamepage.tsx index dbdde8b..92b6d01 100644 --- a/src/pages/gamepage.tsx +++ b/src/pages/gamepage.tsx @@ -4,6 +4,7 @@ import Footer from '../components/footer' import ActiveGameCard from '../components/activegamecard' import { games } from '../api/games' import { useParams } from 'react-router-dom' +import PageHeading from '../components/pageheading' export default function GamePage() { const { gameId } = useParams() @@ -12,6 +13,7 @@ export default function GamePage() { return (
+
{game ? :

Game not found.

}
diff --git a/src/pages/mainpage.tsx b/src/pages/mainpage.tsx index 0de0018..15cf303 100644 --- a/src/pages/mainpage.tsx +++ b/src/pages/mainpage.tsx @@ -10,7 +10,7 @@ export default function MainPage() {
-

Featured Games

+

Featured Games

{games.slice(0, 3).map((game) => ( diff --git a/src/pages/profilepage.tsx b/src/pages/profilepage.tsx index e71e8ca..b7ae41e 100644 --- a/src/pages/profilepage.tsx +++ b/src/pages/profilepage.tsx @@ -6,43 +6,47 @@ import Card from '@mui/material/Card' import CardContent from '@mui/material/CardContent' import Avatar from '@mui/material/Avatar' import Divider from '@mui/material/Divider' +import PageHeading from '../components/pageheading' export default function ProfilePage() { return (
- - - -
- JS -

Jon Snø

-
- - - - - -

- I am a student at NTNU. I love playing videogames! I like adventuregames, - multiplayer and cute designs. I like to play games with my friends, its a - lot more fun when you dont play alone! -

- - - - - -
-

Favorite game:

-

Slay the Spire

-
-
-

Game setup:

-

Macbook

-
- - + + +
+ + +
+ JS +

Jon Snø

+
+ + + + + +

+ I am a student at NTNU. I love playing videogames! I like adventuregames, + multiplayer and cute designs. I like to play games with my friends, its a + lot more fun when you dont play alone! +

+ + + + + +
+

Favorite game:

+

Slay the Spire

+
+
+

Game setup:

+

Macbook

+
+ + +
diff --git a/src/pages/searchpage.tsx b/src/pages/searchpage.tsx index 38141d0..1a6f30e 100644 --- a/src/pages/searchpage.tsx +++ b/src/pages/searchpage.tsx @@ -4,6 +4,7 @@ import Footer from '../components/footer' import { TextField, Button, ButtonGroup } from '@mui/material' import { Funnel } from 'lucide-react' import { useState } from 'react' +import PageHeading from '../components/pageheading' export function SearchPage() { const [isFilterActive, setIsFilterActive] = useState(false) @@ -24,8 +25,7 @@ export function SearchPage() { return (
- -

Searchpage

+
diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx index 8184b10..81d4512 100644 --- a/src/pages/signin.tsx +++ b/src/pages/signin.tsx @@ -13,19 +13,17 @@ import { Typography, } from '@mui/material' import { NavLink } from 'react-router-dom' -import { styled } from '@mui/material/styles' +import { styled, ThemeProvider } from '@mui/material/styles' import Header from '../components/header' import Footer from '../components/footer' import { useNavigate } from 'react-router-dom' -import { SignInAndUpCard } from '../components/SignIn&UpCard' +import { authTheme, SignInAndUpCard } from '../components/SignIn&UpCard' +import PageHeading from '../components/pageheading' const SignInContainer = styled(Stack)(({ theme }) => ({ - height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)', - minHeight: '100%', - padding: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - padding: theme.spacing(4), - }, + flex: 1, + minHeight: 0, + position: 'relative', '&::before': { content: '""', display: 'block', @@ -33,7 +31,7 @@ const SignInContainer = styled(Stack)(({ theme }) => ({ zIndex: -1, inset: 0, backgroundImage: - 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + 'radial-gradient(ellipse at 50% 50%, hsl(120, 45%, 97%), hsl(0, 0%, 100%))', backgroundRepeat: 'no-repeat', ...theme.applyStyles('dark', { backgroundImage: @@ -92,16 +90,11 @@ export default function SignInPage() { return (
+ - + + - - Sign in - - + +
) diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx index fbe7a73..f167336 100644 --- a/src/pages/signup.tsx +++ b/src/pages/signup.tsx @@ -7,21 +7,18 @@ import { FormControl, TextField, Stack, - Typography, } from '@mui/material' -import { styled } from '@mui/material/styles' +import { styled, ThemeProvider } from '@mui/material/styles' import { useNavigate } from 'react-router-dom' import Header from '../components/header' import Footer from '../components/footer' -import { SignInAndUpCard } from '../components/SignIn&UpCard' +import { authTheme, SignInAndUpCard } from '../components/SignIn&UpCard' +import PageHeading from '../components/pageheading' const SignUpContainer = styled(Stack)(({ theme }) => ({ - height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)', - minHeight: '100%', - padding: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - padding: theme.spacing(4), - }, + flex: 1, + minHeight: 0, + position: 'relative', '&::before': { content: '""', display: 'block', @@ -29,7 +26,7 @@ const SignUpContainer = styled(Stack)(({ theme }) => ({ zIndex: -1, inset: 0, backgroundImage: - 'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))', + 'radial-gradient(ellipse at 50% 50%, hsl(120, 45%, 97%), hsl(0, 0%, 100%))', backgroundRepeat: 'no-repeat', ...theme.applyStyles('dark', { backgroundImage: @@ -102,16 +99,11 @@ export default function SignUpPage() { return (
+ - + + - - Sign up - - + +
) diff --git a/src/pages/wishlistpage.tsx b/src/pages/wishlistpage.tsx index 13fbabe..f75312c 100644 --- a/src/pages/wishlistpage.tsx +++ b/src/pages/wishlistpage.tsx @@ -4,7 +4,7 @@ import Footer from '../components/footer' import { WishlistCard } from '../components/WishlistCard' import Stack from '@mui/material/Stack' import { styled } from '@mui/material/styles' -import { Typography, Box, FormControl, Select, MenuItem, InputLabel } from '@mui/material' +import { Box, FormControl, Select, MenuItem, InputLabel } from '@mui/material' import type { SelectChangeEvent } from '@mui/material' import { useState } from 'react' @@ -14,6 +14,7 @@ import barotrauma from '../assets/barotrauma.png' import silksong from '../assets/silksong.png' import slayTheSpire from '../assets/slaythespire.png' import WishlistGameCard from '../components/wishlistgamecard' +import PageHeading from '../components/pageheading' const imagesById: Record = { 1: bigWalk, @@ -25,10 +26,7 @@ const imagesById: Record = { const WishlistContainer = styled(Stack)(({ theme }) => ({ position: 'relative', flexGrow: 1, - padding: theme.spacing(2), - [theme.breakpoints.up('sm')]: { - padding: theme.spacing(4), - }, + paddingBottom: theme.spacing(4), '&::before': { content: '""', position: 'absolute', @@ -67,43 +65,28 @@ export default function WishlistPage() { return (
- - - - + Sort by + - Discount: high to low - Discount: low to high - Price: low to high - Price: high to low - Title: A to Z - - - - + Discount: high to low + Discount: low to high + Price: low to high + Price: high to low + Title: A to Z + + + } + /> + + {games.slice(0, 4).map((game) => { const image = imagesById[game.id]