FreeCodeCampBA · nhsz · Jun 3, 2019 · May 17, 2019 · May 17, 2019 · Jun 3, 2019
diff --git a/client/src/components/App/About/index.js b/client/src/components/App/About/index.js
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import OuterLink from '../../shared/OuterLink'
+
 import { Container, Content } from './styled'
 
 const About = () => (
@@ -19,9 +21,21 @@ const About = () => (
 
       <p>
         Si querés saber más, te recomendamos leer nuestra{' '}
-        <a href="https://github.com/FreeCodeCampBA/quick-start" target="_blank" rel="noopener noreferrer">
+        <OuterLink href="https://github.com/FreeCodeCampBA/quick-start">
           guía rápida para empezar
-        </a>
+        </OuterLink>
+        .
+      </p>
+
+      <p>
+        Te recordamos que nos regimos en todos nuestros espacios por nuestro{' '}
+        <OuterLink href="https://github.com/FreeCodeCampBA/codigo">
+          código de conducta
+        </OuterLink>
+        . Si notas que alguien lo está incumpliendo, no dudes en contactar con cualquiera de {' '}
+        <OuterLink href="https://github.com/FreeCodeCampBA/quick-start#organizadores">
+          los organizadores
+        </OuterLink>
         .
       </p>
 

diff --git a/client/src/components/App/Events/index.js b/client/src/components/App/Events/index.js
@@ -3,6 +3,7 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/es'
 
 import { Container, Background, BackgroundFooter, Content, EventBox } from './styled'
+import OuterLink from '../../shared/OuterLink'
 
 dayjs.locale('es')
 
@@ -73,9 +74,9 @@ const Events = () => {
                 </p>
               </div>
 
-              <a href={nextEvents[0].link} target="_blank" rel="noopener noreferrer">
+              <OuterLink href={nextEvents[0].link}>
                 Inscribite
-              </a>
+              </OuterLink>
             </EventBox.Left>
             <EventBox.Right>
               <iframe

diff --git a/client/src/components/App/Footer/components/IconLink/index.js b/client/src/components/App/Footer/components/IconLink/index.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import OuterLink from '../../../../shared/OuterLink'
+import { func, string } from 'prop-types';
+
+const IconLink = ({ Icon, children, className, href }) => (
+  <li className={className}>
+    <Icon className="icon" />
+    <OuterLink href={href}>
+      {children}
+    </OuterLink>
+  </li>
+)
+
+IconLink.propTypes = {
+  Icon: func.isRequired,
+  className: string.isRequired,
+  href: string.isRequired
+}
+
+export default IconLink
diff --git a/client/src/components/App/Footer/index.js b/client/src/components/App/Footer/index.js
@@ -13,8 +13,9 @@ import {
   MapIcon,
   UsersIcon,
   MicrophoneIcon,
-  MailIcon,
+  MailIcon
 } from '../../shared/Icons'
+import IconLink from './components/IconLink'
 
 const Footer = () => (
   <Container>
@@ -38,89 +39,97 @@ const Footer = () => (
         <h3>Social</h3>
 
         <ul className="footer__social-networks">
-          <li className="footer__social-network">
-            <FacebookIcon className="icon" />
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://www.facebook.com/groups/free.code.camp.buenos.aires"
-            >
-              Seguinos en Facebook
-            </a>
-          </li>
-          <li className="footer__social-network">
-            <TwitterIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/freecodecampba?lang=en">
-              Seguinos en Twitter
-            </a>
-          </li>
-          <li className="footer__social-network">
-            <MeetupIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://www.meetup.com/es/FreeCodeCampBA">
-              Seguinos en Meetup
-            </a>
-          </li>
-          <li className="footer__social-network">
-            <SlackIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://freecodecampba.org/chat">
-              Unite al chat de Slack
-            </a>
-          </li>
-          <li className="footer__social-network">
-            <GitHubIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://github.com/FreeCodeCampBA">
-              Seguinos en GitHub
-            </a>
-          </li>
-          <li className="footer__social-network">
-            <InstagramIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/freecodecampba">
-              Seguinos en Instagram
-            </a>
-          </li>
-          <li className="footer__social-network">
-            <TwitchIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://www.twitch.tv/freecodecampba">
-              Seguinos en Twitch
-            </a>
-          </li>
+          <IconLink
+            Icon={FacebookIcon}
+            className="footer__social-network"
+            href="https://www.facebook.com/groups/free.code.camp.buenos.aires"
+          >
+            Seguinos en Facebook
+          </IconLink>
+          <IconLink
+            Icon={TwitterIcon}
+            className="footer__social-network"
+            href="https://twitter.com/freecodecampba?lang=en"
+          >
+            Seguinos en Twitter
+          </IconLink>
+          <IconLink
+            Icon={MeetupIcon}
+            className="footer__social-network"
+            href="https://www.meetup.com/es/FreeCodeCampBA"
+          >
+            Seguinos en Meetup
+          </IconLink>
+          <IconLink
+            Icon={SlackIcon}
+            className="footer__social-network"
+            href="https://freecodecampba.org/chat"
+          >
+            Unite al chat de Slack
+          </IconLink>
+          <IconLink
+            Icon={GitHubIcon}
+            className="footer__social-network"
+            href="https://github.com/FreeCodeCampBA"
+          >
+            Seguinos en GitHub
+          </IconLink>
+          <IconLink
+            Icon={InstagramIcon}
+            className="footer__social-network"
+            href="https://www.instagram.com/freecodecampba"
+          >
+            Seguinos en Instagram
+          </IconLink>
+          <IconLink
+            Icon={TwitchIcon}
+            className="footer__social-network"
+            href="https://www.twitch.tv/freecodecampba"
+          >
+            Seguinos en Twitch
+          </IconLink>
         </ul>
       </div>
 
       <div className="footer__links">
         <h3>Links</h3>
 
         <ul className="footer__social-links">
-          <li className="footer__social-link">
-            <QuestionsIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://github.com/FreeCodeCampBA/faq">
-              Preguntas Frecuentes
-            </a>
-          </li>
-          <li className="footer__social-link">
-            <MapIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://github.com/FreeCodeCampBA/quick-start">
-              Guia Inicial del Grupo
-            </a>
-          </li>
-          <li className="footer__social-link">
-            <UsersIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://github.com/FreeCodeCampBA/codigo">
-              Código de Conducta
-            </a>
-          </li>
-          <li className="footer__social-link">
-            <MicrophoneIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="https://github.com/FreeCodeCampBA/charlas">
-              Charlas
-            </a>
-          </li>
-          <li className="footer__social-link">
-            <MailIcon className="icon" />
-            <a target="_blank" rel="noopener noreferrer" href="mailto:freecodecampba@gmail.com">
-              Contacto
-            </a>
-          </li>
+          <IconLink
+            Icon={QuestionsIcon}
+            className="footer__social-link"
+            href="https://github.com/FreeCodeCampBA/faq"
+          >
+            Preguntas Frecuentes
+          </IconLink>
+          <IconLink
+            Icon={MapIcon}
+            className="footer__social-link"
+            href="https://github.com/FreeCodeCampBA/quick-start"
+          >
+            Guia Inicial del Grupo
+          </IconLink>
+          <IconLink
+            Icon={UsersIcon}
+            className="footer__social-link"
+            href="https://github.com/FreeCodeCampBA/codigo"
+          >
+            Código de Conducta
+          </IconLink>
+          <IconLink
+            Icon={MicrophoneIcon}
+            className="footer__social-link"
+            href="https://github.com/FreeCodeCampBA/charlas"
+          >
+            Charlas
+          </IconLink>
+          <IconLink
+            Icon={MailIcon}
+            className="footer__social-link"
+            href="mailto:freecodecampba@gmail.com"
+          >
+            Contacto
+          </IconLink>
         </ul>
       </div>
     </Content>

diff --git a/client/src/components/App/Home/index.js b/client/src/components/App/Home/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Container, Background, Content } from './styled'
+import OuterLink from '../../shared/OuterLink'
 
 const Home = () => (
   <Container id="home">
@@ -9,13 +10,13 @@ const Home = () => (
     <Content>
       <h3>
         Somos la comunidad de{' '}
-        <a href="https://www.freecodecamp.org" target="_blank" rel="noopener noreferrer">
+        <OuterLink href="https://www.freecodecamp.org">
           freeCodeCamp
-        </a>{' '}
+        </OuterLink>{' '}
         en{' '}
-        <a href="https://en.wikipedia.org/wiki/Buenos_Aires" target="_blank" rel="noopener noreferrer">
+        <OuterLink href="https://en.wikipedia.org/wiki/Buenos_Aires">
           Buenos Aires
-        </a>
+        </OuterLink>
       </h3>
 
       <p>Veni a conocernos para aprender sobre desarrollo web en comunidad!</p>

diff --git a/client/src/components/App/Nav/styled.js b/client/src/components/App/Nav/styled.js
@@ -56,11 +56,12 @@ StyledNav.Left = styled.div`
 
 StyledNav.Right = styled.ul`
   display: grid;
-  grid-gap: 40px;
+  grid-gap: 20px;
   grid-auto-flow: row;
   padding: 10px;
 
   @media (min-width: 768px) {
+    grid-gap: 40px;
     grid-auto-flow: column;
   }
 

diff --git a/client/src/components/shared/Icons/Twitch.js b/client/src/components/shared/Icons/Twitch.js
@@ -3,7 +3,7 @@ import React from 'react'
 const TwitchIcon = props => (
   <svg viewBox="0 0 128 134" {...props}>
     <title>{'Twitch icon'}</title>
-    <path class="cls-1" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)"/>
+    <path d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)"/>
   </svg>
 )
 

diff --git a/client/src/components/shared/OuterLink/index.js b/client/src/components/shared/OuterLink/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { string } from 'prop-types'
+
+const OuterLink = ({ children, href }) => (
+  <a href={href} rel="noopener noreferrer" target="_blank">
+    {children}
+  </a>
+)
+
+OuterLink.propTypes = {
+  href: string.isRequired
+}
+
+export default OuterLink