update next page button

johnpc · Jan 5, 2025 · 779ffa5 · 779ffa5
1 parent 547abd1
commit 779ffa5
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 135 deletions.
diff --git 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() {
       </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",
-    // 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 (
     <Box style={{ backgroundColor: "var(--red-8)" }} className="min-h-screen">
@@ -94,7 +73,7 @@ export default function AudioReviewPage() {
           void navigate(NEXT_PAGE);
         }}
       >
-        Review Music Videos
+        Next
       </Button>
     </Box>
   );

diff --git 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
       </Button>
     </Box>
   );

diff --git 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
       </Button>
     </Box>
   );

diff --git 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
       </Button>
     </Box>
   );

diff --git 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 (
     <Box style={{ backgroundColor: "var(--green-8)" }} className="min-h-screen">
       <Container size="4" p="4">
@@ -115,7 +105,7 @@ export default function LiveTvReviewPage() {
           void navigate(NEXT_PAGE);
         }}
       >
-        Review Audio
+        Next
       </Button>
     </Box>
   );

diff --git 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
       </Button>
     </Box>
   );

diff --git 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() {
       </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",
-    // 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 (
     <Box style={{ backgroundColor: "var(--red-8)" }} className="min-h-screen">
@@ -96,7 +75,7 @@ export default function MusicVideoPage() {
           void navigate(NEXT_PAGE);
         }}
       >
-        Home
+        Next
       </Button>
     </Box>
   );

diff --git 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() {
       </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 (!movie?.id) {
     return (
@@ -86,7 +65,7 @@ export default function OldestMoviePage() {
             void navigate(NEXT_PAGE);
           }}
         >
-          Review Shows
+          Next
         </Button>
       </>
     );
@@ -98,7 +77,7 @@ export default function OldestMoviePage() {
       className="min-h-screen"
     >
       <Container size="4" p="4">
-        <Grid gap="6">
+      <Grid gap="6">
           <div style={{ textAlign: "center" }}>
             <Title as={motion.h1} variants={itemVariants}>
               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
@@ -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
@@ -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
@@ -31,14 +31,17 @@ export const ContentWrapper = styled("div", {
 });
 
 export const Title = styled("h1", {
-  fontSize: "4rem",
+  fontSize: "2rem",
   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)",
+  "@media (min-width: 768px)": {
+    fontSize: "4rem", // Larger size for tablets and up
+  }
 });
 
 export const Subtitle = styled("p", {
-Original file line number
+Diff line change
@@ Expand Up / @@ -94,7 +94,7 @@ export default function FavoriteActorsPage() { @@
               void navigate(NEXT_PAGE);
             }}
           >
-            Review Top Genres
+            Next
           </Button>
         </Box>
       );
@@ Expand Down @@