Move custom colors into MUI palette

service/vspo-schedule/web/src/components/Elements/Card/ClipCard.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "next-i18next";
 import PlayArrow from "@mui/icons-material/PlayArrow";
 import { Avatar, Box, CardContent, Chip, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { styled, useTheme } from "@mui/material/styles";
 import { getVideoIconUrl, isTrending } from "@/lib/utils";
 import { Clip } from "@/types/streaming";
 import { VideoCard } from "./VideoCard";
@@ -48,10 +48,15 @@ const roundViewCount = (viewCount: number) => {
 
 export const ClipCard: React.FC<Props> = ({ clip }) => {
   const { t } = useTranslation("clips");
+  const theme = useTheme();
 
   const iconUrl = getVideoIconUrl(clip);
   const cardHighlight = isTrending(clip)
-    ? { label: t("clipLabels.trending"), color: "red", bold: false }
+    ? {
+        label: t("clipLabels.trending"),
+        color: theme.vars.palette.customColors.videoHighlight.trending,
+        bold: false,
+      }
     : undefined;
 
   return (

service/vspo-schedule/web/src/components/Elements/Card/LivestreamCard.tsx

@@ -1,19 +1,14 @@
 import React, { useMemo } from "react";
 import { CardContent, Typography, Avatar } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { styled, useTheme } from "@mui/material/styles";
 import { Box } from "@mui/system";
-import { LiveStatus, Livestream } from "@/types/streaming";
+import { Livestream } from "@/types/streaming";
 import { getLiveStatus, formatDate } from "@/lib/utils";
 import { PlatformIcon } from "../Icon";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
 import { VideoCard } from "./VideoCard";
 
-const highlightColors = {
-  live: "red",
-  upcoming: "rgb(45, 75, 112)",
-} satisfies Partial<Record<LiveStatus, string>>;
-
 const ResponsiveTypography = styled(Typography)(({ theme }) => ({
   paddingRight: "1em",
   display: "flex",
@@ -67,6 +62,7 @@ export const LivestreamCard: React.FC<LivestreamCardProps> = ({
   livestream,
 }) => {
   const { t } = useTranslation("common");
+  const theme = useTheme();
   const router = useRouter();
   const { locale } = router;
   const { title, channelTitle, scheduledStartTime, iconUrl, platform } =
@@ -79,7 +75,8 @@ export const LivestreamCard: React.FC<LivestreamCardProps> = ({
     livestreamStatus === "live" || livestreamStatus === "upcoming"
       ? {
           label: t(`liveStatus.${livestreamStatus}`),
-          color: highlightColors[livestreamStatus],
+          color:
+            theme.vars.palette.customColors.videoHighlight[livestreamStatus],
           bold: true,
         }
       : undefined;

service/vspo-schedule/web/src/components/Elements/Card/VideoCard.tsx

@@ -3,6 +3,7 @@ import { Box, Card, CardActionArea } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { useVideoModalContext } from "@/hooks";
 import { Video } from "@/types/streaming";
+import { HighlightedVideoChip } from "../Chip";
 
 type Props = {
   video: Video;
@@ -14,34 +15,23 @@ type Props = {
   };
 };
 
-const HighlightLabel = styled("div")<{
-  highlightColor: string;
-  bold: boolean;
-}>(({ theme, highlightColor, bold }) => ({
-  minWidth: "78px",
-  padding: "0 12px",
-  color: "white",
-  fontSize: "15px",
-  fontWeight: bold ? "700" : "400",
-  fontFamily: "Roboto, sans-serif",
-  textAlign: "center",
-  lineHeight: "24px",
-  background: highlightColor,
-  borderRadius: "12px",
-  position: "absolute",
-  top: "-12px",
-  right: "6px",
-  zIndex: "3",
-  transformOrigin: "center right",
-  [theme.breakpoints.down("md")]: {
-    transform: "scale(0.875)",
-    right: "5px",
-  },
-  [theme.breakpoints.down("sm")]: {
-    transform: "scale(0.75)",
-    right: "4px",
-  },
-}));
+const StyledHighlightedVideoChip = styled(HighlightedVideoChip)(
+  ({ theme }) => ({
+    position: "absolute",
+    top: "-12px",
+    right: "6px",
+    zIndex: "3",
+    transformOrigin: "center right",
+    [theme.breakpoints.down("md")]: {
+      transform: "scale(0.875)",
+      right: "5px",
+    },
+    [theme.breakpoints.down("sm")]: {
+      transform: "scale(0.75)",
+      right: "4px",
+    },
+  }),
+);
 
 const StyledCard = styled(Card, {
   shouldForwardProp: (prop) => prop !== "highlightColor",
@@ -53,7 +43,7 @@ const StyledCard = styled(Card, {
   border: highlightColor ? `3px solid ${highlightColor}` : "none",
   backgroundColor: "white",
   [theme.getColorSchemeSelector("dark")]: {
-    backgroundColor: "#353535",
+    backgroundColor: theme.vars.palette.customColors.gray,
   },
 }));
 
@@ -68,9 +58,12 @@ export const VideoCard: React.FC<Props> = ({ video, highlight, children }) => {
   return (
     <Box sx={{ position: "relative" }}>
       {highlight && (
-        <HighlightLabel highlightColor={highlight.color} bold={highlight.bold}>
+        <StyledHighlightedVideoChip
+          highlightColor={highlight.color}
+          bold={highlight.bold}
+        >
           {highlight.label}
-        </HighlightLabel>
+        </StyledHighlightedVideoChip>
       )}
       <StyledCard highlightColor={highlight?.color}>
         <CardActionArea onClick={() => pushVideo(video)}>

service/vspo-schedule/web/src/components/Elements/Chip/HighlightedVideoChip.tsx

@@ -0,0 +1,19 @@
+import { styled } from "@mui/material/styles";
+
+export const HighlightedVideoChip = styled("div", {
+  shouldForwardProp: (prop) => prop !== "highlightColor" && prop !== "bold",
+})<{
+  highlightColor: string;
+  bold: boolean;
+}>(({ highlightColor, bold }) => ({
+  minWidth: "78px",
+  padding: "0 12px",
+  color: "white",
+  fontSize: "15px",
+  fontWeight: bold ? "700" : "400",
+  fontFamily: "Roboto, sans-serif",
+  textAlign: "center",
+  lineHeight: "24px",
+  background: highlightColor,
+  borderRadius: "12px",
+}));

service/vspo-schedule/web/src/components/Elements/Chip/index.ts

@@ -0,0 +1 @@
+export * from "./HighlightedVideoChip";

service/vspo-schedule/web/src/components/Elements/Dialog/SearchDialog.tsx

@@ -32,10 +32,10 @@ const StyledFab = styled(Fab)(({ theme }) => ({
   position: "fixed",
   bottom: "4rem",
   right: "2rem",
-  backgroundColor: "#7266cf",
+  backgroundColor: theme.vars.palette.customColors.vspoPurple,
 
   [theme.getColorSchemeSelector("dark")]: {
-    backgroundColor: "#353535",
+    backgroundColor: theme.vars.palette.customColors.gray,
   },
 }));
 

service/vspo-schedule/web/src/components/Elements/Drawer/Drawer.tsx

@@ -68,25 +68,25 @@ const StyledListItemIcon = styled(ListItemIcon)(() => ({
 const StyledChip = styled(Chip)(({ theme }) => ({
   backgroundColor: "transparent",
   border: "1px solid",
-  borderColor: "rgb(45, 75, 112)",
-  color: "rgb(45, 75, 112)",
+  borderColor: theme.vars.palette.customColors.darkBlue,
+  color: theme.vars.palette.customColors.darkBlue,
 
   [theme.getColorSchemeSelector("dark")]: {
     borderColor: "white",
     color: "white",
   },
 }));
 
-const StyledBadge = styled(Badge)({
+const StyledBadge = styled(Badge)(({ theme }) => ({
   "& .MuiBadge-badge": {
-    backgroundColor: "rgb(45, 75, 112)",
+    backgroundColor: theme.vars.palette.customColors.darkBlue,
     color: "white",
     transform: "scale(0.8)",
     fontSize: "0.65em",
     right: "-28px",
     top: "1px",
   },
-});
+}));
 
 const StyledButton = styled(Button)({
   display: "flex",

service/vspo-schedule/web/src/components/Elements/Modal/VideoModal.tsx

@@ -13,7 +13,7 @@ import {
   Tabs,
   BottomNavigation,
 } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { styled, useTheme } from "@mui/material/styles";
 import { Video } from "@/types/streaming";
 import {
   formatDate,
@@ -34,35 +34,19 @@ import { useRouter } from "next/router";
 import { ChatEmbed } from "../ChatEmbed";
 import { useVideoModalContext } from "@/hooks";
 import { useTranslation } from "next-i18next";
+import { HighlightedVideoChip } from "../Chip";
 
 const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
-  backgroundColor: "#7266cf",
+  backgroundColor: theme.vars.palette.customColors.vspoPurple,
   borderBottom: `1px solid ${theme.vars.palette.divider}`,
   padding: theme.spacing(1),
   color: "white",
 
   [theme.getColorSchemeSelector("dark")]: {
-    backgroundColor: "#212121",
+    backgroundColor: theme.vars.palette.customColors.darkGray,
   },
 }));
 
-const LiveLabel = styled("div")<{
-  isUpcoming?: boolean;
-}>(({ isUpcoming }) => ({
-  width: "78px",
-  minWidth: "fit-content",
-  padding: "0 12px",
-  color: "rgb(255, 255, 255)",
-  fontSize: "15px",
-  fontWeight: "700",
-  fontFamily: "Roboto, sans-serif",
-  textAlign: "center",
-  lineHeight: "24px",
-  background: isUpcoming ? "rgb(45, 75, 112)" : "rgb(255, 0, 0)",
-  borderRadius: "12px",
-  marginRight: "2.0rem",
-}));
-
 const StyledDialogContent = styled(DialogContent)({
   overflow: "hidden",
   padding: "0",
@@ -157,6 +141,7 @@ const a11yProps = (index: number) => {
 const InfoTabs: React.FC<{ video: Video }> = ({ video }) => {
   const [value, setValue] = React.useState(0);
   const { t } = useTranslation("common");
+  const theme = useTheme();
   const router = useRouter();
   const { locale } = router;
 
@@ -168,6 +153,7 @@ const InfoTabs: React.FC<{ video: Video }> = ({ video }) => {
     "MM/dd HH:mm~",
     { localeCode: locale },
   );
+  const liveStatus = isLivestream(video) ? getLiveStatus(video) : undefined;
   const showChatTab =
     isLivestream(video) &&
     isOnPlatformWithChat(video) &&
@@ -209,15 +195,15 @@ const InfoTabs: React.FC<{ video: Video }> = ({ video }) => {
             <TypographySmallOnMobile sx={{ marginRight: "10px" }}>
               {formattedStartTime}
             </TypographySmallOnMobile>
-            {isLivestream(video) && (
-              <>
-                {getLiveStatus(video) === "live" && (
-                  <LiveLabel>{t("liveStatus.live")}</LiveLabel>
-                )}
-                {getLiveStatus(video) === "upcoming" && (
-                  <LiveLabel isUpcoming>{t("liveStatus.upcoming")}</LiveLabel>
-                )}
-              </>
+            {(liveStatus === "live" || liveStatus === "upcoming") && (
+              <HighlightedVideoChip
+                highlightColor={
+                  theme.vars.palette.customColors.videoHighlight[liveStatus]
+                }
+                bold
+              >
+                {t(`liveStatus.${liveStatus}`)}
+              </HighlightedVideoChip>
             )}
           </Box>
         </Box>

service/vspo-schedule/web/src/components/Elements/index.ts

@@ -1,6 +1,7 @@
 export * from "./Button";
 export * from "./Card";
 export * from "./ChatEmbed";
+export * from "./Chip";
 export * from "./Dialog";
 export * from "./Drawer";
 export * from "./Google";

service/vspo-schedule/web/src/components/Layout/Header.tsx

@@ -11,11 +11,11 @@ import { CustomDrawer } from "../Elements";
 import { useTranslation } from "next-i18next";
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  backgroundColor: "#7266cf",
+  backgroundColor: theme.vars.palette.customColors.vspoPurple,
   zIndex: 1300,
 
   [theme.getColorSchemeSelector("dark")]: {
-    backgroundColor: "#212121",
+    backgroundColor: theme.vars.palette.customColors.darkGray,
   },
 }));
 const StyledTypography = styled(Typography)({

service/vspo-schedule/web/src/components/Templates/Livestreams.tsx

@@ -27,46 +27,46 @@ type Props = {
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
   width: "100%",
-  backgroundColor: "rgb(45, 75, 112)",
+  backgroundColor: theme.vars.palette.customColors.darkBlue,
   color: "white",
   fontWeight: "bold",
   borderRadius: "4px",
 
   [theme.getColorSchemeSelector("dark")]: {
-    backgroundColor: "#353535",
+    backgroundColor: theme.vars.palette.customColors.gray,
   },
 }));
 
 const DateTypography = styled(Typography)(({ theme }) => ({
   width: "100%",
   textAlign: "center",
-  backgroundColor: "rgb(45, 75, 112)",
+  backgroundColor: theme.vars.palette.customColors.darkBlue,
   color: "white",
   fontWeight: "bold",
   padding: "0.75rem",
   borderRadius: "4px",
   whiteSpace: "pre-line",
 
   [theme.getColorSchemeSelector("dark")]: {
-    backgroundColor: "#353535",
+    backgroundColor: theme.vars.palette.customColors.gray,
   },
 }));
 
 const TimeRangeLabel = styled(Typography)(({ theme }) => ({
   width: "12rem",
-  color: "rgb(255, 255, 255)",
+  color: "white",
   fontSize: "1.5rem",
   fontWeight: 600,
   textAlign: "center",
-  backgroundColor: "rgb(45, 75, 112)",
+  backgroundColor: theme.vars.palette.customColors.darkBlue,
   borderRadius: "1.35rem",
   marginBottom: theme.spacing(2),
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
 
   [theme.getColorSchemeSelector("dark")]: {
-    backgroundColor: "#353535",
+    backgroundColor: theme.vars.palette.customColors.gray,
   },
   [theme.breakpoints.down("md")]: {
     width: "10rem",