Replace hardcoded color with theme reference

Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>

src/components/mediainfo/StarIcons.tsx

@@ -2,6 +2,7 @@ import React, { type FC } from 'react';
 import classNames from 'classnames';
 import StarIcon from '@mui/icons-material/Star';
 import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
 
 interface StarIconsProps {
     className?: string;
@@ -9,6 +10,7 @@ interface StarIconsProps {
 }
 
 const StarIcons: FC<StarIconsProps> = ({ className, communityRating }) => {
+    const theme = useTheme();
     const cssClass = classNames(
         'mediaInfoItem',
         'mediaInfoText',
@@ -19,7 +21,7 @@ const StarIcons: FC<StarIconsProps> = ({ className, communityRating }) => {
     return (
         <Box className={cssClass}>
             <StarIcon fontSize={'small'} sx={{
-                color: '#f2b01e'
+                color: theme.palette.starIcon.main
             }} />
             {communityRating.toFixed(1)}
         </Box>

src/elements/emby-progressbar/AutoTimeProgressBar.tsx

@@ -1,6 +1,7 @@
 import React, { type FC, useCallback, useEffect, useRef, useState } from 'react';
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import classNames from 'classnames';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+import { useTheme } from '@mui/material/styles';
 import type { ProgressOptions } from 'types/progressOptions';
 
 interface AutoTimeProgressBarProps {
@@ -22,6 +23,7 @@ const AutoTimeProgressBar: FC<AutoTimeProgressBarProps> = ({
 }) => {
     const [progress, setProgress] = useState(pct);
     const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const theme = useTheme();
 
     const onAutoTimeProgress = useCallback(() => {
         const start = parseInt(starTtime.toString(), 10);
@@ -67,7 +69,7 @@ const AutoTimeProgressBar: FC<AutoTimeProgressBarProps> = ({
             sx={{
                 [`& .${linearProgressClasses.bar}`]: {
                     borderRadius: 5,
-                    backgroundColor: isRecording ? '#cb272a' : '#00a4dc'
+                    backgroundColor: isRecording ? theme.palette.error.main : theme.palette.primary.main
                 }
             }}
         />

src/themes/theme.ts

@@ -1,5 +1,15 @@
 import { createTheme } from '@mui/material/styles';
 
+declare module '@mui/material/styles' {
+  interface Palette {
+    starIcon: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    starIcon?: PaletteOptions['primary'];
+  }
+}
+
 const LIST_ICON_WIDTH = 36;
 
 /** The default Jellyfin app theme for mui */
@@ -18,6 +28,12 @@ const theme = createTheme({
         },
         action: {
             selectedOpacity: 0.2
+        },
+        starIcon: {
+            main: '#f2b01e' // Yellow color
+        },
+        error: {
+            main: '#cb272a' // Red color
         }
     },
     typography: {