[DEV-868]: remove hardcoded colors (#543)

pagopa · Jan 10, 2024 · afc6693 · afc6693
1 parent 35e59c2
commit afc6693
Show file tree

Hide file tree

Showing 13 changed files with 91 additions and 53 deletions.
diff --git a/.changeset/polite-worms-hug.md 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
@@ -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
@@ -48,10 +48,10 @@ const WebinarHeaderBanner: FC<WebinarHeaderBannerProps> = ({ webinars }) => {
       }}
     >
       <Box sx={{ display: 'flex' }}>
-        <VideoLibraryIcon sx={{ color: 'white' }} />
+        <VideoLibraryIcon sx={{ color: palette.common.white }} />
         <Typography
           sx={{
-            color: 'white',
+            color: palette.common.white,
             marginLeft: '10px',
             WebkitLineClamp: '1',
             display: '-webkit-box',
@@ -66,7 +66,7 @@ const WebinarHeaderBanner: FC<WebinarHeaderBannerProps> = ({ 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<WebinarHeaderBannerProps> = ({ webinars }) => {
           slug && window?.localStorage.setItem(slug, endDateTime);
         }}
       >
-        <CloseIcon sx={{ color: 'white' }}></CloseIcon>
+        <CloseIcon sx={{ color: palette.common.white }}></CloseIcon>
       </IconButton>
     </Box>
   );

diff --git 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 && (
         <Typography
           sx={{
-            color: 'white',
+            color: palette.common.white,
             fontSize: '16px',
             fontWeight: 700,
             position: 'absolute',

diff --git a/apps/nextjs-website/src/components/molecules/GuidesSection/GuidesSection.tsx b/apps/nextjs-website/src/components/molecules/GuidesSection/GuidesSection.tsx
@@ -16,15 +16,15 @@ export const GuidesSection: FC<GuidesSectionProps> = ({
   title,
   guides,
 }: GuidesSectionProps) => {
-  const { typography } = useTheme();
+  const { typography, palette } = useTheme();
 
   return (
-    <EContainer background={'#FAFAFA'} py={0}>
+    <EContainer background={palette.background.default} py={0}>
       <Typography
         content='div'
         mb={3}
         mt={6}
-        color={'#5C6F82'}
+        color={palette.text.secondary}
         fontSize={14}
         sx={{
           fontWeight: typography.fontWeightBold,

diff --git a/apps/nextjs-website/src/components/molecules/RequiredTextField/RequiredTextField.tsx b/apps/nextjs-website/src/components/molecules/RequiredTextField/RequiredTextField.tsx
@@ -1,5 +1,7 @@
+'use client';
 import { TextField, TextFieldProps } from '@mui/material';
 import { FC, useCallback, useEffect, useState } from 'react';
+import { useTheme } from '@mui/material';
 
 export type ValidatorFunction = (value: string) => {
   valid: boolean;
@@ -23,6 +25,7 @@ const RequiredTextField: FC<RequiredTextFieldProps> = ({
   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<RequiredTextFieldProps> = ({
       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
@@ -14,6 +14,7 @@ const SpeakerAvatar = ({
   name,
   compactMode = true,
 }: SpeakerAvatarProps) => {
+  const { palette } = useTheme();
   return imagePath ? (
     <Image
       src={imagePath}
@@ -37,7 +38,7 @@ const SpeakerAvatar = ({
         borderStyle: 'solid',
         borderWidth: '1px',
         borderRadius: '100%',
-        borderColor: '#E3E7EB',
+        borderColor: palette.divider,
         width: compactMode ? '64px' : '145px',
         height: compactMode ? '64px' : '145px',
       }}

diff --git a/apps/nextjs-website/src/components/organisms/Auth/ConfirmLogin.tsx b/apps/nextjs-website/src/components/organisms/Auth/ConfirmLogin.tsx
@@ -15,6 +15,7 @@ import { IllusEmailValidation } from '@pagopa/mui-italia';
 import { useCallback, useState } from 'react';
 import ResendEmail from '@/components/molecules/ResendEmail/ResendEmail';
 import { snackbarAutoHideDurationMs } from '@/config';
+import { useTheme } from '@mui/material';
 
 interface confirmLoginProps {
   email: string | null;
@@ -26,6 +27,7 @@ const ConfirmLogin = ({ email, onConfirmLogin }: confirmLoginProps) => {
     auth: { confirmLogin },
   } = translations;
 
+  const { palette } = useTheme();
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
   const [code, setCode] = useState<string>('');
@@ -78,7 +80,7 @@ const ConfirmLogin = ({ email, onConfirmLogin }: confirmLoginProps) => {
                 size='small'
                 onChange={(e) => setCode(e.target.value)}
                 sx={{
-                  backgroundColor: 'white',
+                  backgroundColor: palette.background.paper,
                 }}
               />
             </Stack>

diff --git 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,
                   }}
                 />
               </Stack>

diff --git 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,
                   }}
                 />
               </Stack>

diff --git 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<ReactNode>) => (
   <Typography component='div'>{children}</Typography>
 );
 
 export const Card = ({ children, coverSrc, href }: CardProps<ReactNode>) => {
+  const { palette } = useTheme();
   const router = useRouter();
   const content = (
     <>
@@ -36,7 +39,7 @@ export const Card = ({ children, coverSrc, href }: CardProps<ReactNode>) => {
             sx={{
               height: '100%',
               '.MuiCardActionArea-focusHighlight': {
-                backgroundColor: 'white',
+                backgroundColor: palette.background.paper,
                 opacity: 0,
               },
               '.MuiCardContent-root': { height: 'inherit' },