Merge pull request #130 from justinjunodev/issue-119-move-to-styled-components

Issue 119 - Move to Styled Components

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 }) {

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">
+    <PersonWrapper>
-      <div className="personInner">
+      <PersonInner>
-        <header className="personHeader">
+        <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>
-        <ul className="tags">
           {person.tags.map(tag => (
             <li
               key={tag}
@@ -36,8 +36,8 @@ export default function Person({ person, currentTag }) {
             </li>
           ))}
         </ul>
-      </div>
+      </PersonInner>
-      <div className="deets">
+      <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>
+      </PersonDeets>
-    </div>
+    </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;
+  }
+`;

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>
+          <TagCount>{tag.count}</TagCount>
-        </label>
+        </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>
+          <TagEmoji>{tag.emoji}</TagEmoji>
-          <span className="count">{tag.count}</span>
+          <TagCount>{tag.count}</TagCount>
-        </label>
+        </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;
+`;

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;
+  }
+`;

src/components/layout.css

@@ -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;
-}

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;
+`;

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;
+`;