From 20204edbb90a9a1a265a0aeeb550371bf3bd7e3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A9la=20Varga?= <netzzwerg@googlemail.com>
Date: Tue, 7 Jan 2020 22:58:13 +0100
Subject: [PATCH 1/7] Update migration.md

---
 migration.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/migration.md b/migration.md
index 78869d01..3cd7d93d 100644
--- a/migration.md
+++ b/migration.md
@@ -98,5 +98,6 @@ When done, check that person off.
 * [x] [Nuno Maduro](https://nunomaduro.com/uses/) - Software engineer, Open Source contributor, Speaker
 * [ ] [Erno Salo](https://endormi.io/uses/) - Full Stack Developer and Open Source Contributor
 * [ ] [James Brooks](https://james.brooks.page/uses/) - Software Developer at Laravel and Podcaster
+* [ ] [Béla Varga](http://ecmanauten.de/) - Front-end Developer, Meetup & Event Organizer and UX/UI Designer
 
 [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

From 11e3192b2eb2db18dd9a285eb1d9b630f5cc5efc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A9la=20Varga?= <netzzwerg@googlemail.com>
Date: Tue, 7 Jan 2020 23:01:59 +0100
Subject: [PATCH 2/7] Update migration.md

---
 migration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/migration.md b/migration.md
index 3cd7d93d..4295dde1 100644
--- a/migration.md
+++ b/migration.md
@@ -98,6 +98,6 @@ When done, check that person off.
 * [x] [Nuno Maduro](https://nunomaduro.com/uses/) - Software engineer, Open Source contributor, Speaker
 * [ ] [Erno Salo](https://endormi.io/uses/) - Full Stack Developer and Open Source Contributor
 * [ ] [James Brooks](https://james.brooks.page/uses/) - Software Developer at Laravel and Podcaster
-* [ ] [Béla Varga](http://ecmanauten.de/) - Front-end Developer, Meetup & Event Organizer and UX/UI Designer
+* [x] [Béla Varga](http://ecmanauten.de/uses/) - Front-end Developer, Meetup & Event Organizer and UX/UI Designer
 
 [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

From a98ca16278b74a345d044686a22406917a5d5c95 Mon Sep 17 00:00:00 2001
From: Justin Juno <hello@justinjuno.dev>
Date: Tue, 7 Jan 2020 16:58:15 -0600
Subject: [PATCH 3/7] #119 - Move to Styled Components

---
 gatsby-node.js            |   2 +-
 src/components/Person.js  |  90 +++++++++++++++--
 src/components/Topics.js  |  62 ++++++++++--
 src/components/header.js  |  13 ++-
 src/components/layout.css | 201 --------------------------------------
 src/components/layout.js  |  52 +++++++++-
 src/pages/index.js        |  12 ++-
 7 files changed, 205 insertions(+), 227 deletions(-)
 delete mode 100644 src/components/layout.css

diff --git a/gatsby-node.js b/gatsby-node.js
index d73f7d6f..acd2fd96 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,4 +1,4 @@
-import people from './src/data.js';
+import people from './src/data';
 import { tags, countries } from './src/util/stats';
 
 function sourceNodes({ actions, createNodeId, createContentDigest }) {
diff --git a/src/components/Person.js b/src/components/Person.js
index 6a80cb0c..78a69ed7 100644
--- a/src/components/Person.js
+++ b/src/components/Person.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { name } from 'country-emoji';
+import styled from 'styled-components';
 import iphone from '../images/iphone.png';
 import android from '../images/android.png';
 import windows from '../images/windows.svg';
@@ -10,9 +11,9 @@ export default function Person({ person, currentTag }) {
   const url = new URL(person.url);
   const img = `https://logo.clearbit.com/${url.host}`;
   return (
-    <div className="person">
-      <div className="personInner">
-        <header className="personHeader">
+    <PersonWrapper>
+      <PersonInner>
+        <header>
           <img width="50" height="50" src={img} alt={person.name} />
           <h3>
             <a href={person.url} target="_blank" rel="noopener noreferrer">
@@ -25,8 +26,7 @@ export default function Person({ person, currentTag }) {
           >{`${url.host}${url.pathname}`}</a>
         </header>
         <p>{person.description}</p>
-
-        <ul className="tags">
+        <ul>
           {person.tags.map(tag => (
             <li
               key={tag}
@@ -36,8 +36,8 @@ export default function Person({ person, currentTag }) {
             </li>
           ))}
         </ul>
-      </div>
-      <div className="deets">
+      </PersonInner>
+      <PersonDeets>
         <span className="country" title={name(person.country)}>
           {person.country}
         </span>
@@ -69,7 +69,79 @@ export default function Person({ person, currentTag }) {
           </span>
         )}
         {person.github && <span>{person.github}</span>}
-      </div>
-    </div>
+      </PersonDeets>
+    </PersonWrapper>
   );
 }
+
+// Component Styles
+const PersonWrapper = styled.div`
+  border: 1px solid var(--vape);
+  border-radius: 5.34334px;
+  box-shadow: 10px -10px 0 var(--blue2);
+  display: grid;
+  grid-template-rows: 1fr auto auto;
+`;
+
+const PersonInner = styled.div`
+  padding: 2rem;
+  h3 {
+    margin: 0;
+  }
+  ul li {
+    font-size: 1.2rem;
+    &.currentTag {
+      color: var(--yellow);
+    }
+  }
+  header {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto 1fr;
+    grid-gap: 0 1rem;
+  img {
+    grid-row: 1 / -1;
+    background: var(--lightblue);
+    font-size: 1rem;
+  }
+  .displayLink {
+    text-decoration: none;
+    color: var(--vape);
+    letter-spacing: 1px;
+    font-size: 1.2rem;
+    :hover {
+      color: var(--pink);
+    }
+  }
+`;
+
+const PersonDeets = styled.div`
+  display: flex;
+  border-block-start: 1px solid var(--vape);
+  > * {
+    flex: 1;
+    border-inline-start: 1px solid var(--vape);
+    text-align: center;
+    padding: 1rem;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    grid-template-columns: auto auto;
+  }
+  a {
+    color: var(--vape);
+  }
+  :first-child {
+    border-inline-start: none;
+  }
+  .at {
+    color: var(--yellow);
+    margin-right: 2px;
+  }
+  .country {
+    font-size: 3rem;
+  }
+  .phone {
+    padding: 0;
+  }
+`;
diff --git a/src/components/Topics.js b/src/components/Topics.js
index d7426561..d46e0752 100644
--- a/src/components/Topics.js
+++ b/src/components/Topics.js
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import styled from 'styled-components';
 import FilterContext from '../context/FilterContext';
 
 export default function Topics() {
@@ -7,9 +8,9 @@ export default function Topics() {
   );
   console.log(countries);
   return (
-    <div className="tags">
+    <Tags>
       {tags.map(tag => (
-        <label
+        <TagLabel
           className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
           htmlFor={`filter-${tag.name}`}
           key={`filter-${tag.name}`}
@@ -23,12 +24,12 @@ export default function Topics() {
             onChange={e => setCurrentTag(e.currentTarget.value)}
           />
           {tag.name}
-          <span className="count">{tag.count}</span>
-        </label>
+          <TagCount>{tag.count}</TagCount>
+        </TagLabel>
       ))}
 
       {countries.map(tag => (
-        <label
+        <TagLabel
           className={`tag ${tag.emoji === currentTag ? 'currentTag' : ''}`}
           htmlFor={`filter-${tag.name}`}
           key={`filter-${tag.name}`}
@@ -42,10 +43,53 @@ export default function Topics() {
             checked={tag.emoji === currentTag}
             onChange={e => setCurrentTag(e.currentTarget.value)}
           />
-          <span className="emoji">{tag.emoji}</span>
-          <span className="count">{tag.count}</span>
-        </label>
+          <TagEmoji>{tag.emoji}</TagEmoji>
+          <TagCount>{tag.count}</TagCount>
+        </TagLabel>
       ))}
-    </div>
+    </Tags>
   );
 }
+
+// Component Styles
+const Tags = styled.div`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const TagLabel = styled.label`
+  background: var(--pink);
+  margin: 2px;
+  border-radius: 3px;
+  font-size: 1.7rem;
+  padding: 5px;
+  color: hsla(0, 100%, 100%, 0.8);
+  transition: background-color 0.2s;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  input {
+    display: none;
+  }
+  &.currentTag {
+    background: var(--yellow);
+    color: hsla(0, 100%, 0%, 0.8);
+  }
+`;
+
+const TagEmoji = styled.span`
+  transform: scale(1.45);
+`;
+
+const TagCount = styled.span`
+  background: var(--blue);
+  font-size: 1rem;
+  color: white;
+  padding: 2px;
+  border-radius: 2px;
+  margin-left: 5px;
+`;
diff --git a/src/components/header.js b/src/components/header.js
index a431ca31..89e862fd 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -2,9 +2,10 @@ import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
+import styled from 'styled-components';
 
 const Header = ({ siteTitle }) => (
-  <header className="header">
+  <HeaderWrapper className="header">
     <Helmet>
       <title>{siteTitle}</title>
     </Helmet>
@@ -17,7 +18,7 @@ const Header = ({ siteTitle }) => (
         software and configs.
       </p>
     </div>
-  </header>
+  </HeaderWrapper>
 );
 
 Header.propTypes = {
@@ -29,3 +30,11 @@ Header.defaultProps = {
 };
 
 export default Header;
+
+// Component Styles
+const HeaderWrapper = styled.header`
+  text-align: center;
+  h1 {
+    font-size: 6rem;
+  }
+`;
diff --git a/src/components/layout.css b/src/components/layout.css
deleted file mode 100644
index 62a34533..00000000
--- a/src/components/layout.css
+++ /dev/null
@@ -1,201 +0,0 @@
-html {
-  --purple: #1e1f5c;
-  --blue: #203447;
-  --lightblue: #1f4662;
-  --blue2: #1C2F40;
-  --yellow: #ffc600;
-  --pink: #EB4471;
-  --vape: #d7d7d7;
-  background: var(--blue);
-  color: var(--vape);
-  font-family: 'Fira Mono', monospace;
-  font-weight: 100;
-  font-size: 10px;
-}
-
-::selection {
-  background: var(--yellow);
-  color: var(--blue);
-}
-
-body {
-  font-size: 2rem;
-}
-
-h1,h2,h3,h4,h5,h6 {
-  font-weight: 500;
-}
-
-
-h1 a {
-  text-align: center;
-}
-
-
-a {
-  color: var(--yellow);
-  text-decoration-color: var(--pink);
-  font-style: italic;
-}
-
-code {
-  background: var(--lightblue);
-}
-
-.site {
-  max-width: 1900px;
-  margin: 5rem;
-}
-
-.header {
-  text-align: center;
-}
-
-.header h1 {
-  font-size: 6rem;
-}
-
-main {
-  display: grid;
-  grid-gap: 3rem;
-  max-width: 1900px;
-  padding: 0 3rem;
-  margin: 5rem auto;
-}
-
-.people {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  grid-gap: 5rem;
-}
-
-.person {
-  border: 1px solid var(--vape);
-  border-radius: 5.34334px;
-  box-shadow: 10px -10px 0 var(--blue2);
-  display: grid;
-  grid-template-rows:  1fr auto auto;
-}
-
-.person h3 {
-  margin: 0;
-}
-
-.personInner {
-  padding: 2rem;
-}
-
-.person .tag {
-  font-size: 1.2rem;
-}
-
-.personHeader {
-  display: grid;
-  grid-template-rows:auto auto;
-  grid-template-columns: auto 1fr;
-  grid-gap: 0 1rem;
-}
-
-.personHeader img {
-  grid-row: 1 / -1;
-  background: var(--lightblue);
-  font-size: 1rem;
-}
-
-.name {
-  display: block;
-}
-
-.name.last {
-  font-size: 5rem;
-}
-
-.deets {
-  display: flex;
-  border-block-start: 1px solid var(--vape);
-}
-
-.deets > * {
-  flex: 1;
-  border-inline-start: 1px solid var(--vape);
-  text-align: center;
-  padding: 1rem;
-  display: grid;
-  align-items: center;
-  justify-content: center;
-  grid-template-columns: auto auto;
-}
-
-.deets a {
-  color: var(--vape);
-}
-
-.deets .at {
-  color: var(--yellow);
-  margin-right: 2px;
-}
-
-.deets :first-child {
-  border-inline-start: none;
-}
-
-.deets .country {
-  font-size: 3rem;
-}
-.deets .phone {
-  padding: 0;
-}
-
-.displayLink {
-  text-decoration: none;
-  color: var(--vape);
-  letter-spacing: 1px;
-  font-size: 1.2rem;
-}
-
-.displayLink:hover {
-  color: var(--pink);
-}
-
-
-.tags {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.tag {
-  background: var(--pink);
-  margin: 2px;
-  border-radius: 3px;
-  font-size: 1.7rem;
-  padding: 5px;
-  color: hsla(0, 100%, 100%, 0.8);
-  transition: background-color 0.2s;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-
-.tag input { display: none; }
-
-.tag.currentTag {
-  background: var(--yellow);
-  color: hsla(0, 100%, 0%, 0.8);
-}
-
-.tag .emoji {
-  transform: scale(1.45);
-}
-
-.tag .count {
-  background: var(--blue);
-  font-size: 1rem;
-  color: white;
-  padding: 2px;
-  border-radius: 2px;
-  margin-left: 5px;
-}
diff --git a/src/components/layout.js b/src/components/layout.js
index 11ebc19f..4189f2f7 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -9,9 +9,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useStaticQuery, graphql } from 'gatsby';
 
+import styled, { createGlobalStyle } from 'styled-components';
 import Header from './header';
 import 'normalize.css';
-import './layout.css';
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
@@ -26,15 +26,16 @@ const Layout = ({ children }) => {
 
   return (
     <>
+      <GlobalStyle />
       <Header siteTitle={data.site.siteMetadata.title} />
-      <main>
+      <Main>
         {children}
         <footer>
           © {new Date().getFullYear() - Math.floor(Math.random() * 777)} Made by{' '}
           <a href="https://wesbos.com">Wes Bos</a> with{' '}
           <a href="https://www.gatsbyjs.org">Gatsby</a>. Icons from icons8.com.
         </footer>
-      </main>
+      </Main>
     </>
   );
 };
@@ -44,3 +45,48 @@ Layout.propTypes = {
 };
 
 export default Layout;
+
+// Global Styles
+const GlobalStyle = createGlobalStyle`
+  html {
+    --purple: #1e1f5c;
+    --blue: #203447;
+    --lightblue: #1f4662;
+    --blue2: #1C2F40;
+    --yellow: #ffc600;
+    --pink: #EB4471;
+    --vape: #d7d7d7;
+    background: var(--blue);
+    color: var(--vape);
+    font-family: 'Fira Mono', monospace;
+    font-weight: 100;
+    font-size: 10px;
+  }
+  ::selection {
+    background: var(--yellow);
+    color: var(--blue);
+  }
+  body {
+    font-size: 2rem;
+  }
+  h1,h2,h3,h4,h5,h6 {
+    font-weight: 500;
+  }
+  a {
+    color: var(--yellow);
+    text-decoration-color: var(--pink);
+    font-style: italic;
+  }
+  code {
+    background: var(--lightblue);
+  }
+`;
+
+// Component Styles
+const Main = styled.main`
+  display: grid;
+  grid-gap: 3rem;
+  max-width: 1900px;
+  padding: 0 3rem;
+  margin: 5rem auto;
+`;
diff --git a/src/pages/index.js b/src/pages/index.js
index 5adc8e05..8de2bd75 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
+import styled from 'styled-components';
 import FilterContext from '../context/FilterContext';
 
 import Layout from '../components/layout';
@@ -35,13 +36,20 @@ function IndexPage() {
   return (
     <Layout>
       <Topics />
-      <div className="people">
+      <People>
         {people.map(person => (
           <Person key={person.name} person={person} currentTag={currentTag} />
         ))}
-      </div>
+      </People>
     </Layout>
   );
 }
 
 export default IndexPage;
+
+// Component Styles
+const People = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  grid-gap: 5rem;
+`;

From f792f0bf80203801967370a906130908911bd6c5 Mon Sep 17 00:00:00 2001
From: David O'Trakoun <davidosomething@users.noreply.github.com>
Date: Tue, 7 Jan 2020 21:03:20 -0500
Subject: [PATCH 4/7] added self already, just x'ing off list

---
 migration.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/migration.md b/migration.md
index 78869d01..6f35bf77 100644
--- a/migration.md
+++ b/migration.md
@@ -94,7 +94,7 @@ When done, check that person off.
 * [ ] [James Mills](https://jamesmills.co.uk/uses/) - Web Consultant
 * [ ] [Jeffrey Way](https://laracasts.com/blog/laracasts-uses) - Laracasts author
 * [ ] [Terry Godier](https://terrygodier.com/uses/) - Developer and Marketer
-* [ ] [David O'Trakoun](https://www.davidosomething.com/uses/) - Software Engineer
+* [x] [David O'Trakoun](https://www.davidosomething.com/uses/) - Software Engineer
 * [x] [Nuno Maduro](https://nunomaduro.com/uses/) - Software engineer, Open Source contributor, Speaker
 * [ ] [Erno Salo](https://endormi.io/uses/) - Full Stack Developer and Open Source Contributor
 * [ ] [James Brooks](https://james.brooks.page/uses/) - Software Developer at Laravel and Podcaster

From 718814cc4c2a38f210a227af230479fb68880e72 Mon Sep 17 00:00:00 2001
From: Sil van Diepen <me@silvandiepen.com>
Date: Wed, 8 Jan 2020 09:03:42 +0100
Subject: [PATCH 5/7] Add Sil van Diepen

---
 src/data.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/data.js b/src/data.js
index 1cb641dc..f260aca5 100644
--- a/src/data.js
+++ b/src/data.js
@@ -448,6 +448,30 @@ const pages = [
       'Vue'
     ],
   }
+,
+  {
+    name: 'Sil van Diepen',
+    description: 'Creative Developer',
+    url: 'https://www.silvandiepen.nl/uses/',
+    twitter: '@silvandiepen',
+    emoji: '🐯',
+    country: '🇳🇱',
+    computer: 'apple',
+    phone: 'iphone',
+    tags: [
+      'Developer',
+      'Designer',
+      'Illustrator',
+      'Photography',
+      'Front End',
+      'JavaScript',
+      'Vue',
+      'Node',
+      'CSS',
+      'Sass',
+      'Design Systems'
+    ],
+  }
 ];
 
 export default pages;

From 0493d19f29ca0c24832c64ece3222bbb248a0756 Mon Sep 17 00:00:00 2001
From: Sil van Diepen <me@silvandiepen.com>
Date: Wed, 8 Jan 2020 09:04:46 +0100
Subject: [PATCH 6/7] Add Sil van Diepen - fix break

---
 src/data.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/data.js b/src/data.js
index f260aca5..78665e78 100644
--- a/src/data.js
+++ b/src/data.js
@@ -447,8 +447,7 @@ const pages = [
       'Node',
       'Vue'
     ],
-  }
-,
+  },
   {
     name: 'Sil van Diepen',
     description: 'Creative Developer',

From 58d31e2df367645222c36125e9b85caf09cb8cc7 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 8 Jan 2020 10:21:46 -0500
Subject: [PATCH 7/7] Refactor some styled components details

---
 src/components/Person.js | 43 +++++++++++++++++-----------------------
 src/components/Topics.js | 25 +++++++++++++----------
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/components/Person.js b/src/components/Person.js
index 78a69ed7..20d22ba1 100644
--- a/src/components/Person.js
+++ b/src/components/Person.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { name } from 'country-emoji';
 import styled from 'styled-components';
+import { Tag, Tags } from './Topics';
 import iphone from '../images/iphone.png';
 import android from '../images/android.png';
 import windows from '../images/windows.svg';
@@ -26,16 +27,13 @@ export default function Person({ person, currentTag }) {
           >{`${url.host}${url.pathname}`}</a>
         </header>
         <p>{person.description}</p>
-        <ul>
+        <Tags>
           {person.tags.map(tag => (
-            <li
-              key={tag}
-              className={`tag ${tag === currentTag ? 'currentTag' : ''}`}
-            >
+            <Tag key={tag} as="li" currentTag={tag === currentTag} small>
               {tag}
-            </li>
+            </Tag>
           ))}
-        </ul>
+        </Tags>
       </PersonInner>
       <PersonDeets>
         <span className="country" title={name(person.country)}>
@@ -88,29 +86,24 @@ const PersonInner = styled.div`
   h3 {
     margin: 0;
   }
-  ul li {
-    font-size: 1.2rem;
-    &.currentTag {
-      color: var(--yellow);
-    }
-  }
   header {
     display: grid;
     grid-template-rows: auto auto;
     grid-template-columns: auto 1fr;
     grid-gap: 0 1rem;
-  img {
-    grid-row: 1 / -1;
-    background: var(--lightblue);
-    font-size: 1rem;
-  }
-  .displayLink {
-    text-decoration: none;
-    color: var(--vape);
-    letter-spacing: 1px;
-    font-size: 1.2rem;
-    :hover {
-      color: var(--pink);
+    img {
+      grid-row: 1 / -1;
+      background: var(--lightblue);
+      font-size: 1rem;
+    }
+    .displayLink {
+      text-decoration: none;
+      color: var(--vape);
+      letter-spacing: 1px;
+      font-size: 1.2rem;
+      :hover {
+        color: var(--pink);
+      }
     }
   }
 `;
diff --git a/src/components/Topics.js b/src/components/Topics.js
index d46e0752..327e1284 100644
--- a/src/components/Topics.js
+++ b/src/components/Topics.js
@@ -10,8 +10,8 @@ export default function Topics() {
   return (
     <Tags>
       {tags.map(tag => (
-        <TagLabel
-          className={`tag ${tag.name === currentTag ? 'currentTag' : ''}`}
+        <Tag
+          currentTag={tag.name === currentTag}
           htmlFor={`filter-${tag.name}`}
           key={`filter-${tag.name}`}
         >
@@ -25,12 +25,12 @@ export default function Topics() {
           />
           {tag.name}
           <TagCount>{tag.count}</TagCount>
-        </TagLabel>
+        </Tag>
       ))}
 
       {countries.map(tag => (
-        <TagLabel
-          className={`tag ${tag.emoji === currentTag ? 'currentTag' : ''}`}
+        <Tag
+          currentTag={tag.emoji === currentTag}
           htmlFor={`filter-${tag.name}`}
           key={`filter-${tag.name}`}
           title={tag.name}
@@ -45,7 +45,7 @@ export default function Topics() {
           />
           <TagEmoji>{tag.emoji}</TagEmoji>
           <TagCount>{tag.count}</TagCount>
-        </TagLabel>
+        </Tag>
       ))}
     </Tags>
   );
@@ -60,11 +60,12 @@ const Tags = styled.div`
   flex-wrap: wrap;
 `;
 
-const TagLabel = styled.label`
+const Tag = styled.label`
   background: var(--pink);
   margin: 2px;
   border-radius: 3px;
-  font-size: 1.7rem;
+  font-size: ${props => (props.small ? `1.2rem;` : `1.7rem;`)}
+
   padding: 5px;
   color: hsla(0, 100%, 100%, 0.8);
   transition: background-color 0.2s;
@@ -75,10 +76,12 @@ const TagLabel = styled.label`
   input {
     display: none;
   }
-  &.currentTag {
+  ${props =>
+    props.currentTag &&
+    `
     background: var(--yellow);
     color: hsla(0, 100%, 0%, 0.8);
-  }
+  `}
 `;
 
 const TagEmoji = styled.span`
@@ -93,3 +96,5 @@ const TagCount = styled.span`
   border-radius: 2px;
   margin-left: 5px;
 `;
+
+export { Tag, Tags };