Make all text muted color

Author: trybick

front/src/features/calendar/CustomCalendarHeader.tsx

@@ -67,7 +67,6 @@ const CustomCalendarHeader = ({ calendarRef, title, viewRange }: Props) => {
       <Heading
         fontSize="4xl"
         fontWeight="semibold"
-        color="fg.muted"
         justifySelf="start"
         ml="2px"
       >

front/src/features/calendar/DesktopCalendarEventPopover.tsx

@@ -70,18 +70,18 @@ const DesktopCalendarEventPopover = (props: Props) => {
             </HoverCard.Arrow>
             <Box>
               <Link
-                color="white"
+                color="fg"
                 fontSize="14px"
                 mb="7px"
                 href={`${ROUTES.SHOW}/${showId}`}
                 onClick={handleClickTitle}
               >
                 <Text lineClamp={1}>{showName}</Text>
               </Link>
-              <Text color="white" fontSize="lg" fontWeight="600" mb="3px">
+              <Text color="fg" fontSize="lg" fontWeight="600" mb="3px">
                 {seasonAndEpisodeNumbersFull}
               </Text>
-              <Text color="white" fontSize="sm" fontStyle="italic" mb="8px">
+              <Text color="fg" fontSize="sm" fontStyle="italic" mb="8px">
                 {!isMulipleEvent && episodeName}
               </Text>
 
@@ -93,9 +93,9 @@ const DesktopCalendarEventPopover = (props: Props) => {
                         alignSelf="center"
                         as={TbBoxMultiple}
                         boxSize="14px"
-                        color="white"
+                        color="fg"
                       />
-                      <Text color="white" fontSize="13px" fontWeight="500">
+                      <Text color="fg" fontSize="13px" fontWeight="500">
                         {`${multipleEventSpanAmount} episodes`}
                       </Text>
                     </Flex>
@@ -106,9 +106,9 @@ const DesktopCalendarEventPopover = (props: Props) => {
                         alignSelf="center"
                         as={HiOutlineVideoCamera}
                         boxSize="14px"
-                        color="white"
+                        color="fg"
                       />
-                      <Text color="white" fontSize="13px" fontWeight="500">
+                      <Text color="fg" fontSize="13px" fontWeight="500">
                         {network}
                       </Text>
                     </Flex>
@@ -119,9 +119,9 @@ const DesktopCalendarEventPopover = (props: Props) => {
                         alignSelf="center"
                         as={IoIosTimer}
                         boxSize="14px"
-                        color="white"
+                        color="fg"
                       />
-                      <Text color="white" fontSize="13px" fontWeight="500">
+                      <Text color="fg" fontSize="13px" fontWeight="500">
                         {runtime} mins
                       </Text>
                     </Flex>
@@ -130,7 +130,7 @@ const DesktopCalendarEventPopover = (props: Props) => {
               ) : null}
 
               {overview && !isMulipleEvent && (
-                <Text color="white" fontSize="sm" mt="9px">
+                <Text color="fg" fontSize="sm" mt="9px">
                   {overview}
                 </Text>
               )}

front/src/features/following/Show.tsx

@@ -66,19 +66,12 @@ const Show = (props: Props) => {
           onClick={onShowClick}
           textAlign="center"
           textDecoration={isImageHovered ? 'underline' : 'none'}
-          textUnderlineOffset="2px"
           _hover={{
             textDecoration: 'underline',
           }}
           href={`${ROUTES.SHOW}/${id}`}
         >
-          <Heading
-            as="button"
-            cursor="pointer"
-            fontSize="md"
-            lineClamp={1}
-            color="fg.muted"
-          >
+          <Heading as="button" cursor="pointer" fontSize="md" lineClamp={1}>
             {name}
           </Heading>
         </Link>

front/src/features/search/PopularShow.tsx

@@ -70,18 +70,11 @@ const PopularShow = ({ show }: Props) => {
           onClick={onShowClick}
           m="0 auto"
           textDecoration={isImageHovered ? 'underline' : 'none'}
-          textUnderlineOffset="2px"
           _hover={{
             textDecoration: 'underline',
           }}
         >
-          <Heading
-            as="button"
-            cursor="pointer"
-            fontSize="md"
-            lineClamp={1}
-            color="fg.muted"
-          >
+          <Heading as="button" cursor="pointer" fontSize="md" lineClamp={1}>
             {name}
           </Heading>
         </Link>

front/src/features/show/EpisodesTable.tsx

@@ -22,20 +22,20 @@ const EpisodesTable = ({ episodes }: Props) => {
       id: 'episodeNumber',
       accessorKey: 'episodeNumber',
       size: 40,
-      header: () => <Text>#</Text>,
+      header: () => <Text color="fg.muted">#</Text>,
     },
     {
       id: 'name',
       accessorKey: 'name',
       size: 100,
-      header: () => <Text>Title</Text>,
+      header: () => <Text color="fg.muted">Title</Text>,
     },
     {
       id: 'airDate',
       size: 80,
       accessorFn: row =>
         row.airDate && dayjs(row.airDate).format('MMMM D, YYYY'),
-      header: () => <Text>Air Date</Text>,
+      header: () => <Text color="fg.muted">Air Date</Text>,
     },
     {
       id: 'voteAverage',
@@ -44,7 +44,11 @@ const EpisodesTable = ({ episodes }: Props) => {
         style: { textAlign: 'center' },
       },
       accessorFn: row => row.voteAverage,
-      header: () => <Text textAlign="center">Rating</Text>,
+      header: () => (
+        <Text color="fg.muted" textAlign="center">
+          Rating
+        </Text>
+      ),
       cell: ({ row }) => (
         <Text textAlign="center">{row.original.voteAverage}</Text>
       ),

front/src/features/show/ShowDetails.tsx

@@ -39,7 +39,7 @@ const ShowDetails = () => {
   return (
     <Box w="100%">
       <DelayedSkeleton isLoading={isLoading}>
-        <Heading as="h3" fontSize="3xl" mb="7px" color="fg.muted">
+        <Heading as="h3" fontSize="3xl" mb="7px">
           {name}{' '}
           {yearsActive && (
             <chakra.span fontSize="2xl" fontWeight="600">

front/src/theme/theme.ts

@@ -11,10 +11,18 @@ const customConfig = defineConfig({
     },
     body: {
       backgroundColor: 'bg.muted',
+      color: 'fg.muted',
     },
   },
 
   theme: {
+    recipes: {
+      heading: {
+        base: {
+          color: 'fg.muted',
+        },
+      },
+    },
     tokens: {
       fonts: {
         heading: { value: '"DM Sans", sans-serif' },