From bec9a05da82aa288f57d375860dfcadafd5908b7 Mon Sep 17 00:00:00 2001
From: Saksham Singh <sakshamsingh@192.168.1.5>
Date: Thu, 17 Mar 2022 10:06:32 +0530
Subject: [PATCH 1/6] Used ThemeProvider for fontSize

---
 src/pages/learn.jsx         | 20 ++++++++++++++++++--
 src/styles/Learn.module.css |  2 +-
 src/styles/theme.ts         | 10 ++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/pages/learn.jsx b/src/pages/learn.jsx
index 73132ed..6dcf79e 100644
--- a/src/pages/learn.jsx
+++ b/src/pages/learn.jsx
@@ -11,6 +11,9 @@ import roundorca from '../../public/images/roundorca.png'
 import salishsea from '../../public/images/salishsea.png'
 import TopBanner from '../components/TopBanner'
 import learnStyles from '../styles/Learn.module.css'
+import theme from '../styles/theme'
+import { ThemeProvider,Typography } from '@mui/material'
+import { Box } from '@mui/system'
 
 export const learn = () => {
   return (
@@ -32,19 +35,32 @@ export const learn = () => {
         <li>Souther Resident Killer Whale Call Catalog</li>
         <li>Exhibits</li>
       </ul>
+      <ThemeProvider theme={theme}>
+        <Box  sx={{marginLeft:"85px"}}>
+        <Typography variant="h1">
       <h1 className={learnStyles.salish}> Sounds Of The Salish Sea</h1>
+      </Typography>
+      </Box>
+      </ThemeProvider>
+      <ThemeProvider theme={theme}>
+        <Box width={969}height={84} sx={{ml:"85px",marginTop:"30px",marginBottom:"29px"}}>
+        <Typography variant="body1">
       <p className={learnStyles.salishsea}>
         Explore common sounds of the Salish Sea by selecting the animals and
         other objects in this anoramic soundscape of the inlandwaters of
         Washington State(USA) and British Columbia(Canada)
       </p>
+      
+      </Typography>
+      </Box>
+      </ThemeProvider>
       <div className={learnStyles.imageWrapper}>
         <Image
           className={learnStyles.salishseaimg}
           src={salishsea}
           alt="Sounds Of The Salish Sea"
-          width={800}
-          height={450}
+          width={1234}
+          height={701}
           layout="intrinsic"
           quality={65}
         />
diff --git a/src/styles/Learn.module.css b/src/styles/Learn.module.css
index 5b32ad2..8354e2e 100644
--- a/src/styles/Learn.module.css
+++ b/src/styles/Learn.module.css
@@ -20,7 +20,7 @@
   text-align: left;
 }
 .imageWrapper {
-  text-align: center;
+  margin-left: 84px;
 }
 .orca {
   margin: 90px 90px;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 5e2ea52..50f2fcd 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -29,6 +29,16 @@ const theme = createTheme({
   },
   typography: {
     fontFamily: 'Montserrat',
+    h1: {
+      fontFamily: 'Mukta',
+      fontSize: '40px',
+      fontWeight: '600',
+    },
+   body1: {
+      fontFamily: 'Montserrat',
+      fontSize: '20px',
+      fontWeight: '600',
+  }
   },
   components: {
     MuiAppBar: {

From e38a78ec5be3a2b46f1230644a47dcb1610bbb6c Mon Sep 17 00:00:00 2001
From: Saksham Singh <sakshamsingh@192.168.1.2>
Date: Sat, 19 Mar 2022 17:22:19 +0530
Subject: [PATCH 2/6] Fixed lint and format errors

---
 .vscode/settings.default.json |  7 ----
 src/pages/learn.jsx           | 60 +++++++++++++++++++----------------
 src/styles/Learn.module.css   |  1 -
 src/styles/theme.ts           |  4 +--
 4 files changed, 34 insertions(+), 38 deletions(-)
 delete mode 100644 .vscode/settings.default.json

diff --git a/.vscode/settings.default.json b/.vscode/settings.default.json
deleted file mode 100644
index 6ab3a54..0000000
--- a/.vscode/settings.default.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
diff --git a/src/pages/learn.jsx b/src/pages/learn.jsx
index 6dcf79e..b85d110 100644
--- a/src/pages/learn.jsx
+++ b/src/pages/learn.jsx
@@ -1,3 +1,5 @@
+import { ThemeProvider, Typography } from '@mui/material'
+import { Box } from '@mui/system'
 import Head from 'next/head'
 import Image from 'next/image'
 import ReactAudioPlayer from 'react-audio-player'
@@ -12,8 +14,6 @@ import salishsea from '../../public/images/salishsea.png'
 import TopBanner from '../components/TopBanner'
 import learnStyles from '../styles/Learn.module.css'
 import theme from '../styles/theme'
-import { ThemeProvider,Typography } from '@mui/material'
-import { Box } from '@mui/system'
 
 export const learn = () => {
   return (
@@ -35,36 +35,40 @@ export const learn = () => {
         <li>Souther Resident Killer Whale Call Catalog</li>
         <li>Exhibits</li>
       </ul>
-      <ThemeProvider theme={theme}>
-        <Box  sx={{marginLeft:"85px"}}>
+
+      <Box sx={{ marginLeft: '85px' }}>
         <Typography variant="h1">
-      <h1 className={learnStyles.salish}> Sounds Of The Salish Sea</h1>
-      </Typography>
+          <h1 className={learnStyles.salish}> Sounds Of The Salish Sea</h1>
+        </Typography>
       </Box>
-      </ThemeProvider>
-      <ThemeProvider theme={theme}>
-        <Box width={969}height={84} sx={{ml:"85px",marginTop:"30px",marginBottom:"29px"}}>
+
+      <Box
+        width={969}
+        height={84}
+        sx={{ ml: '85px', marginTop: '30px', marginBottom: '29px' }}
+      >
         <Typography variant="body1">
-      <p className={learnStyles.salishsea}>
-        Explore common sounds of the Salish Sea by selecting the animals and
-        other objects in this anoramic soundscape of the inlandwaters of
-        Washington State(USA) and British Columbia(Canada)
-      </p>
-      
-      </Typography>
+          <p className={learnStyles.salishsea}>
+            Explore common sounds of the Salish Sea by selecting the animals and
+            other objects in this anoramic soundscape of the inlandwaters of
+            Washington State(USA) and British Columbia(Canada)
+          </p>
+        </Typography>
+      </Box>
+
+      <Box sx={{ marginLeft: '84px' }}>
+        <div className={learnStyles.imageWrapper}>
+          <Image
+            className={learnStyles.salishseaimg}
+            src={salishsea}
+            alt="Sounds Of The Salish Sea"
+            width={1234}
+            height={701}
+            layout="intrinsic"
+            quality={65}
+          />
+        </div>
       </Box>
-      </ThemeProvider>
-      <div className={learnStyles.imageWrapper}>
-        <Image
-          className={learnStyles.salishseaimg}
-          src={salishsea}
-          alt="Sounds Of The Salish Sea"
-          width={1234}
-          height={701}
-          layout="intrinsic"
-          quality={65}
-        />
-      </div>
       <div className={learnStyles.orca}>
         <Image
           src={roundorca}
diff --git a/src/styles/Learn.module.css b/src/styles/Learn.module.css
index 8354e2e..0106473 100644
--- a/src/styles/Learn.module.css
+++ b/src/styles/Learn.module.css
@@ -20,7 +20,6 @@
   text-align: left;
 }
 .imageWrapper {
-  margin-left: 84px;
 }
 .orca {
   margin: 90px 90px;
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 50f2fcd..56e731c 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -34,11 +34,11 @@ const theme = createTheme({
       fontSize: '40px',
       fontWeight: '600',
     },
-   body1: {
+    body1: {
       fontFamily: 'Montserrat',
       fontSize: '20px',
       fontWeight: '600',
-  }
+    },
   },
   components: {
     MuiAppBar: {

From c0ed18d3173c997b2537bcf55f3d7f57eaf030cc Mon Sep 17 00:00:00 2001
From: Saksham Singh <sakshamsingh@192.168.1.2>
Date: Sat, 19 Mar 2022 18:09:07 +0530
Subject: [PATCH 3/6] Fixing Format error

---
 src/pages/learn.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/learn.jsx b/src/pages/learn.jsx
index b85d110..2ae29b5 100644
--- a/src/pages/learn.jsx
+++ b/src/pages/learn.jsx
@@ -1,4 +1,4 @@
-import { ThemeProvider, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import { Box } from '@mui/system'
 import Head from 'next/head'
 import Image from 'next/image'
@@ -13,7 +13,6 @@ import roundorca from '../../public/images/roundorca.png'
 import salishsea from '../../public/images/salishsea.png'
 import TopBanner from '../components/TopBanner'
 import learnStyles from '../styles/Learn.module.css'
-import theme from '../styles/theme'
 
 export const learn = () => {
   return (

From 9ce11d0eb8cd250b294fe60c9318175e8ced89ac Mon Sep 17 00:00:00 2001
From: Saksham Singh <sakshamsingh@192.168.1.2>
Date: Sun, 20 Mar 2022 15:50:27 +0530
Subject: [PATCH 4/6] Removed CSS module code

---
 src/pages/learn.jsx         | 22 +++++++++-------------
 src/styles/Learn.module.css |  3 +--
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/pages/learn.jsx b/src/pages/learn.jsx
index 2ae29b5..b04decd 100644
--- a/src/pages/learn.jsx
+++ b/src/pages/learn.jsx
@@ -35,30 +35,25 @@ export const learn = () => {
         <li>Exhibits</li>
       </ul>
 
-      <Box sx={{ marginLeft: '85px' }}>
-        <Typography variant="h1">
-          <h1 className={learnStyles.salish}> Sounds Of The Salish Sea</h1>
-        </Typography>
+      <Box>
+        <Typography variant="h1">Sounds Of The Salish Sea</Typography>
       </Box>
 
       <Box
         width={969}
         height={84}
-        sx={{ ml: '85px', marginTop: '30px', marginBottom: '29px' }}
+        sx={{ marginTop: '30px', marginBottom: '29px' }}
       >
         <Typography variant="body1">
-          <p className={learnStyles.salishsea}>
-            Explore common sounds of the Salish Sea by selecting the animals and
-            other objects in this anoramic soundscape of the inlandwaters of
-            Washington State(USA) and British Columbia(Canada)
-          </p>
+          Explore common sounds of the Salish Sea by selecting the animals and
+          other objects in this anoramic soundscape of the inlandwaters of
+          Washington State(USA) and British Columbia(Canada)
         </Typography>
       </Box>
 
-      <Box sx={{ marginLeft: '84px' }}>
-        <div className={learnStyles.imageWrapper}>
+      <Box>
+        <div>
           <Image
-            className={learnStyles.salishseaimg}
             src={salishsea}
             alt="Sounds Of The Salish Sea"
             width={1234}
@@ -68,6 +63,7 @@ export const learn = () => {
           />
         </div>
       </Box>
+
       <div className={learnStyles.orca}>
         <Image
           src={roundorca}
diff --git a/src/styles/Learn.module.css b/src/styles/Learn.module.css
index 0106473..812b63e 100644
--- a/src/styles/Learn.module.css
+++ b/src/styles/Learn.module.css
@@ -19,8 +19,7 @@
   margin: 50px 10px;
   text-align: left;
 }
-.imageWrapper {
-}
+
 .orca {
   margin: 90px 90px;
   float: right;

From c50e27ccaf3ac5f1de739f065bbe3972499fd4c8 Mon Sep 17 00:00:00 2001
From: Saksham Singh <sakshamsingh@192.168.1.2>
Date: Sun, 20 Mar 2022 16:01:29 +0530
Subject: [PATCH 5/6] Added a Container Component for the section

---
 src/pages/learn.jsx | 57 +++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/pages/learn.jsx b/src/pages/learn.jsx
index b04decd..b6df1ec 100644
--- a/src/pages/learn.jsx
+++ b/src/pages/learn.jsx
@@ -1,4 +1,5 @@
 import { Typography } from '@mui/material'
+import Container from '@mui/material/Container'
 import { Box } from '@mui/system'
 import Head from 'next/head'
 import Image from 'next/image'
@@ -34,36 +35,36 @@ export const learn = () => {
         <li>Souther Resident Killer Whale Call Catalog</li>
         <li>Exhibits</li>
       </ul>
+      <Container>
+        <Box>
+          <Typography variant="h1">Sounds Of The Salish Sea</Typography>
+        </Box>
 
-      <Box>
-        <Typography variant="h1">Sounds Of The Salish Sea</Typography>
-      </Box>
-
-      <Box
-        width={969}
-        height={84}
-        sx={{ marginTop: '30px', marginBottom: '29px' }}
-      >
-        <Typography variant="body1">
-          Explore common sounds of the Salish Sea by selecting the animals and
-          other objects in this anoramic soundscape of the inlandwaters of
-          Washington State(USA) and British Columbia(Canada)
-        </Typography>
-      </Box>
-
-      <Box>
-        <div>
-          <Image
-            src={salishsea}
-            alt="Sounds Of The Salish Sea"
-            width={1234}
-            height={701}
-            layout="intrinsic"
-            quality={65}
-          />
-        </div>
-      </Box>
+        <Box
+          width={969}
+          height={84}
+          sx={{ marginTop: '30px', marginBottom: '29px' }}
+        >
+          <Typography variant="body1">
+            Explore common sounds of the Salish Sea by selecting the animals and
+            other objects in this anoramic soundscape of the inlandwaters of
+            Washington State(USA) and British Columbia(Canada)
+          </Typography>
+        </Box>
 
+        <Box>
+          <div>
+            <Image
+              src={salishsea}
+              alt="Sounds Of The Salish Sea"
+              width={1234}
+              height={701}
+              layout="intrinsic"
+              quality={65}
+            />
+          </div>
+        </Box>
+      </Container>
       <div className={learnStyles.orca}>
         <Image
           src={roundorca}

From 16c1aaf2f68cf227079665019846c9f0075fb4fb Mon Sep 17 00:00:00 2001
From: Saksham Singh <sakshamsingh@192.168.1.2>
Date: Wed, 23 Mar 2022 19:19:03 +0530
Subject: [PATCH 6/6] Readjusted fontSizes for heading and paragraph

---
 src/pages/learn.jsx | 8 +++++---
 src/styles/theme.ts | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/learn.jsx b/src/pages/learn.jsx
index b6df1ec..8c398e2 100644
--- a/src/pages/learn.jsx
+++ b/src/pages/learn.jsx
@@ -35,9 +35,11 @@ export const learn = () => {
         <li>Souther Resident Killer Whale Call Catalog</li>
         <li>Exhibits</li>
       </ul>
-      <Container>
+      <Container maxWidth="xl">
         <Box>
-          <Typography variant="h1">Sounds Of The Salish Sea</Typography>
+          <Typography variant="h1" sx={{ fontSize: '44px' }}>
+            Sounds Of The Salish Sea
+          </Typography>
         </Box>
 
         <Box
@@ -45,7 +47,7 @@ export const learn = () => {
           height={84}
           sx={{ marginTop: '30px', marginBottom: '29px' }}
         >
-          <Typography variant="body1">
+          <Typography variant="body1" sx={{ fontSize: '20px' }}>
             Explore common sounds of the Salish Sea by selecting the animals and
             other objects in this anoramic soundscape of the inlandwaters of
             Washington State(USA) and British Columbia(Canada)
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 56e731c..32589a4 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -31,12 +31,12 @@ const theme = createTheme({
     fontFamily: 'Montserrat',
     h1: {
       fontFamily: 'Mukta',
-      fontSize: '40px',
+
       fontWeight: '600',
     },
     body1: {
       fontFamily: 'Montserrat',
-      fontSize: '20px',
+
       fontWeight: '600',
     },
   },