Fix linter errors

souad988 · Jan 19, 2024 · bafe6e3 · bafe6e3
1 parent 6c3a011
commit bafe6e3
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 115 deletions.
diff --git 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 = () => (
-  <ThemeProvider theme={theme}>
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/page2" element={<Page2 />} />
-    </Routes>
-  </ThemeProvider>
+
+  <Routes>
+    <Route path="/" element={<Home />} />
+    <Route path="/page2" element={<Page2 />} />
+  </Routes>
+
 );
 
 export default App;
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -14,13 +14,13 @@ const Footer = () => {
       <Grid container justifyContent="space-between" alignItems="center">
         <Grid container item lg={3} xs={6}>
           <Grid item>
-            <img src="images/icons/icon.png" alt="icon" />
+            <img src="images/icon_header.png" alt="icon" />
           </Grid>
           <Grid item alignItems="center">
             <Logo />
           </Grid>
         </Grid>
-        <Grid item lg={3} xs={6}>
+        <Grid item lg={3} xs={4}>
           <Typography variant="body" size="small">Copy Rights </Typography>
         </Grid>
       </Grid>

diff --git 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 !== '/' && <Grid item><Logo /></Grid>
             }
           </Grid>
-          <Grid container item lg={3} xs={6} justifyContent="space-between" style={{ display: mobile ? 'none' : 'flex' }}>
+          <Grid container item lg={2} md={3} xs={6} justifyContent="space-between" style={{ display: mobile ? 'none' : 'flex' }}>
             <Grid item>
               <HashLink smooth to="/page2#history" className={location.pathname === '/' ? classes.lightLink : classes.darkLink}>
                 01.HISTORY

diff --git 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 (
     <Box className={classes.container}>
       <Box className={clsx(classes.hiddenBg)} />
-      <img
-        src="images/page1.jpg"
+      <Box
         className={clsx(
           classes.homeContainer,
           classes.lowOpacity,
           classes.absolutePosition,
           classes.rootAbsolutePosition,
           classes.fullHeight,
+          classes.container1,
         )}
-        alt="image1"
       />
       <Grid container className={clsx(classes.absolutePosition, classes.marginTop)} justifyContent="center" alignItems="center">
         <Grid item>
@@ -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
@@ -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
@@ -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 (
     <Box id="team">

diff --git 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(
   <Provider store={store}>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <ThemeProvider theme={theme}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ThemeProvider>
   </Provider>,
 );
 

diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/styles/components/headlineSection.js b/src/styles/components/headlineSection.js
diff --git 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;