Add tailwind

packages/corewar-ui/src/features/common/featureButton.js

@@ -1,27 +1,7 @@
-import styled from 'styled-components'
+import React from 'react'
 
-import { colour, space } from '../common/theme'
-
-const FeatureButton = styled.a`
-  border: 2px solid ${colour.white};
-  border-radius: 5px;
-  margin: ${space.m};
-  padding: ${space.m};
-  background: none;
-  display: inline-block;
-  min-width: 200px;
-  color: ${colour.lightgrey};
-  font-weight: 300;
-  text-align: center;
-  text-decoration: none;
-  transition: 0.2s;
-
-  :hover {
-    background-color: ${colour.lightbg};
-    color: ${colour.white};
-    cursor: pointer;
-    transition: 0.2s;
-  }
-`
-
-export default FeatureButton
+export default ({ children }) => (
+  <button className="min-w-200 rounded-md m-4 p-4 text-lightgrey font-light text-center border-2 border-white hover:bg-lightbg hover:text-white cursor-pointer">
+    {children}
+  </button>
+)

packages/corewar-ui/src/features/common/heroLogo.js

@@ -26,7 +26,7 @@ const HeroLogo = () => (
     </div>
     <section className="hidden md:flex flex-wrap justify-center ml-16">
       {features.map(feature => (
-        <Feature>
+        <Feature key={feature.heading}>
           <Octicon name={feature.icon} className="text-2xl text-blue fill-current" />
           <h3 className="m-4 font-light text-lightgrey text-center">{feature.heading}</h3>
         </Feature>

packages/corewar-ui/src/features/common/link.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default ({ route, children }) => (
+  <a
+    className="text-white font-display mr-2 ml-2 lg:ml-6 lg:mr-6 leading-loose border-b-2 border-transparent hover:border-blue hover:no-underline cursor-pointer"
+    href={route}
+  >
+    {children}
+  </a>
+)

packages/corewar-ui/src/features/common/mobileLink.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default ({ route, children }) => (
+  <a
+    className="block md:inline-block mt-4 md:mt-0 md:ml-6 no-underline text-white font-display hover:no-underline cursor-pointer"
+    href={route}
+  >
+    {children}
+  </a>
+)

packages/corewar-ui/src/features/common/primaryButton.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+  <button className="min-w-200 rounded-md m-4 p-4 text-darkbg font-bold text-center border-2 border-white bg-white hover:bg-lightbg hover:text-white">
+    {children}
+  </button>
+)

packages/corewar-ui/src/features/common/siteNav.js

@@ -1,56 +1,51 @@
-import React from 'react'
-import styled from 'styled-components'
+import React, { useState } from 'react'
 
-import { colour, space } from '../common/theme'
-import { media } from '../common/mediaQuery'
+import Logo from '../topbar/logo'
+import Link from './link'
+import MobileLink from './mobileLink'
 
-const Header = styled.header`
-  display: flex;
-  flex-direction: row-reverse;
-  margin: 0 ${space.xl};
-  ${media.phone`margin: 0;`}
+const links = [
+  { route: `/app/editor/src`, text: `play` },
+  { route: `/learn`, text: `learn` },
+  { route: `/#features`, text: `features` },
+  { route: `/sign-up`, text: `sign up` },
+  { route: `/contact-us`, text: `contact us` },
+  { route: `https://github.com/corewar/corewar.io`, text: `code` }
+]
 
-  a {
-    color: ${colour.grey};
-    padding-bottom: ${space.s};
-    margin: 0 ${space.s};
-    ${media.phone`margin: 0;`}
-    display: inline-block;
-    min-width: 80px;
-    text-decoration: none;
-    font-weight: 400;
-    text-align: center;
-    border-bottom: 2px solid transparent;
-    transition: 0.5s;
-  }
-
-  a:hover {
-    border-bottom: 2px solid ${colour.blue};
-    colour: ${colour.white};
-    transition: 0.5s;
-  }
-`
-
-const Nav = styled.nav`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  ${media.phone`justify-content: center;`}
-  align-items: center;
-  width: 100%;
-`
-
-const SiteNav = () => (
-  <Header>
-    <Nav>
-      <a href={`/app/editor/src`}>play</a>
-      <a href={`/learn`}>learn</a>
-      <a href={`/#features`}>features</a>
-      <a href={`/sign-up`}>sign up</a>
-      <a href={`/contact-us`}>contact us</a>
-      <a href={`https://github.com/corewar/corewar`}>code</a>
-    </Nav>
-  </Header>
-)
+const SiteNav = () => {
+  const [isExpanded, toggleExpansion] = useState(false)
+  return (
+    <header className="bg-secondary font-display flex">
+      <div className="w-4/5 mx-auto py-4 flex flex-wrap items-center justify-between">
+        <Logo />
+        <nav className="hidden md:block">
+          {links.map(link => (
+            <Link key={link.route} route={link.route}>
+              {link.text}
+            </Link>
+          ))}
+        </nav>
+        <button
+          className="md:hidden text-white border-white border-2 rounded p-2"
+          onClick={() => toggleExpansion(!isExpanded)}
+        >
+          Menu
+        </button>
+        <nav
+          className={`${
+            isExpanded ? `block` : `hidden`
+          } md:hidden md:flex md:items-center mt-4 w-full md:w-auto border-t-2 border-white`}
+        >
+          {links.map(link => (
+            <MobileLink key={link.text} route={link.route}>
+              {link.text}
+            </MobileLink>
+          ))}
+        </nav>
+      </div>
+    </header>
+  )
+}
 
 export default SiteNav

packages/corewar-ui/src/features/navbar/navbar.js

@@ -1,14 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
-import { space } from '../common/theme'
-import TabLink from '../common/tabLink'
-
-const NavBarGrid = styled.div`
-  grid-row-start: 2;
-  margin-left: ${space.sidebar};
-  display: flex;
-  text-align: center;
-`
+import TabLink from './tabLink'
 
 const navigationData = {
   EDITOR: [
@@ -24,15 +15,13 @@ const navigationData = {
 }
 
 const NavBar = ({ interfaceMode }) => (
-  <NavBarGrid>
+  <div className="flex row-start-2 text-center ml-12">
     {navigationData[interfaceMode].map(link => (
       <TabLink key={link.url} to={link.url}>
         {link.text}
       </TabLink>
     ))}
-  </NavBarGrid>
+  </div>
 )
 
-NavBarGrid.displayName = 'NavBarGrid'
-
 export default NavBar

packages/corewar-ui/src/features/onboarding/feature.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default ({ children, className }) => (
+  <section
+    className={`flex flex-row flex-wrap items-center justify-center p-8 my-4 md:my-16 mx-0 ${className}`}
+  >
+    {children}
+  </section>
+)

packages/corewar-ui/src/features/onboarding/featureDescription.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+  <p className="text-xl md:text-2xl leading-10 m-4 md:m-16 font-light md:flex-feature">
+    {children}
+  </p>
+)

packages/corewar-ui/src/features/onboarding/guidance.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({ children }) => (
+  <div className="flex flex-col items-center flex-1 min-h-200 mt-8 cursor-pointer guidance">
+    {children}
+  </div>
+)

packages/corewar-ui/src/features/onboarding/guidanceText.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import Octicon from 'react-octicon'
+
+import SpeechBubble from './speechBubble'
+
+export default ({ children }) => (
+  <section className="md:opacity-0 flex flex-row items-center justify-start m-4 md:m-8">
+    <Octicon className="text-4xl p-8" name="hubot" />
+    <SpeechBubble>{children}</SpeechBubble>
+  </section>
+)