From ddf2282260a0703f77f669322abc7d81c7e139ea Mon Sep 17 00:00:00 2001
From: josuezx98 <joosuueerodriguez@gmail.com>
Date: Wed, 7 Oct 2020 22:25:34 -0300
Subject: [PATCH 1/3] change footer style

---
 components/DiscordConnect.tsx |  8 ++--
 components/Footer.tsx         | 79 ++++++++++++++++++-----------------
 pages/index.tsx               |  3 --
 3 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/components/DiscordConnect.tsx b/components/DiscordConnect.tsx
index 680f1a0..64b0ca4 100644
--- a/components/DiscordConnect.tsx
+++ b/components/DiscordConnect.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import { Flex, Image, SimpleGrid, Button, Link } from '@chakra-ui/core';
+import { Flex, Button, Link } from '@chakra-ui/core';
 import { Text } from '../components';
 
 const DiscordConnect = () => (
   <>
     <Flex
       w="100%"
-      h="50vh"
-      alignItems="center"
+      h="17rem"
+      alignItems="flex-end"
       justifyContent="center"
       bg="#f26840"
-      mt="10vh"
+      mt="3rem"
     >
       <Flex
         direction="column"
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 0d1d1ea..460afea 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,50 +1,53 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Image, Box, Link, useColorMode, Button, Flex } from '@chakra-ui/core';
-
+import DiscordConnect from '../components/DiscordConnect';
 export const Footer = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
   return (
-    <Flex
-      w="100%"
-      px="3.1%"
-      py="2.5%"
-      bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
-      flexDirection="row"
-      alignItems="center"
-      justifyContent="space-between"
-      as="footer"
-    >
-      <Button
-        color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
-        onClick={toggleColorMode}
-        variant="outlined"
-      >
-        Theme
-      </Button>
-      <Box
-        d="flex"
-        w={['50%', '36%', '22%']}
+    <>
+      <DiscordConnect />
+      <Flex
+        w="100%"
+        px="3.1%"
+        py="2.5%"
+        bg="#f26840"
+        flexDirection="row"
+        alignItems="center"
         justifyContent="space-between"
-        mr="5"
+        as="footer"
       >
-        <Link
-          w="9%"
-          href="https://www.youtube.com/channel/UCZiR1u5RtSYYt8qcenxr-Uw"
+        <Button
+          color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
+          onClick={toggleColorMode}
+          variant="outlined"
+        >
+          Theme
+        </Button>
+        <Box
+          d="flex"
+          w={['50%', '36%', '22%']}
+          justifyContent="space-between"
+          mr="5"
         >
-          <Image src="youtube.svg" />
-        </Link>
-        <Link w="7%" href="https://twitter.com/coderhood_dev">
-          <Image src="twitter.svg" />
-        </Link>
-        <Link w="7%" href="https://www.instagram.com/coderhood.dev/">
-          <Image src="instagram.svg" />
-        </Link>
-        <Link w="7%" href="https://www.linkedin.com/company/coderhood/">
-          <Image src="linkedin.svg" />
-        </Link>
-      </Box>
-    </Flex>
+          <Link
+            w="9%"
+            href="https://www.youtube.com/channel/UCZiR1u5RtSYYt8qcenxr-Uw"
+          >
+            <Image src="youtube.svg" />
+          </Link>
+          <Link w="7%" href="https://twitter.com/coderhood_dev">
+            <Image src="twitter.svg" />
+          </Link>
+          <Link w="7%" href="https://www.instagram.com/coderhood.dev/">
+            <Image src="instagram.svg" />
+          </Link>
+          <Link w="7%" href="https://www.linkedin.com/company/coderhood/">
+            <Image src="linkedin.svg" />
+          </Link>
+        </Box>
+      </Flex>
+    </>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index 5772e5b..215bd1f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -11,7 +11,6 @@ import {
 import { GetRoadmapsResponse } from '../api/roadmaps';
 import { Text } from '../components';
 import CardHowDoesItWork from '../components/CardHowDoesItWork';
-import DiscordConnect from '../components/DiscordConnect';
 
 interface Props {
   roadmaps: GetRoadmapsResponse;
@@ -205,8 +204,6 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
           </Flex>
         </Flex>
       </Flex>
-
-      <DiscordConnect />
     </>
   );
 };

From 82cab220c8e4451f362a50d64f31688f24d2c0df Mon Sep 17 00:00:00 2001
From: josuezx98 <joosuueerodriguez@gmail.com>
Date: Wed, 7 Oct 2020 22:45:42 -0300
Subject: [PATCH 2/3] fix style

---
 components/DiscordConnect.tsx |  1 -
 components/Footer.tsx         | 11 +++++++++++
 pages/index.tsx               |  2 +-
 public/waveup.svg             |  1 +
 4 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 public/waveup.svg

diff --git a/components/DiscordConnect.tsx b/components/DiscordConnect.tsx
index 64b0ca4..871725f 100644
--- a/components/DiscordConnect.tsx
+++ b/components/DiscordConnect.tsx
@@ -10,7 +10,6 @@ const DiscordConnect = () => (
       alignItems="flex-end"
       justifyContent="center"
       bg="#f26840"
-      mt="3rem"
     >
       <Flex
         direction="column"
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 460afea..23d6856 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -7,6 +7,17 @@ export const Footer = () => {
 
   return (
     <>
+      <Image
+        src="../waveup.svg"
+        alt="wave up"
+        w="100%"
+        mb={['-0.8px', '-1px', '-1px', '-1px', '-1px']}
+        style={{
+          transform: 'rotate(-180deg)',
+        }}
+        bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
+        h="7rem"
+      />
       <DiscordConnect />
       <Flex
         w="100%"
diff --git a/pages/index.tsx b/pages/index.tsx
index 215bd1f..6b8846d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -116,7 +116,7 @@ const Home: React.FC<Props> = ({ roadmaps }) => {
         />
       ))}
 
-      <Flex w="100%" h="100vh" alignItems="center">
+      <Flex w="100%" h="100vh" alignItems="center" mb="5rem">
         <Flex w="100%" h="60vh" alignItems="center" justifyContent="center">
           <Flex
             direction="column"
diff --git a/public/waveup.svg b/public/waveup.svg
new file mode 100644
index 0000000..e32bd9b
--- /dev/null
+++ b/public/waveup.svg
@@ -0,0 +1 @@
+<svg  data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" ><path  d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill" fill="#F26840" fill-opacity="1"></path></svg>
\ No newline at end of file

From 28674f8c5205a328483bbf5773377cce7caf6f75 Mon Sep 17 00:00:00 2001
From: josuezx98 <joosuueerodriguez@gmail.com>
Date: Thu, 8 Oct 2020 15:39:10 -0300
Subject: [PATCH 3/3] fix styles

---
 components/{DiscordConnect.tsx => DiscordInvite.tsx} |  4 ++--
 components/Footer.tsx                                | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)
 rename components/{DiscordConnect.tsx => DiscordInvite.tsx} (96%)

diff --git a/components/DiscordConnect.tsx b/components/DiscordInvite.tsx
similarity index 96%
rename from components/DiscordConnect.tsx
rename to components/DiscordInvite.tsx
index 871725f..eab6fcd 100644
--- a/components/DiscordConnect.tsx
+++ b/components/DiscordInvite.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Flex, Button, Link } from '@chakra-ui/core';
 import { Text } from '../components';
 
-const DiscordConnect = () => (
+const DiscordInvite = () => (
   <>
     <Flex
       w="100%"
@@ -61,4 +61,4 @@ const DiscordConnect = () => (
   </>
 );
 
-export default DiscordConnect;
+export default DiscordInvite;
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 23d6856..b54bac6 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Image, Box, Link, useColorMode, Button, Flex } from '@chakra-ui/core';
-import DiscordConnect from '../components/DiscordConnect';
+import DiscordInvite from '../components/DiscordInvite';
 export const Footer = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
@@ -12,13 +12,11 @@ export const Footer = () => {
         alt="wave up"
         w="100%"
         mb={['-0.8px', '-1px', '-1px', '-1px', '-1px']}
-        style={{
-          transform: 'rotate(-180deg)',
-        }}
+        transform="rotate(-180deg)"
         bg={colorMode === 'light' ? 'gray.300' : 'gray.800'}
         h="7rem"
       />
-      <DiscordConnect />
+      <DiscordInvite />
       <Flex
         w="100%"
         px="3.1%"
@@ -30,7 +28,7 @@ export const Footer = () => {
         as="footer"
       >
         <Button
-          color={colorMode === 'light' ? 'gray.800' : 'gray.300'}
+          color={colorMode === 'light' ? 'gray.300' : 'gray.800'}
           onClick={toggleColorMode}
           variant="outlined"
         >