From 779ffa517ed56f3bd1b612ebd6d4ff89f01855f5 Mon Sep 17 00:00:00 2001 From: John Corser Date: Sun, 5 Jan 2025 18:12:11 -0500 Subject: [PATCH] update next page button --- src/components/pages/AudioReviewPage.tsx | 25 +----------- src/components/pages/FavoriteActorsPage.tsx | 2 +- src/components/pages/GenreReviewPage.tsx | 2 +- src/components/pages/HolidayReviewPage.tsx | 2 +- src/components/pages/LiveTvReviewPage.tsx | 14 +------ src/components/pages/MoviesReviewPage.tsx | 2 +- src/components/pages/MusicVideoPage.tsx | 25 +----------- src/components/pages/OldestMoviePage.tsx | 42 ++++++++------------- src/components/pages/OldestShowPage.tsx | 27 ++----------- src/components/pages/ShowReviewPage.tsx | 24 +----------- src/components/ui/styled.tsx | 5 ++- 11 files changed, 35 insertions(+), 135 deletions(-) diff --git a/src/components/pages/AudioReviewPage.tsx b/src/components/pages/AudioReviewPage.tsx index 2b67fca..a7acbda 100644 --- a/src/components/pages/AudioReviewPage.tsx +++ b/src/components/pages/AudioReviewPage.tsx @@ -3,9 +3,9 @@ import { listAudio, SimpleItemDto } from "@/lib/playback-reporting-queries"; import { MovieCard } from "./MoviesReviewPage/MovieCard"; import { Container, Grid, Box, Spinner, Button } from "@radix-ui/themes"; import { motion } from "framer-motion"; -import { styled } from "@stitches/react"; import { useNavigate } from "react-router-dom"; import { useErrorBoundary } from "react-error-boundary"; +import { itemVariants, Title } from "../ui/styled"; const NEXT_PAGE = '/music-videos' @@ -48,27 +48,6 @@ export default function AudioReviewPage() { ); } - const itemVariants = { - hidden: { y: 20, opacity: 0 }, - visible: { - y: 0, - opacity: 1, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - const Title = styled("h1", { - fontSize: "4rem", - fontWeight: "bold", - marginBottom: "1rem", - // Updated gradient with yellow to blue - background: "linear-gradient(90deg, #FFD700 0%, #00E1FF 100%)", - WebkitBackgroundClip: "text", - WebkitTextFillColor: "transparent", - textShadow: "0 0 30px rgba(255, 215, 0, 0.3)", - }); return ( @@ -94,7 +73,7 @@ export default function AudioReviewPage() { void navigate(NEXT_PAGE); }} > - Review Music Videos + Next ); diff --git a/src/components/pages/FavoriteActorsPage.tsx b/src/components/pages/FavoriteActorsPage.tsx index f61e294..fd79643 100644 --- a/src/components/pages/FavoriteActorsPage.tsx +++ b/src/components/pages/FavoriteActorsPage.tsx @@ -94,7 +94,7 @@ export default function FavoriteActorsPage() { void navigate(NEXT_PAGE); }} > - Review Top Genres + Next ); diff --git a/src/components/pages/GenreReviewPage.tsx b/src/components/pages/GenreReviewPage.tsx index 16047bf..9a17d41 100644 --- a/src/components/pages/GenreReviewPage.tsx +++ b/src/components/pages/GenreReviewPage.tsx @@ -128,7 +128,7 @@ export default function GenreReviewPage() { void navigate(NEXT_PAGE); }} > - Review Holidays + Next ); diff --git a/src/components/pages/HolidayReviewPage.tsx b/src/components/pages/HolidayReviewPage.tsx index e8af6a1..fc19515 100644 --- a/src/components/pages/HolidayReviewPage.tsx +++ b/src/components/pages/HolidayReviewPage.tsx @@ -208,7 +208,7 @@ export default function HolidayReviewPage() { void navigate(NEXT_PAGE); }} > - Review Live TV + Next ); diff --git a/src/components/pages/LiveTvReviewPage.tsx b/src/components/pages/LiveTvReviewPage.tsx index 74557f3..debcd8e 100644 --- a/src/components/pages/LiveTvReviewPage.tsx +++ b/src/components/pages/LiveTvReviewPage.tsx @@ -2,11 +2,11 @@ import { useState, useEffect } from "react"; import { listLiveTvChannels } from "@/lib/playback-reporting-queries"; import { Container, Grid, Box, Spinner, Button } from "@radix-ui/themes"; import { motion } from "framer-motion"; -import { styled } from "@stitches/react"; import { Card, Text, Flex } from "@radix-ui/themes"; import { formatDuration } from "@/lib/utils"; import { useNavigate } from "react-router-dom"; import { useErrorBoundary } from "react-error-boundary"; +import { Title } from "../ui/styled"; interface ChannelCardProps { channelName: string; @@ -77,16 +77,6 @@ export default function LiveTvReviewPage() { ); } - const Title = styled("h1", { - fontSize: "4rem", - fontWeight: "bold", - marginBottom: "1rem", - background: "linear-gradient(90deg, #FFD700 0%, #00E1FF 100%)", - WebkitBackgroundClip: "text", - WebkitTextFillColor: "transparent", - textShadow: "0 0 30px rgba(255, 215, 0, 0.3)", - }); - return ( @@ -115,7 +105,7 @@ export default function LiveTvReviewPage() { void navigate(NEXT_PAGE); }} > - Review Audio + Next ); diff --git a/src/components/pages/MoviesReviewPage.tsx b/src/components/pages/MoviesReviewPage.tsx index 21e5da8..512e9ac 100644 --- a/src/components/pages/MoviesReviewPage.tsx +++ b/src/components/pages/MoviesReviewPage.tsx @@ -86,7 +86,7 @@ export default function MoviesReviewPage() { void navigate(NEXT_PAGE); }} > - Review Oldest Movie + Next ); diff --git a/src/components/pages/MusicVideoPage.tsx b/src/components/pages/MusicVideoPage.tsx index 3d49dde..e51be37 100644 --- a/src/components/pages/MusicVideoPage.tsx +++ b/src/components/pages/MusicVideoPage.tsx @@ -6,9 +6,9 @@ import { import { MovieCard } from "./MoviesReviewPage/MovieCard"; import { Container, Grid, Box, Spinner, Button } from "@radix-ui/themes"; import { motion } from "framer-motion"; -import { styled } from "@stitches/react"; import { useNavigate } from "react-router-dom"; import { useErrorBoundary } from "react-error-boundary"; +import { itemVariants, Title } from "../ui/styled"; const NEXT_PAGE = "/"; export default function MusicVideoPage() { @@ -50,27 +50,6 @@ export default function MusicVideoPage() { ); } - const itemVariants = { - hidden: { y: 20, opacity: 0 }, - visible: { - y: 0, - opacity: 1, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - const Title = styled("h1", { - fontSize: "4rem", - fontWeight: "bold", - marginBottom: "1rem", - // Updated gradient with yellow to blue - background: "linear-gradient(90deg, #FFD700 0%, #00E1FF 100%)", - WebkitBackgroundClip: "text", - WebkitTextFillColor: "transparent", - textShadow: "0 0 30px rgba(255, 215, 0, 0.3)", - }); return ( @@ -96,7 +75,7 @@ export default function MusicVideoPage() { void navigate(NEXT_PAGE); }} > - Home + Next ); diff --git a/src/components/pages/OldestMoviePage.tsx b/src/components/pages/OldestMoviePage.tsx index a16d8d3..c019ad0 100644 --- a/src/components/pages/OldestMoviePage.tsx +++ b/src/components/pages/OldestMoviePage.tsx @@ -3,9 +3,8 @@ import { listMovies, SimpleItemDto } from "@/lib/playback-reporting-queries"; import { MovieCard } from "./MoviesReviewPage/MovieCard"; import { Container, Grid, Box, Button, Spinner } from "@radix-ui/themes"; import { motion } from "framer-motion"; -import { styled } from "@stitches/react"; import { useNavigate } from "react-router-dom"; -import { Subtitle } from "../ui/styled"; +import { itemVariants, Subtitle, Title } from "../ui/styled"; import { useErrorBoundary } from "react-error-boundary"; const NEXT_PAGE = "/shows"; @@ -54,26 +53,6 @@ export default function OldestMoviePage() { ); } - const itemVariants = { - hidden: { y: 20, opacity: 0 }, - visible: { - y: 0, - opacity: 1, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - const Title = styled("h1", { - fontSize: "4rem", - fontWeight: "bold", - marginBottom: "1rem", - background: "linear-gradient(90deg, #FFD700 0%, #00E1FF 100%)", - WebkitBackgroundClip: "text", - WebkitTextFillColor: "transparent", - textShadow: "0 0 30px rgba(255, 215, 0, 0.3)", - }); if (!movie?.id) { return ( @@ -86,7 +65,7 @@ export default function OldestMoviePage() { void navigate(NEXT_PAGE); }} > - Review Shows + Next ); @@ -98,7 +77,7 @@ export default function OldestMoviePage() { className="min-h-screen" > - +
It's {new Date().getFullYear()}, but you've time traveled back to{" "} @@ -118,7 +97,18 @@ export default function OldestMoviePage() { })} </Subtitle> </div> - <MovieCard key={movie.id} item={movie} /> + <div style={{ + display: "flex", + justifyContent: "center", + width: "100%" + }}> + <div style={{ + maxWidth: "50%", + width: "100%" + }}> + <MovieCard key={movie.id} item={movie} /> + </div> + </div> </Grid> </Container> <Button @@ -128,7 +118,7 @@ export default function OldestMoviePage() { void navigate(NEXT_PAGE); }} > - Review Shows + Next </Button> </Box> ); diff --git a/src/components/pages/OldestShowPage.tsx b/src/components/pages/OldestShowPage.tsx index b79d793..6249689 100644 --- a/src/components/pages/OldestShowPage.tsx +++ b/src/components/pages/OldestShowPage.tsx @@ -3,9 +3,8 @@ import { listShows, SimpleItemDto } from "@/lib/playback-reporting-queries"; import { MovieCard } from "./MoviesReviewPage/MovieCard"; import { Container, Grid, Box, Button, Spinner } from "@radix-ui/themes"; import { motion } from "framer-motion"; -import { styled } from "@stitches/react"; import { useNavigate } from "react-router-dom"; -import { Subtitle } from "../ui/styled"; +import { itemVariants, Subtitle, Title } from "../ui/styled"; import { useErrorBoundary } from "react-error-boundary"; const NEXT_PAGE = "/actors"; @@ -58,26 +57,6 @@ export default function OldestShowPage() { </div> ); } - const itemVariants = { - hidden: { y: 20, opacity: 0 }, - visible: { - y: 0, - opacity: 1, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - const Title = styled("h1", { - fontSize: "4rem", - fontWeight: "bold", - marginBottom: "1rem", - background: "linear-gradient(90deg, #FFD700 0%, #00E1FF 100%)", - WebkitBackgroundClip: "text", - WebkitTextFillColor: "transparent", - textShadow: "0 0 30px rgba(255, 215, 0, 0.3)", - }); if (!show?.item?.id) { return ( <> @@ -89,7 +68,7 @@ export default function OldestShowPage() { void navigate(NEXT_PAGE); }} > - Review Favorite Actors + Next </Button> </> ); @@ -137,7 +116,7 @@ export default function OldestShowPage() { void navigate(NEXT_PAGE); }} > - Review Favorite Actors + Next </Button> </Box> ); diff --git a/src/components/pages/ShowReviewPage.tsx b/src/components/pages/ShowReviewPage.tsx index 28b5cc7..95fe760 100644 --- a/src/components/pages/ShowReviewPage.tsx +++ b/src/components/pages/ShowReviewPage.tsx @@ -3,10 +3,10 @@ import { listShows, SimpleItemDto } from "@/lib/playback-reporting-queries"; import { MovieCard } from "./MoviesReviewPage/MovieCard"; import { Container, Grid, Box, Button, Spinner } from "@radix-ui/themes"; import { motion } from "framer-motion"; -import { styled } from "@stitches/react"; import { useNavigate } from "react-router-dom"; import { useErrorBoundary } from "react-error-boundary"; import { getCachedHiddenIds, setCachedHiddenId } from "@/lib/cache"; +import { itemVariants, Title } from "../ui/styled"; const NEXT_PAGE = "/oldest-show"; export default function ShowReviewPage() { @@ -58,26 +58,6 @@ export default function ShowReviewPage() { </div> ); } - const itemVariants = { - hidden: { y: 20, opacity: 0 }, - visible: { - y: 0, - opacity: 1, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - const Title = styled("h1", { - fontSize: "4rem", - fontWeight: "bold", - marginBottom: "1rem", - background: "linear-gradient(90deg, #FFD700 0%, #00E1FF 100%)", - WebkitBackgroundClip: "text", - WebkitTextFillColor: "transparent", - textShadow: "0 0 30px rgba(255, 215, 0, 0.3)", - }); return ( <Box @@ -117,7 +97,7 @@ export default function ShowReviewPage() { void navigate(NEXT_PAGE); }} > - Review Oldest Show + Next </Button> </Box> ); diff --git a/src/components/ui/styled.tsx b/src/components/ui/styled.tsx index 8300708..a60c9a3 100644 --- a/src/components/ui/styled.tsx +++ b/src/components/ui/styled.tsx @@ -31,7 +31,7 @@ export const ContentWrapper = styled("div", { }); export const Title = styled("h1", { - fontSize: "4rem", + fontSize: "2rem", fontWeight: "bold", marginBottom: "1rem", // Updated gradient with yellow to blue @@ -39,6 +39,9 @@ export const Title = styled("h1", { WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", textShadow: "0 0 30px rgba(255, 215, 0, 0.3)", + "@media (min-width: 768px)": { + fontSize: "4rem", // Larger size for tablets and up + } }); export const Subtitle = styled("p", {