updating themes to make light mode better

CodeClimbersIO · Nov 1, 2024 · c0b587b · c0b587b
1 parent e680bb8
commit c0b587b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 13 deletions.
diff --git a/packages/app/src/components/ContributorsPage.tsx b/packages/app/src/components/ContributorsPage.tsx
@@ -3,8 +3,10 @@ import { SimpleInfoCard, SimpleInfoCardProps } from './common/SimpleInfoCard'
 import Grid2 from '@mui/material/Unstable_Grid2'
 import { getContributors } from '../services/contributors.service'
 import { PlainHeader } from './common/PlainHeader'
+import { useTheme } from '@mui/material/styles'
 
 export const ContributorsPage = () => {
+  const theme = useTheme()
   const contributors = getContributors()
   const contributorCardData: SimpleInfoCardProps[] = contributors.map(
     (contributor) => ({
@@ -25,7 +27,10 @@ export const ContributorsPage = () => {
         <Grid2 container spacing={2}>
           {contributorCardData.map((contributor) => (
             <Grid2 key={contributor.title} xs={12} sm={6} md={4} lg={3}>
-              <SimpleInfoCard {...contributor} />
+              <SimpleInfoCard
+                {...contributor}
+                backgroundColor={theme.palette.background.paper}
+              />
             </Grid2>
           ))}
         </Grid2>

diff --git a/packages/app/src/components/PerformanceReviewFax.tsx b/packages/app/src/components/PerformanceReviewFax.tsx
@@ -9,8 +9,8 @@ export const PerformanceReviewFax = ({ performanceReview }: Props) => {
   return (
     <Box
       sx={{
-        backgroundColor: (theme) => theme.palette.background.fax,
-        color: (theme) => theme.palette.text.fax,
+        backgroundColor: (theme) => theme.palette.common.white,
+        color: (theme) => theme.palette.common.black,
         p: 6,
       }}
     >

diff --git a/packages/app/src/components/WeeklyReports/AiReportHeader.tsx b/packages/app/src/components/WeeklyReports/AiReportHeader.tsx
@@ -54,8 +54,8 @@ export const AiReportHeader = (props: {
     <Box
       sx={{
         display: 'flex',
-        backgroundColor: '#FAF7F7',
-        color: '#000',
+        backgroundColor: (theme) => theme.palette.common.white,
+        color: (theme) => theme.palette.common.black,
         justifyContent: 'center',
         p: 4,
       }}

diff --git a/packages/app/src/components/common/SimpleInfoCard.tsx b/packages/app/src/components/common/SimpleInfoCard.tsx
@@ -10,13 +10,15 @@ export interface SimpleInfoCardProps {
   subTitle: string
   callout: string
   href?: string
+  backgroundColor?: string
 }
 export const SimpleInfoCard = ({
   subjectUrl,
   title,
   subTitle,
   callout,
   href,
+  backgroundColor,
 }: SimpleInfoCardProps) => {
   const isGithubUrl = subjectUrl?.includes('github.com')
   return (
@@ -37,7 +39,8 @@ export const SimpleInfoCard = ({
         sx={{
           border: '1px solid',
           borderColor: 'transparent',
-          backgroundColor: (theme) => theme.palette.background.paper_raised,
+          backgroundColor: (theme) =>
+            backgroundColor || theme.palette.background.paper_raised,
           '&:hover': {
             borderColor: (theme) => theme.palette.primary.main,
           },

diff --git a/packages/app/src/config/theme.ts b/packages/app/src/config/theme.ts
@@ -25,12 +25,10 @@ declare module '@mui/material/styles' {
     paper_raised: string
     medium: string
     border: string
-    fax: string
     inverted: string
   }
   interface TypeText {
     actionDown?: string
-    fax?: string
     inverted?: string
   }
   interface TypographyVariants {
@@ -146,7 +144,6 @@ const darkOptions: ThemeOptions = {
       default: '#1D1D1D',
       paper: BASE_THEME_GREYS[900],
       paper_raised: '#323232',
-      fax: '#FAF7F7',
       medium: '#3F3F3F',
       border: '#707070',
       inverted: '#F8F8F8',
@@ -156,7 +153,6 @@ const darkOptions: ThemeOptions = {
     },
     text: {
       actionDown: '#AEDBFE',
-      fax: '#222222',
       inverted: '#222222',
     },
     graphColors: darkGraphColors,
@@ -194,9 +190,9 @@ const lightOptions: ThemeOptions = {
       main: '#769E68',
     },
     background: {
-      default: '#F5F5F5',
-      paper: '#F8F8F8',
-      paper_raised: '#E6E6E6',
+      default: '#F6F7F8',
+      paper: '#FFFFFF',
+      paper_raised: '#F6F7F8',
       inverted: '#323232',
     },
     graphColors: lightGraphColors,