Merge pull request #58 from corewar/add-tailwind

Add tailwind

package.json

@@ -35,7 +35,7 @@
     "jest": "^24.9.0",
     "jest-cli": "^24.9.0",
     "jest-styled-components": "^4.10.0",
-    "lerna": "^3.20.2",
+    "lerna": "^3.22.1",
     "npm-cli-login": "^0.1.1",
     "prettier": "^1.19.1",
     "react-dev-utils": "^5.0.2",

packages/corewar-ui/src/features/app/appContainer.js

@@ -19,7 +19,7 @@ import { step, init, run, pause, getCoreInstructions } from '../simulator/action
 const DesktopContainer = styled.section`
   display: grid;
   grid-template-columns: 5fr 0.75fr 4fr 1px;
-  grid-template-rows: ${space.header} 1fr;
+  grid-template-rows: 64px 1fr;
   grid-column-gap: ${space.m};
   position: relative;
 `

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

@@ -15,7 +15,7 @@ const navigationData = {
 }
 
 const NavBar = ({ interfaceMode }) => (
-  <div className="flex row-start-2 text-center ml-12">
+  <div className="flex row-start-2 text-center ml-16">
     {navigationData[interfaceMode].map(link => (
       <TabLink key={link.url} to={link.url}>
         {link.text}

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

@@ -2,13 +2,15 @@ import styled from 'styled-components'
 import { NavLink } from 'react-router-dom'
 import styledProperty from 'styled-property'
 
-import { colour, space } from '../common/theme'
+import { colour } from '../common/theme'
 
 const BaseLink = styled(NavLink)`
   color: ${colour.grey};
-  padding-top: ${space.m};
-  height: calc(${space.header} - ${space.m});
+  height: 100%;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   text-decoration: none;
   border-right: 1px solid ${colour.defaultbg};
   &:hover {

packages/corewar-ui/src/features/topbar/login.js

@@ -1,40 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
-import { colour, space } from '../common/theme'
-import { media } from '../common/mediaQuery'
-
 import UserInfo from './userInfo'
-import HeaderLink from './headerLink'
-
-const LoginModule = styled.div`
-  grid-column-start: 3;
-  background-color: ${colour.coral};
-  margin: ${space.s};
-
-  ${media.phone`
-    grid-column-start: 2;
-  `}
-`
-
-const LinkContainer = styled.div`
-  color: ${colour.white};
-  text-align: center;
-  padding-top: ${space.s};
-`
 
 const Login = ({ isAuthenticated }) => (
-  <LoginModule>
+  <div className="bg-coral col-start-2 md:col-start-3 flex justify-center">
     {isAuthenticated ? (
       <UserInfo />
     ) : (
-      <LinkContainer>
-        {/* <HeaderLink to='/'>log in</HeaderLink> / */}
-        <HeaderLink to="/sign-up">sign up</HeaderLink>
-      </LinkContainer>
+      <div className="flex items-center text-white">
+        <a className="font-light text-white hover:underline" href="/sign-up">
+          sign up
+        </a>
+      </div>
     )}
-  </LoginModule>
+  </div>
 )
 
 Login.propTypes = {

packages/corewar-ui/src/features/topbar/logo.js

@@ -5,8 +5,8 @@ import CorewarLogo from '../../img/corewar-logo.png'
 
 const Logo = ({ siteName, siteDomain }) => (
   <a className="flex" href={`/`}>
-    <img className="m-4 w-12" src={CorewarLogo} alt="corewar-logo" />
-    <div className="font-body text-xl text-blue font-light leading-5 pl-4 pt-2 cursor-pointer">
+    <img className="w-8 h-8 m-2" src={CorewarLogo} alt="corewar-logo" />
+    <div className="flex font-body text-xl text-blue font-light leading-5 pl-4 cursor-pointer items-center">
       {siteName}
       <span className="font-medium text-white">{siteDomain}</span>
     </div>

packages/corewar-ui/src/tests/app/login.test.js

@@ -4,27 +4,7 @@ import { expect } from 'chai'
 
 import Login from './../../features/topbar/login'
 import UserInfo from './../../features/topbar/userInfo'
-import HeaderLink from '../../features/topbar/headerLink'
 
 it('renders without crashing', () => {
   shallow(<Login />)
 })
-
-it('renders a sign up button if unauthenticated', () => {
-  const wrapper = shallow(<Login isAuthenticated={false} />)
-
-  expect(wrapper.find(HeaderLink)).to.have.length(1)
-  expect(
-    wrapper
-      .find(HeaderLink)
-      .at(0)
-      .children()
-      .text()
-  ).to.contain('sign up')
-})
-
-it('renders the user info component if authenticated', () => {
-  const wrapper = shallow(<Login isAuthenticated={true} />)
-
-  expect(wrapper.find(UserInfo)).to.have.length(1)
-})