From 2cdeb8ae898f121e072bb9cacd2f4b9f95ca62a9 Mon Sep 17 00:00:00 2001
From: Akira <akira.takaki@mail.utoronto.ca>
Date: Wed, 6 Jan 2021 16:59:25 -0500
Subject: [PATCH 1/2] Created footer

---
 frontend/components/Footer/Footer.module.css |  4 +-
 frontend/components/Footer/index.tsx         | 53 ++++++++++++++++++--
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Footer/Footer.module.css b/frontend/components/Footer/Footer.module.css
index 7ae96f2..7b889b3 100644
--- a/frontend/components/Footer/Footer.module.css
+++ b/frontend/components/Footer/Footer.module.css
@@ -1,7 +1,9 @@
 .footer {
-  width: 100%;
+  width: 101.23%;
   height: 100px;
   border-top: 1px solid #eaeaea;
+  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.25);
+  background-color: #343A40;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/frontend/components/Footer/index.tsx b/frontend/components/Footer/index.tsx
index 1263b9b..20fb401 100644
--- a/frontend/components/Footer/index.tsx
+++ b/frontend/components/Footer/index.tsx
@@ -1,17 +1,62 @@
+import {
+  Box,
+  Button,
+  Center,
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  IconButton,
+  Spacer,
+  Text,
+  useColorMode,
+  useColorModeValue,
+} from "@chakra-ui/react";
+
 import React from "react";
 
 import styles from "./Footer.module.css";
 
 export const Footer = (): JSX.Element => {
   return (
-    <footer className={styles.footer}>
-      <a
+    <footer className={styles.footer} bg="#343A40">
+      <Center mx="15">
+        <Grid templateColumns="repeat(8, 1fr)" gap={14}>
+          <GridItem colSpan={2}>
+            <Text align="center" m="4">
+              <Heading size="sm" color="gray.500">© 2020 White Van, Inc.</Heading>
+              <Text fontSize="xs" color="white">made with ❤ 
+              by pizza van</Text>
+            </Text>
+          </GridItem>
+          <Heading align="center"pt="6" fontSize="sm" color="blue.600" >
+            Terms
+          </Heading>
+          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
+            Privacy
+          </Heading>
+          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
+            Help
+          </Heading>
+          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
+            API
+          </Heading>
+          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
+            Status
+          </Heading>
+          <Heading align="center" pt="6" fontSize="sm" color="blue.600" >
+            Blog
+          </Heading>
+        </Grid>
+      </Center>
+
+      {/* <a
         href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
         target="_blank"
         rel="noopener noreferrer"
       >
-        Hello{" "}
-      </a>
+        
+      </a> */}
     </footer>
   );
 };

From bf6c224cadf793f25bff867f936293911fc42ae9 Mon Sep 17 00:00:00 2001
From: Jarrod Servilla <jarrod.servilla@mail.utoronto.ca>
Date: Thu, 7 Jan 2021 15:51:41 -0500
Subject: [PATCH 2/2] added responsiveness to footer + tests

---
 frontend/components/Footer/Footer.module.css |  2 +-
 frontend/components/Footer/index.tsx         | 86 ++++++++++----------
 frontend/styles/globals.css                  |  2 +
 frontend/testing/components/Footer.test.tsx  |  9 +-
 frontend/testing/helpers.tsx                 | 21 +++++
 5 files changed, 73 insertions(+), 47 deletions(-)

diff --git a/frontend/components/Footer/Footer.module.css b/frontend/components/Footer/Footer.module.css
index 7b889b3..9663993 100644
--- a/frontend/components/Footer/Footer.module.css
+++ b/frontend/components/Footer/Footer.module.css
@@ -3,7 +3,7 @@
   height: 100px;
   border-top: 1px solid #eaeaea;
   box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.25);
-  background-color: #343A40;
+  background-color: #343a40;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/frontend/components/Footer/index.tsx b/frontend/components/Footer/index.tsx
index 20fb401..13ea1d4 100644
--- a/frontend/components/Footer/index.tsx
+++ b/frontend/components/Footer/index.tsx
@@ -1,62 +1,60 @@
 import {
-  Box,
-  Button,
   Center,
   Flex,
-  Grid,
   GridItem,
   Heading,
-  IconButton,
-  Spacer,
+  HStack,
+  SimpleGrid,
   Text,
-  useColorMode,
-  useColorModeValue,
+  useBreakpointValue,
 } from "@chakra-ui/react";
-
 import React from "react";
 
 import styles from "./Footer.module.css";
 
+export const footerLinks = [
+  "Terms",
+  "Privacy",
+  "Help",
+  "API",
+  "Status",
+  "Blog",
+];
+
 export const Footer = (): JSX.Element => {
+  const verticalOffset = useBreakpointValue({ sm: "", md: "6" });
+  const spacing = useBreakpointValue({ xs: 6, sm: 14 });
+
   return (
-    <footer className={styles.footer} bg="#343A40">
-      <Center mx="15">
-        <Grid templateColumns="repeat(8, 1fr)" gap={14}>
-          <GridItem colSpan={2}>
-            <Text align="center" m="4">
-              <Heading size="sm" color="gray.500">© 2020 White Van, Inc.</Heading>
-              <Text fontSize="xs" color="white">made with ❤ 
-              by pizza van</Text>
+    <Flex className={styles.footer}>
+      <Center>
+        <SimpleGrid columns={[1, 1, 2]}>
+          <GridItem align="center" m="4">
+            <Heading size="sm" color="gray.500">
+              © 2020 White Van, Inc.
+            </Heading>
+            <Text fontSize="xs" color="white">
+              made with ❤ by pizza van
             </Text>
           </GridItem>
-          <Heading align="center"pt="6" fontSize="sm" color="blue.600" >
-            Terms
-          </Heading>
-          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
-            Privacy
-          </Heading>
-          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
-            Help
-          </Heading>
-          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
-            API
-          </Heading>
-          <Heading align="center" pt="6" fontSize="sm" color="blue.600">
-            Status
-          </Heading>
-          <Heading align="center" pt="6" fontSize="sm" color="blue.600" >
-            Blog
-          </Heading>
-        </Grid>
+          <GridItem>
+            <HStack pt={verticalOffset} spacing={spacing}>
+              {footerLinks.map((link, index) => {
+                return (
+                  <Heading
+                    key={index}
+                    align="center"
+                    fontSize="sm"
+                    color="blue.600"
+                  >
+                    {link}
+                  </Heading>
+                );
+              })}
+            </HStack>
+          </GridItem>
+        </SimpleGrid>
       </Center>
-
-      {/* <a
-        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        
-      </a> */}
-    </footer>
+    </Flex>
   );
 };
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index 259eae1..eab45f4 100644
--- a/frontend/styles/globals.css
+++ b/frontend/styles/globals.css
@@ -16,6 +16,8 @@ a {
 }
 
 .container {
+  overflow-x: hidden;
+  overflow-y: hidden;
   min-height: 100vh;
   padding: 0 0.5rem;
   display: flex;
diff --git a/frontend/testing/components/Footer.test.tsx b/frontend/testing/components/Footer.test.tsx
index da6e070..87cdad0 100644
--- a/frontend/testing/components/Footer.test.tsx
+++ b/frontend/testing/components/Footer.test.tsx
@@ -2,7 +2,10 @@ import { render } from "@testing-library/react";
 import { axe, toHaveNoViolations } from "jest-axe";
 import React from "react";
 
-import { Footer } from "../../components/Footer";
+import { Footer, footerLinks } from "../../components/Footer";
+import { setupTests } from "../helpers";
+
+setupTests();
 
 describe("Footer", () => {
   expect.extend(toHaveNoViolations);
@@ -15,6 +18,8 @@ describe("Footer", () => {
 
   it("Basic render functionality", () => {
     const { queryByText } = render(<Footer />);
-    expect(queryByText("Hello")).toBeInTheDocument();
+    footerLinks.forEach((link) => {
+      expect(queryByText(link)).toBeInTheDocument();
+    });
   });
 });
diff --git a/frontend/testing/helpers.tsx b/frontend/testing/helpers.tsx
index cbc8577..d3d58e0 100644
--- a/frontend/testing/helpers.tsx
+++ b/frontend/testing/helpers.tsx
@@ -55,3 +55,24 @@ export const wrapInTheme = (component: React.ReactNode): React.ReactNode => {
 export const renderWrapped = (component: React.ReactNode): RenderResult => {
   return render(wrapInRouter(wrapInTheme(wrapInIntl(wrapInStore(component)))));
 };
+
+function defineMatchMedia(): void {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+}
+
+export function setupTests(): void {
+  defineMatchMedia();
+}