diff --git a/.changeset/polite-worms-hug.md b/.changeset/polite-worms-hug.md new file mode 100644 index 0000000000..7c01606b8e --- /dev/null +++ b/.changeset/polite-worms-hug.md @@ -0,0 +1,5 @@ +--- +"nextjs-website": patch +--- + +Remove hardcoded colors from the app diff --git a/apps/nextjs-website/src/components/atoms/NavigationArrow/NavigationArrow.tsx b/apps/nextjs-website/src/components/atoms/NavigationArrow/NavigationArrow.tsx index 6faecf009f..be72af3709 100644 --- a/apps/nextjs-website/src/components/atoms/NavigationArrow/NavigationArrow.tsx +++ b/apps/nextjs-website/src/components/atoms/NavigationArrow/NavigationArrow.tsx @@ -19,7 +19,7 @@ const NavigationArrow = ({ direction, hidden }: NavigationArrowProps) => { const boxSx = direction === 'right' ? { right: 20 } : { left: 20 }; const arrowIcon = createElement( direction === 'right' ? ArrowForward : ArrowBack, - { sx: { color: 'white', height: 12, width: 12 } } + { sx: { color: palette.common.white, height: 12, width: 12 } } ); return ( diff --git a/apps/nextjs-website/src/components/atoms/WebinarHeaderBanner/WebinarHeaderBanner.tsx b/apps/nextjs-website/src/components/atoms/WebinarHeaderBanner/WebinarHeaderBanner.tsx index 70143feaa9..604dbb8985 100644 --- a/apps/nextjs-website/src/components/atoms/WebinarHeaderBanner/WebinarHeaderBanner.tsx +++ b/apps/nextjs-website/src/components/atoms/WebinarHeaderBanner/WebinarHeaderBanner.tsx @@ -48,10 +48,10 @@ const WebinarHeaderBanner: FC = ({ webinars }) => { }} > - + = ({ webinars }) => { component={Link} sx={{ display: 'flex', - color: 'white', + color: palette.common.white, fontWeight: 600, height: 28, marginLeft: '16px', @@ -83,7 +83,7 @@ const WebinarHeaderBanner: FC = ({ webinars }) => { slug && window?.localStorage.setItem(slug, endDateTime); }} > - + ); diff --git a/apps/nextjs-website/src/components/molecules/CodeBlockPart/CodeBlockPart.tsx b/apps/nextjs-website/src/components/molecules/CodeBlockPart/CodeBlockPart.tsx index 90055c00b6..046bc535c6 100644 --- a/apps/nextjs-website/src/components/molecules/CodeBlockPart/CodeBlockPart.tsx +++ b/apps/nextjs-website/src/components/molecules/CodeBlockPart/CodeBlockPart.tsx @@ -69,7 +69,7 @@ const CodeBlockPart = ({ {title && ( = ({ title, guides, }: GuidesSectionProps) => { - const { typography } = useTheme(); + const { typography, palette } = useTheme(); return ( - + { valid: boolean; @@ -23,6 +25,7 @@ const RequiredTextField: FC = ({ const [isDirty, setIsDirty] = useState(false); const [isValid, setIsValid] = useState(false); const [errorText, setErrorText] = useState(helperText); + const { palette } = useTheme(); const validateField = useCallback(() => { if (!value || value?.trim().length === 0) { @@ -60,7 +63,7 @@ const RequiredTextField: FC = ({ onChange={onChange} onBlur={() => setIsDirty(true)} sx={{ - backgroundColor: 'white', + backgroundColor: palette.background.paper, width: '100%', }} error={isDirty && !isValid} diff --git a/apps/nextjs-website/src/components/molecules/SpeakerPreview/SpeakerPreview.tsx b/apps/nextjs-website/src/components/molecules/SpeakerPreview/SpeakerPreview.tsx index 6923661a25..b036a2e7df 100644 --- a/apps/nextjs-website/src/components/molecules/SpeakerPreview/SpeakerPreview.tsx +++ b/apps/nextjs-website/src/components/molecules/SpeakerPreview/SpeakerPreview.tsx @@ -14,6 +14,7 @@ const SpeakerAvatar = ({ name, compactMode = true, }: SpeakerAvatarProps) => { + const { palette } = useTheme(); return imagePath ? ( { auth: { confirmLogin }, } = translations; + const { palette } = useTheme(); const [error, setError] = useState(null); const [submitting, setSubmitting] = useState(false); const [code, setCode] = useState(''); @@ -78,7 +80,7 @@ const ConfirmLogin = ({ email, onConfirmLogin }: confirmLoginProps) => { size='small' onChange={(e) => setCode(e.target.value)} sx={{ - backgroundColor: 'white', + backgroundColor: palette.background.paper, }} /> diff --git a/apps/nextjs-website/src/components/organisms/Auth/LoginForm.tsx b/apps/nextjs-website/src/components/organisms/Auth/LoginForm.tsx index 1fc2cc1796..9a721c8dec 100644 --- a/apps/nextjs-website/src/components/organisms/Auth/LoginForm.tsx +++ b/apps/nextjs-website/src/components/organisms/Auth/LoginForm.tsx @@ -102,7 +102,7 @@ const LoginForm = ({ onLogin }: LoginFormProps) => { size='small' onChange={(e) => setUsername(e.target.value)} sx={{ - backgroundColor: 'white', + backgroundColor: palette.background.paper, }} /> diff --git a/apps/nextjs-website/src/components/organisms/Auth/SignUpForm.tsx b/apps/nextjs-website/src/components/organisms/Auth/SignUpForm.tsx index 5f84cbadce..042cb209b8 100644 --- a/apps/nextjs-website/src/components/organisms/Auth/SignUpForm.tsx +++ b/apps/nextjs-website/src/components/organisms/Auth/SignUpForm.tsx @@ -328,7 +328,7 @@ const SignUpForm = ({ userData, setUserData, onSignUp }: SignUpFormProps) => { } value={role} sx={{ - backgroundColor: 'white', + backgroundColor: palette.background.paper, }} /> diff --git a/apps/nextjs-website/src/components/organisms/GitBookContent/components/Cards.tsx b/apps/nextjs-website/src/components/organisms/GitBookContent/components/Cards.tsx index 577375a7dc..aab7f0641d 100644 --- a/apps/nextjs-website/src/components/organisms/GitBookContent/components/Cards.tsx +++ b/apps/nextjs-website/src/components/organisms/GitBookContent/components/Cards.tsx @@ -1,3 +1,4 @@ +'use client'; import { CardsProps, CardProps, @@ -11,12 +12,14 @@ import Typography from '@mui/material/Typography'; import Grid from '@mui/material/Grid'; import { useRouter } from 'next/navigation'; import CardActionArea from '@mui/material/CardActionArea'; +import { useTheme } from '@mui/material'; export const CardItem = ({ children }: CardItemProps) => ( {children} ); export const Card = ({ children, coverSrc, href }: CardProps) => { + const { palette } = useTheme(); const router = useRouter(); const content = ( <> @@ -36,7 +39,7 @@ export const Card = ({ children, coverSrc, href }: CardProps) => { sx={{ height: '100%', '.MuiCardActionArea-focusHighlight': { - backgroundColor: 'white', + backgroundColor: palette.background.paper, opacity: 0, }, '.MuiCardContent-root': { height: 'inherit' }, diff --git a/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorDark.tsx b/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorDark.tsx index e5efddf001..88ad88502a 100644 --- a/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorDark.tsx +++ b/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorDark.tsx @@ -1,17 +1,26 @@ -export const SvgColorDark = () => ( - <> - - - - - -); +'use client'; +import { useTheme } from '@mui/material'; + +export const SvgColorDark = () => { + const { palette } = useTheme(); + return ( + <> + + + + + + ); +}; diff --git a/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorLight.tsx b/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorLight.tsx index 8569dd41df..590079429b 100644 --- a/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorLight.tsx +++ b/apps/nextjs-website/src/editorialComponents/FundedByNextGenerationEU/partials/SvgColorLight.tsx @@ -1,21 +1,36 @@ -export const SvgColorLight = () => ( - <> - - - - - - - - - - - - -); +'use client'; +import { useTheme } from '@mui/material'; + +export const SvgColorLight = () => { + const { palette } = useTheme(); + return ( + <> + + + + + + + + + + + + + ); +};