From 504a8013bbede95639babac7997dddc562d98f99 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 2 Dec 2024 20:19:08 -0800
Subject: [PATCH 1/6] Styled page

---
 .../components/common/Header/header.styles.ts |  2 +-
 .../src/views/LandingPage/LandingPage.tsx     | 28 +++++++---------
 .../views/LandingPage/landingPage.styles.ts   | 32 ++++++++++++-------
 3 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/common/Header/header.styles.ts b/frontend/src/components/common/Header/header.styles.ts
index 1b5e58f0..7f5a0c44 100644
--- a/frontend/src/components/common/Header/header.styles.ts
+++ b/frontend/src/components/common/Header/header.styles.ts
@@ -21,7 +21,7 @@ export const HeaderWrapper = styled.header`
   left: 0;
   @media (min-width: ${screenSizes.tablet}) {
     justify-content: flex-start;
-    padding: 2em;
+    padding-left: 2em;
   }
   z-index: 2000;
 `;
diff --git a/frontend/src/views/LandingPage/LandingPage.tsx b/frontend/src/views/LandingPage/LandingPage.tsx
index 5bec9f77..c1eb1440 100644
--- a/frontend/src/views/LandingPage/LandingPage.tsx
+++ b/frontend/src/views/LandingPage/LandingPage.tsx
@@ -2,11 +2,11 @@
  * @summary The landing page for the application
  */
 import {
-  Wrapper,
   ButtonWrapper,
   ViewContainer,
   StyledDivider,
   StyledContent,
+  Card,
 } from './landingPage.styles';
 import { Button } from '../../components/common';
 
@@ -21,14 +21,11 @@ export default function LandingPage() {
 
   const saveFile = (e: any) => {
     const file = e.target.files[0];
-
     if (!isValidFile(file)) {
       return;
     }
-
     const fr = new FileReader();
     fr.readAsText(file);
-
     fr.onload = () => {
       const data = fr.result;
       if (data) {
@@ -47,9 +44,18 @@ export default function LandingPage() {
     // eslint-disable-next-line no-alert
     alert('New Calculation');
   };
+
   return (
     <ViewContainer>
-      <Wrapper>
+      <Card>
+        <StyledContent>
+          <h3>About the nutrient calculator</h3>
+          <p>
+            The Nutrient Management Calculator is a simple tool to help farmers maintain soil
+            nutritent levels, taking into consideration many different farm types. You can start a
+            new calculation or pick up where you left off by uploading an old .nmp file!
+          </p>
+        </StyledContent>
         <ButtonWrapper>
           <Button
             text="New Calculation"
@@ -79,17 +85,7 @@ export default function LandingPage() {
             hidden
           />
         </ButtonWrapper>
-        <StyledContent>
-          <p>
-            All information contained within the Nutrient Management Calculator is provided solely
-            &quot;as is&quot; at the user&apos;s own risk. Although every effort has been made to
-            ensure that the information contained in the Nutrient Management Calculator is accurate,
-            the Government of British Columbia assumes no legal liability or responsibility for the
-            completeness, accuracy, or usefulness of the information provided or any product
-            resulting from the use of the Nutrient Management Calculator.
-          </p>
-        </StyledContent>
-      </Wrapper>
+      </Card>
     </ViewContainer>
   );
 }
diff --git a/frontend/src/views/LandingPage/landingPage.styles.ts b/frontend/src/views/LandingPage/landingPage.styles.ts
index 8e448a9a..4a265226 100644
--- a/frontend/src/views/LandingPage/landingPage.styles.ts
+++ b/frontend/src/views/LandingPage/landingPage.styles.ts
@@ -6,7 +6,6 @@ import * as tokens from '@bcgov/design-tokens/js';
 import screenSizes from '../../constants/screenSizes';
 
 export const ViewContainer = styled.div`
-  background-color: white;
   position: absolute;
   top: 0;
   left: 0;
@@ -14,24 +13,32 @@ export const ViewContainer = styled.div`
   height: 100svh;
   justify-content: center;
   width: 100%;
+  align-items: center;
 `;
 
-export const Wrapper = styled.div`
-  height: 100%;
+export const Card = styled.div`
+  background-color: rgba(255, 255, 255, 0.8);
+  height: 500px;
+  width: 500px;
   padding-top: 0;
   justify-content: center;
-  display: flex;
-  box-content: content-box;
   align-items: center;
+  display: flex;
   flex-direction: column;
   object-fit: scale-down;
-  @media (max-height: 570px) {
-    padding: 60pt 0;
-  }
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
 `;
 
 export const ButtonWrapper = styled.div`
   padding: 5px;
+
+  button {
+    width: 400px;
+    height: 50px;
+  }
 `;
 
 export const StyledDivider = styled.div`
@@ -42,6 +49,7 @@ export const StyledDivider = styled.div`
   align-items: center;
   text-align: center;
   color: ${tokens.typographyColorPlaceholder};
+  width: 400px;
 
   &::before,
   &::after {
@@ -49,7 +57,7 @@ export const StyledDivider = styled.div`
     content: '';
     padding: 1px;
     background-color: ${tokens.typographyColorPlaceholder};
-    width: 145px;
+    width: 130px;
     margin: 5px;
   }
 
@@ -62,9 +70,9 @@ export const StyledDivider = styled.div`
 `;
 
 export const StyledContent = styled.div`
+  width: 400px;
   display: flex;
   flex-direction: column;
-  max-width: 265px;
   max-height: 180px;
   gap: 2px;
   margin-top: 60px;
@@ -81,7 +89,7 @@ export const StyledContent = styled.div`
 
   @media (min-width: ${screenSizes.tablet}) {
     top: 10vh;
-    max-width: 350px;
+    max-width: 100%;
     margin-top: 0;
 
     h2 {
@@ -94,7 +102,7 @@ export const StyledContent = styled.div`
   }
 
   @media (min-width: ${screenSizes.desktop}) {
-    max-width: 510px;
+    max-width: 100%;
     max-height: 270px;
     gap: 2px;
     text-align: center;

From 303daaae69b92923a84973d19e3c2e3bbd075d89 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 2 Dec 2024 20:37:31 -0800
Subject: [PATCH 2/6] Added Footer

---
 frontend/src/App.tsx                          |  3 +-
 .../src/components/common/Footer/Footer.tsx   |  9 +++
 .../components/common/Footer/footer.styles.ts | 76 +++++++++++++++++++
 .../src/components/common/Header/Header.tsx   | 29 ++-----
 frontend/src/components/common/index.ts       |  3 +-
 .../views/LandingPage/landingPage.styles.ts   |  2 +-
 6 files changed, 96 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/components/common/Footer/Footer.tsx
 create mode 100644 frontend/src/components/common/Footer/footer.styles.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index effce647..446ddf63 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import StyledApp from './App.styles';
-import { Header } from './components/common';
+import { Header, Footer } from './components/common';
 import ViewRouter from './routes/ViewRouter';
 
 /**
@@ -10,6 +10,7 @@ function App() {
     <StyledApp>
       <Header />
       <ViewRouter />
+      <Footer />
     </StyledApp>
   );
 }
diff --git a/frontend/src/components/common/Footer/Footer.tsx b/frontend/src/components/common/Footer/Footer.tsx
new file mode 100644
index 00000000..f02501a8
--- /dev/null
+++ b/frontend/src/components/common/Footer/Footer.tsx
@@ -0,0 +1,9 @@
+/**
+ * @summary Reusable BC Gov Footer Component
+ */
+
+import { FooterWrapper } from './footer.styles';
+
+export default function Footer() {
+  return <FooterWrapper />;
+}
diff --git a/frontend/src/components/common/Footer/footer.styles.ts b/frontend/src/components/common/Footer/footer.styles.ts
new file mode 100644
index 00000000..3be0bef9
--- /dev/null
+++ b/frontend/src/components/common/Footer/footer.styles.ts
@@ -0,0 +1,76 @@
+/**
+ * @summary Styles for reusable Header component
+ * @author Dallas Richmond
+ */
+import styled from '@emotion/styled';
+import screenSizes from '../../../constants/screenSizes';
+import typography from '../../../typography';
+
+export const FooterWrapper = styled.footer`
+  background-color: #036;
+  border-top: 2px solid #fcba19;
+  padding: 0;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 65px;
+  bottom: 0;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  @media (min-width: ${screenSizes.tablet}) {
+    justify-content: flex-start;
+    padding-left: 2em;
+  }
+  z-index: 2000;
+`;
+
+export const Heading = styled.h2`
+  ${typography.toString()}
+  color: rgb(255, 255, 255);
+  font-size: 16pt;
+  font-weight: 500;
+  min-width: 150px;
+  display: contents;
+  text-decoration: none;
+`;
+
+export const Banner = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+
+export const BannerRight = styled.div`
+  min-width: 35pt;
+  display: flex;
+  padding: 0 0.5em;
+  margin: 0;
+  @media (min-width: ${screenSizes.tablet}) {
+    margin: 0 0 0 auto;
+  }
+`;
+
+export const BannerLeft = styled.div`
+  min-width: 35pt;
+  display: flex;
+  padding: 0 0.5em;
+  margin: 0;
+`;
+
+export const Image = styled.img`
+  width: 175px;
+  top: 10px;
+  position: relative;
+  height: 100%;
+  padding-right: 10px;
+  @media (max-width: ${screenSizes.tablet}) {
+    width: 100px;
+    padding-right: 5px;
+  }
+`;
+
+export const StyledLink = styled.a`
+  text-decoration: none;
+`;
diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx
index 96535ae4..b7844f69 100644
--- a/frontend/src/components/common/Header/Header.tsx
+++ b/frontend/src/components/common/Header/Header.tsx
@@ -2,7 +2,6 @@
  * @summary Reusable BC Gov Header Component
  */
 import logo from '/logo-banner.svg';
-// import { Link } from 'react-router-dom';
 
 import { HeaderWrapper, Heading, Banner, Image, StyledLink } from './header.styles';
 
@@ -10,10 +9,12 @@ export default function Header() {
   return (
     <HeaderWrapper>
       <Banner>
-        <Image
-          src={logo}
-          alt="Go to the Home page"
-        />
+        <StyledLink href="/">
+          <Image
+            src={logo}
+            alt="Go to the Home page"
+          />
+        </StyledLink>
         <StyledLink href="/">
           <Heading>Nutrient Management Calculator</Heading>
         </StyledLink>
@@ -21,21 +22,3 @@ export default function Header() {
     </HeaderWrapper>
   );
 }
-// Will use the link when home page is created.
-// export default function Header() {
-//     return (
-//       <HeaderWrapper>
-//         <Banner>
-//           <Link to="/">
-//             <Image
-//               src={logo}
-//               alt="Go to the Home page"
-//             />
-//           </Link>
-//           <StyledLink href="/">
-//             <Heading>Nutrient Management Calculator</Heading>
-//           </StyledLink>
-//         </Banner>
-//       </HeaderWrapper>
-//     );
-//   }
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
index 7f76118e..bec1b29f 100644
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -1,4 +1,5 @@
 import Header from './Header/Header';
 import { Button } from './Button/Button';
+import Footer from './Footer/Footer';
 
-export { Header, Button };
+export { Header, Button, Footer };
diff --git a/frontend/src/views/LandingPage/landingPage.styles.ts b/frontend/src/views/LandingPage/landingPage.styles.ts
index 4a265226..294e7825 100644
--- a/frontend/src/views/LandingPage/landingPage.styles.ts
+++ b/frontend/src/views/LandingPage/landingPage.styles.ts
@@ -27,7 +27,7 @@ export const Card = styled.div`
   flex-direction: column;
   object-fit: scale-down;
   border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   padding: 20px;
   text-align: center;
 `;

From d188276388a638cb2930db8e624bd8980c02420d Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Tue, 3 Dec 2024 16:06:33 -0800
Subject: [PATCH 3/6] Updated styling

---
 .../src/views/LandingPage/LandingPage.tsx     | 19 ++++++++++---------
 .../views/LandingPage/landingPage.styles.ts   |  6 ------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/LandingPage/LandingPage.tsx b/frontend/src/views/LandingPage/LandingPage.tsx
index c1eb1440..193989bd 100644
--- a/frontend/src/views/LandingPage/LandingPage.tsx
+++ b/frontend/src/views/LandingPage/LandingPage.tsx
@@ -49,19 +49,20 @@ export default function LandingPage() {
     <ViewContainer>
       <Card>
         <StyledContent>
-          <h3>About the nutrient calculator</h3>
+          <h2>Nutrient Management Calculator</h2>
           <p>
-            The Nutrient Management Calculator is a simple tool to help farmers maintain soil
-            nutritent levels, taking into consideration many different farm types. You can start a
-            new calculation or pick up where you left off by uploading an old .nmp file!
+            The Nutrient Management Calculator provides a starting point for the efficient use of
+            fertilizer and manure on farms. This tool assists in you choosing the right rate and
+            nutrient source for your crops. You can start a new calculation or pick up where you
+            left off by uploading an existing .nmp file.
           </p>
         </StyledContent>
         <ButtonWrapper>
           <Button
-            text="New Calculation"
+            text="Start a new calculation"
             size="lg"
             handleClick={newCalcHandler}
-            aria-label="New Calculation"
+            aria-label="Start a new calculation"
             variant="primary"
             disabled={false}
           />
@@ -70,9 +71,9 @@ export default function LandingPage() {
         <ButtonWrapper>
           <Button
             size="lg"
-            text="Load Existing File"
+            text="Upload an existing .nmp file"
             handleClick={handleUpload}
-            aria-label="Upload File"
+            aria-label="Upload an existing .nmp file"
             variant="primary"
             disabled={false}
           />
@@ -81,7 +82,7 @@ export default function LandingPage() {
             type="file"
             accept=".nmp, application/json"
             onChange={saveFile}
-            aria-label="Upload File"
+            aria-label="Upload an existing .nmp file"
             hidden
           />
         </ButtonWrapper>
diff --git a/frontend/src/views/LandingPage/landingPage.styles.ts b/frontend/src/views/LandingPage/landingPage.styles.ts
index 294e7825..0d8f21ad 100644
--- a/frontend/src/views/LandingPage/landingPage.styles.ts
+++ b/frontend/src/views/LandingPage/landingPage.styles.ts
@@ -79,11 +79,9 @@ export const StyledContent = styled.div`
   text-align: center;
 
   h2 {
-    font: ${tokens.typographyBoldH6};
   }
 
   p {
-    font: ${tokens.typographyRegularSmallBody};
     color: ${tokens.typographyColorSecondary};
   }
 
@@ -93,11 +91,9 @@ export const StyledContent = styled.div`
     margin-top: 0;
 
     h2 {
-      font: ${tokens.typographyBoldH5};
     }
 
     p {
-      font: ${tokens.typographyRegularBody};
     }
   }
 
@@ -108,11 +104,9 @@ export const StyledContent = styled.div`
     text-align: center;
 
     h2 {
-      font: ${tokens.typographyBoldH2};
     }
 
     p {
-      font: ${tokens.typographyRegularLargeBody};
       color: ${tokens.typographyColorSecondary};
     }
   }

From bb2c645160b27358ed288404c7eeb277fcc72567 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Tue, 3 Dec 2024 16:13:23 -0800
Subject: [PATCH 4/6] Added sustainment dev to codeowners

---
 .github/codeowners | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/.github/codeowners b/.github/codeowners
index a1536181..fcbc7631 100644
--- a/.github/codeowners
+++ b/.github/codeowners
@@ -1,7 +1,35 @@
-# Matched against repo root (asterisk)
-# *                         @mishraomp @DerekRoberts
 
-# Matched against directories
-# /.github/workflows/       @mishraomp @DerekRoberts
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+* @lunamoonmoon @fergmac @PaulGarewal @raarielgrace @dallascrichmond  
 
-# See https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
+# Order is important; the last matching pattern takes the most
+# precedence. When someone opens a pull request that only
+# modifies JS files, only @js-owner and not the global
+# owner(s) will be requested for a review.
+# *.js    @js-owner
+
+# You can also use email addresses if you prefer. They'll be
+# used to look up users just like we do for commit author
+# emails.
+# *.go docs@example.com
+
+# In this example, @doctocat owns any files in the build/logs
+# directory at the root of the repository and any of its
+# subdirectories.
+# /build/logs/ @doctocat
+
+# The `docs/*` pattern will match files like
+# `docs/getting-started.md` but not further nested files like
+# `docs/build-app/troubleshooting.md`.
+# docs/*  docs@example.com
+
+# In this example, @octocat owns any file in an apps directory
+# anywhere in your repository.
+# apps/ @octocat
+
+# In this example, @doctocat owns any file in the `/docs`
+# directory in the root of your repository.
+# /docs/ @doctocat

From 1b72fd254df1ab3b9f8f0bd865ac6c13c88450dd Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Tue, 3 Dec 2024 16:21:31 -0800
Subject: [PATCH 5/6] Cleaned up unused styling in landingPage.styles

---
 frontend/src/views/LandingPage/landingPage.styles.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/frontend/src/views/LandingPage/landingPage.styles.ts b/frontend/src/views/LandingPage/landingPage.styles.ts
index 0d8f21ad..569fa941 100644
--- a/frontend/src/views/LandingPage/landingPage.styles.ts
+++ b/frontend/src/views/LandingPage/landingPage.styles.ts
@@ -78,9 +78,6 @@ export const StyledContent = styled.div`
   margin-top: 60px;
   text-align: center;
 
-  h2 {
-  }
-
   p {
     color: ${tokens.typographyColorSecondary};
   }
@@ -89,12 +86,6 @@ export const StyledContent = styled.div`
     top: 10vh;
     max-width: 100%;
     margin-top: 0;
-
-    h2 {
-    }
-
-    p {
-    }
   }
 
   @media (min-width: ${screenSizes.desktop}) {
@@ -103,9 +94,6 @@ export const StyledContent = styled.div`
     gap: 2px;
     text-align: center;
 
-    h2 {
-    }
-
     p {
       color: ${tokens.typographyColorSecondary};
     }

From b5e37a1ea3509d4f1499a036b6e4eebd6482c9ef Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Tue, 3 Dec 2024 16:43:27 -0800
Subject: [PATCH 6/6] Updated h2 to h1

---
 frontend/src/views/LandingPage/LandingPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/LandingPage/LandingPage.tsx b/frontend/src/views/LandingPage/LandingPage.tsx
index 193989bd..fb76b766 100644
--- a/frontend/src/views/LandingPage/LandingPage.tsx
+++ b/frontend/src/views/LandingPage/LandingPage.tsx
@@ -49,7 +49,7 @@ export default function LandingPage() {
     <ViewContainer>
       <Card>
         <StyledContent>
-          <h2>Nutrient Management Calculator</h2>
+          <h1>Nutrient Management Calculator</h1>
           <p>
             The Nutrient Management Calculator provides a starting point for the efficient use of
             fertilizer and manure on farms. This tool assists in you choosing the right rate and