feat: [NMP-78] Landing Page Styling (#84)

.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 [email protected]
+
+# 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/*  [email protected]
+
+# 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

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>
   );
 }

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 />;
+}

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;
+`;

frontend/src/components/common/Header/Header.tsx

@@ -2,40 +2,23 @@
  * @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';
 
 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>
       </Banner>
     </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>
-//     );
-//   }

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;
 `;

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 };

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,15 +44,25 @@ export default function LandingPage() {
     // eslint-disable-next-line no-alert
     alert('New Calculation');
   };
+
   return (
     <ViewContainer>
-      <Wrapper>
+      <Card>
+        <StyledContent>
+          <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
+            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}
           />
@@ -64,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}
           />
@@ -75,21 +82,11 @@ 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>
-        <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>
   );
 }