Merge pull request #32 from 90lucasgabriel/feature/WJ-12

WJ-12 - Create Footer component

src/containers/Footer/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { ReactComponent as Logo } from 'assets/logo.svg';
+import { Color } from 'shared/enums';
+import RouteEnum from 'routes/enums/Route';
+
+import { Wrapper } from 'components/Layout';
+import { Container, LogoContainer, LinksContainer } from './styles';
+
+const Footer: React.FC = () => {
+  return (
+    <Wrapper theme="primary">
+      <Container>
+        <LinksContainer>
+          <a href="https://github.com/90lucasgabriel">
+            Desenvolvido por Lucas Gabriel
+          </a>
+          <a href="/">Proposta do projeto</a>
+          <a href="https://www.figma.com/file/um4dcEJCOlEvB6kCe9KCOD/Cinejump">
+            Protótipo no Figma
+          </a>
+          <a href="/">Apresentação ao Comitê</a>
+          <a href="https://github.com/90lucasgabriel/cinejump-web/wiki">
+            Documentação
+          </a>
+        </LinksContainer>
+
+        <LogoContainer>
+          <Link to={RouteEnum.BASE}>
+            <Logo fill={Color.Fill} />
+          </Link>
+        </LogoContainer>
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default Footer;

src/containers/Footer/styles.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+import { Color, Size } from 'shared/enums';
+import { Container as DefaultContainer } from 'components/Layout';
+
+export const Container = styled(DefaultContainer)`
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  padding: ${Size.Default};
+`;
+
+export const LogoContainer = styled.div`
+  display: flex;
+  flex: 1 1 440px;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: 915px) {
+    margin-top: ${Size.Large};
+  }
+`;
+
+export const LinksContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 440px;
+  font-size: ${Size.Small};
+
+  a {
+    padding: ${Size.Smallest};
+    color: ${Color.Fill};
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 915px) {
+    text-align: center;
+  }
+`;

src/screens/Home/index.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 
 import { ColumnLayout } from 'components/Layout';
 import Header from 'containers/Header';
+import Footer from 'containers/Footer';
 import { HeaderBackground } from './styles';
 
 const Home: React.FC = () => {
   return (
     <ColumnLayout>
       <Header />
+      <div style={{ flex: 1 }}></div>
+      <Footer />
       <HeaderBackground />
     </ColumnLayout>
   );

src/screens/Signup/index.tsx

@@ -102,7 +102,7 @@ const Signup: React.FC = () => {
           variant="outlined"
           onClick={() => history.push(Route.LOGIN)}
         >
-          ENTRAR
+          LOGIN
         </Button>
       </LoginContainer>
     </RowLayout>

src/shared/styles/global.ts

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
-import { Color } from 'shared/enums';
+import { Color, Size } from 'shared/enums';
 
 export default createGlobalStyle`
   * {
@@ -23,16 +23,25 @@ export default createGlobalStyle`
   body {
     background: ${Color.Fill};
     color: ${Color.Text};
+    font-size: ${Size.Default};
     -webkit-font-smoothing: antialiased;
   }
   body, input, button {
     font-family: 'Ubuntu', -apple-system, system-ui, sans-serif;
-    font-weight: 400;
+    font-weight: 100;
   }
   h1, h2, h3, h4, h5, h6, strong {
     font-weight: 400,
   }
   button {
     cursor: pointer;
   }
+
+  input,
+  textarea,
+  button,
+  select,
+  a {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+  }
 `;