From bafe6e3c7dcffcdb9b9956535bcb73179b46f7d1 Mon Sep 17 00:00:00 2001 From: Souad El Mansouri Date: Fri, 19 Jan 2024 16:57:26 +0100 Subject: [PATCH] Fix linter errors --- src/App.js | 88 ++---------------------- src/components/footer.jsx | 4 +- src/components/header.jsx | 4 +- src/components/headlineSection.jsx | 8 +-- src/components/midSection.jsx | 1 - src/components/teamSection.jsx | 1 - src/index.js | 83 +++++++++++++++++++++- src/logo.svg | 1 - src/styles/components/headlineSection.js | 18 ----- src/styles/index.js | 12 +++- 10 files changed, 105 insertions(+), 115 deletions(-) delete mode 100644 src/logo.svg delete mode 100644 src/styles/components/headlineSection.js diff --git a/src/App.js b/src/App.js index 2b79c5d..d897eaa 100644 --- a/src/App.js +++ b/src/App.js @@ -1,89 +1,15 @@ import { Routes, Route } from 'react-router-dom'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; + import Home from './views/home'; import Page2 from './views/page2'; -const theme = createTheme({ - typography: { - fontFamily: 'Oswald, sans-serif', - h1: { - fontFamily: 'Oswald, sans-serif', - fontWeight: 900, - color: '#414F6B', - fontSize: '4.5rem', // Default font size for all screens - '@media (min-width:600px)': { - fontSize: '6.5rem', // Font size for screens larger than 600px (tablet and up) - }, - '@media (min-width:1024px)': { - fontSize: '8.5rem', // Font size for screens larger than 1024px (desktop and up) - }, - }, - h1Secondary: { - fontFamily: 'Oswald, sans-serif', - fontWeight: 900, - color: '#4D4D4D', // Second color - fontSize: '4rem', // Default font size for all screens - '@media (min-width:600px)': { - fontSize: '6rem', // Font size for screens larger than 600px (tablet and up) - }, - '@media (min-width:1024px)': { - fontSize: '8rem', // Font size for screens larger than 1024px (desktop and up) - }, - margin: 0, - }, - h1Counter: { - fontFamily: 'Oswald, sans-serif', - fontWeight: 900, - color: '#AFB3BD', // Second color - fontSize: '4rem', // Default font size for all screens - '@media (min-width:600px)': { - fontSize: '6rem', // Font size for screens larger than 600px (tablet and up) - }, - '@media (min-width:1024px)': { - fontSize: '8rem', // Font size for screens larger than 1024px (desktop and up) - }, - margin: 0, - }, - h4: { - fontFamily: 'Oswald, sans-serif', - fontWeight: 900, - color: '#414F6B', - fontSize: '2rem', // Default font size for all screens - '@media (min-width:600px)': { - fontSize: '3rem', // Font size for screens larger than 600px (tablet and up) - }, - '@media (min-width:1024px)': { - fontSize: '3rem', // Font size for screens larger than 1024px (desktop and up) - }, - }, - body: { - color: '#4D4D4D', - }, - }, - palette: { - mode: 'light', - blue: { - dark: '#414F6B', - light: '#63769D', - }, - grey: { - dark: '#4D4D4D', - light: '#AFB3BD', - }, - link: { - light: '#FFFFFF', - dark: '#414F6B', - }, - }, -}); - const App = () => ( - - - } /> - } /> - - + + + } /> + } /> + + ); export default App; diff --git a/src/components/footer.jsx b/src/components/footer.jsx index 3911ed1..ec3d2c3 100644 --- a/src/components/footer.jsx +++ b/src/components/footer.jsx @@ -14,13 +14,13 @@ const Footer = () => { - icon + icon - + Copy Rights diff --git a/src/components/header.jsx b/src/components/header.jsx index b382d2a..8200f0f 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -14,7 +14,7 @@ import Logo from './logo'; const Header = () => { const theme = useTheme(); - const mobile = useMediaQuery(theme.breakpoints.down('sm')); + const mobile = useMediaQuery(theme.breakpoints.down('md')); const location = useLocation(); const classes = useCustomStyles(mainStyles); const localClasses = useCustomStyles(styles); @@ -39,7 +39,7 @@ const Header = () => { location.pathname !== '/' && } - + 01.HISTORY diff --git a/src/components/headlineSection.jsx b/src/components/headlineSection.jsx index d25db8c..fd7b02d 100644 --- a/src/components/headlineSection.jsx +++ b/src/components/headlineSection.jsx @@ -5,24 +5,21 @@ import { } from '@mui/material'; import useCustomStyles from '../styles/useCustonStyles'; import mainStyles from '../styles'; -import styles from '../styles/components/headlineSection'; const HeadlineSection = () => { const classes = useCustomStyles(mainStyles); - const localClasses = useCustomStyles(styles); return ( - image1 @@ -45,6 +42,7 @@ const HeadlineSection = () => { classes.absolutePosition, classes.rootAbsolutePosition, classes.fullHeight, + classes.cover, )} alt="image1" /> diff --git a/src/components/midSection.jsx b/src/components/midSection.jsx index 7b0e4fe..434c4f3 100644 --- a/src/components/midSection.jsx +++ b/src/components/midSection.jsx @@ -10,7 +10,6 @@ import HeadlineComponent from './headlineComponent'; const MidSection = () => { const { history } = useSelector((state) => state.history); - console.log('history', history); const classes = useCustomStyles(Styles); return ( diff --git a/src/components/teamSection.jsx b/src/components/teamSection.jsx index 0280a65..47fb0be 100644 --- a/src/components/teamSection.jsx +++ b/src/components/teamSection.jsx @@ -12,7 +12,6 @@ import MountainHeader from './mountainHeader'; const TeamSection = () => { const { team } = useSelector((state) => state.history); const [mountain, setMountain] = useState(team?.mountains[0]); - console.log(team); const classes = useCustomStyles(Styles); return ( diff --git a/src/index.js b/src/index.js index 915bef2..0a6af7f 100644 --- a/src/index.js +++ b/src/index.js @@ -3,16 +3,93 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; import App from './App'; import reportWebVitals from './reportWebVitals'; import store from './store/store'; +const theme = createTheme({ + typography: { + fontFamily: 'Oswald, sans-serif', + h1: { + fontFamily: 'Oswald, sans-serif', + fontWeight: 900, + color: '#414F6B', + fontSize: '4.5rem', // Default font size for all screens + '@media (min-width:600px)': { + fontSize: '6.5rem', // Font size for screens larger than 600px (tablet and up) + }, + '@media (min-width:1024px)': { + fontSize: '8.5rem', // Font size for screens larger than 1024px (desktop and up) + }, + }, + h1Secondary: { + fontFamily: 'Oswald, sans-serif', + fontWeight: 900, + color: '#4D4D4D', // Second color + fontSize: '4rem', // Default font size for all screens + '@media (min-width:600px)': { + fontSize: '6rem', // Font size for screens larger than 600px (tablet and up) + }, + '@media (min-width:1024px)': { + fontSize: '8rem', // Font size for screens larger than 1024px (desktop and up) + }, + margin: 0, + }, + h1Counter: { + fontFamily: 'Oswald, sans-serif', + fontWeight: 900, + color: '#AFB3BD', // Second color + fontSize: '4rem', // Default font size for all screens + '@media (min-width:600px)': { + fontSize: '6rem', // Font size for screens larger than 600px (tablet and up) + }, + '@media (min-width:1024px)': { + fontSize: '8rem', // Font size for screens larger than 1024px (desktop and up) + }, + margin: 0, + }, + h4: { + fontFamily: 'Oswald, sans-serif', + fontWeight: 900, + color: '#414F6B', + fontSize: '2rem', // Default font size for all screens + '@media (min-width:600px)': { + fontSize: '3rem', // Font size for screens larger than 600px (tablet and up) + }, + '@media (min-width:1024px)': { + fontSize: '3rem', // Font size for screens larger than 1024px (desktop and up) + }, + }, + body: { + color: '#4D4D4D', + }, + }, + palette: { + mode: 'light', + blue: { + dark: '#414F6B', + light: '#63769D', + }, + grey: { + dark: '#4D4D4D', + light: '#AFB3BD', + }, + link: { + light: '#FFFFFF', + dark: '#414F6B', + }, + }, +}); + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + + + + + , ); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/styles/components/headlineSection.js b/src/styles/components/headlineSection.js deleted file mode 100644 index 358cdaa..0000000 --- a/src/styles/components/headlineSection.js +++ /dev/null @@ -1,18 +0,0 @@ -const styles = () => ({ - container1: { - background: 'url(images/page1.jpg) no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', - width: '100%', - minHeight: '100vh', - }, - container2: { - background: 'url(images/page1_no_bg.jpg) no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', - width: '100%', - minHeight: '100vh', - }, -}); - -export default styles; diff --git a/src/styles/index.js b/src/styles/index.js index 58c5e44..f9a9f30 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -15,13 +15,20 @@ const mainStyles = (theme) => ({ }, }, hiddenBg: { - opacity: 0.3, + opacity: 0.8, background: 'url(images/page1_bg.png)', position: 'absolute', top: 0, minHeight: '100vh', width: '100%', }, + container1: { + background: 'url(images/page1.jpg) no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', + width: '100%', + minHeight: '100vh', + }, fullHeight: { minHeight: '100vh', }, @@ -85,5 +92,8 @@ const mainStyles = (theme) => ({ marginTop: '15vh', }, }, + cover: { + objectFit: 'cover', + }, }); export default mainStyles;