Merge pull request #148 from salsita/147-game-title

gh-147: Add game title in the header

cypress/integration/pages/CreatePlayerPage.ts

@@ -1,9 +1,10 @@
 import { Page } from './Page'
 import { SelectGamePage } from './SelectGamePage'
 import { Player } from '../types/Player'
+import { DashboardPage } from './DashboardPage'
 
 export class CreatePlayerPage extends Page {
-  constructor(gameName: string) {
+  constructor(private gameName: string) {
     super(`/${gameName}/add-player`)
   }
 
@@ -17,6 +18,11 @@ export class CreatePlayerPage extends Page {
     return new SelectGamePage()
   }
 
+  goToDashboard(): DashboardPage {
+    this.getHeader().get('#title-link').click()
+    return new DashboardPage(this.gameName)
+  }
+
   addPlayer(player: Player, score: number): CreatePlayerPage {
     const content = this.getContent()
     content.get('#player-name-input').clear().type(player.name)

cypress/integration/tests/create-player.ts

@@ -20,8 +20,7 @@ describe('Create player page', () => {
     })
     it('is seen in the leaderboard without reload', () => {
       const leaderboard = addPlayerPage
-        .goToSelectGamePage()
-        .selectGame(FOOSBALL_GAME.name)
+        .goToDashboard()
         .goToLeaderboard()
       leaderboard.locatePlayerWithScore(player, score)
     })

frontend/src/app/Game.js

@@ -4,18 +4,18 @@ import { Route, Switch } from 'react-router-dom'
 import * as ROUTES from './const/routes'
 import { Header } from './components/header'
 import { Footer } from './components/Footer/footer'
-import { Container } from '../styles/blocks/layout'
 // pages
 import { Dashboard } from './pages/Dashboard'
 import { LeaderboardPage } from './pages/Leaderboard'
 import { CreateMatchPage } from './pages/CreateMatch'
 import { Profile } from './pages/Profile'
 import { AddPlayerPage } from './pages/AddPlayer'
 import { MatchListPage } from './pages/MatchList'
-import { Button, Subtitle } from '../styles/blocks'
+import { SimpleButton, Subtitle, SimpleLink, Container } from '../styles/blocks'
 import { connect } from 'react-redux'
 import urljoin from 'url-join'
 import { SelectionStatus } from './const/games'
+import { capitalize } from './utils/string-utils'
 
 export class GameComponent extends Component {
   render() {
@@ -28,7 +28,12 @@ export class GameComponent extends Component {
       <>
         <Header>
           { selection.status === SelectionStatus.SELECTED
-            ? <Button onClick={createMatch}>Add Match</Button>
+            ? <>
+              <span id='title'>
+                <SimpleLink id='title-link' to={url}>{capitalize(selection.value.name)}</SimpleLink>
+              </span>
+              <SimpleButton onClick={createMatch}>Add Match</SimpleButton>
+            </>
             : null }
         </Header>
         <Container id="container">

frontend/src/app/Game.test.js

@@ -1,6 +1,6 @@
 import { GameComponent } from './Game'
 import { Header } from './components/header'
-import { Button } from '../styles/blocks'
+import { SimpleButton } from '../styles/blocks'
 import { shallowWithProps } from '../tests/utils'
 import { HISTORY_MOCK, ROUTER_MATCH } from '../tests/mocks'
 import { FOOSBALL_GAME, URLS } from '../tests/data'
@@ -35,12 +35,12 @@ describe('GameComponent', () => {
         history: HISTORY_MOCK,
       })
     })
-    it('renders button Add Match in the header', () => {
+    it('renders button "Add Match" and game title in the header', () => {
       expect(gameComponent).toMatchSnapshot()
     })
     describe('on Add Match button click', () => {
       beforeEach(() => {
-        gameComponent.find(Header).find(Button).simulate('click')
+        gameComponent.find(Header).find(SimpleButton).simulate('click')
       })
       it('redirects to foosball create match page', () => {
         expect(HISTORY_MOCK.push).toBeCalledWith(URLS.CREATE_FOOSBALL_MATCH)

frontend/src/app/__snapshots__/Game.test.js.snap

@@ -28,9 +28,19 @@ exports[`GameComponent when the selection is empty renders header with no button
 </Fragment>
 `;
 
-exports[`GameComponent when foosball is selected renders button Add Match in the header 1`] = `
+exports[`GameComponent when foosball is selected renders button "Add Match" and game title in the header 1`] = `
 <Fragment>
   <Connect(HeaderComponent)>
+    <span
+      id="title"
+    >
+      <Styled(Link)
+        id="title-link"
+        to="/foosball"
+      >
+        Foosball
+      </Styled(Link)>
+    </span>
     <styled.button
       onClick={[Function]}
     >

frontend/src/app/components/header.js

@@ -4,18 +4,20 @@ import { connect } from 'react-redux'
 import {
   Logo,
   Nav,
-  Button,
-  StyledLink,
+  SimpleButton,
 } from './../../styles/blocks/'
 import { ThemeActions } from '../modules/theme/theme-actions'
-
-const logo = require('./../../media/logo.png')
+import Brightness4Icon from '@material-ui/icons/Brightness4'
+import Brightness7Icon from '@material-ui/icons/Brightness7'
+import { ThemeTypes } from '../const/theme-types'
 
 const HeaderComponent = ({ theme, changeTheme, children }) => (
   <Nav id="header">
-    <Logo id="logo"><StyledLink to={'/'}><img src={logo} alt="logo" /></StyledLink></Logo>
-    <Button onClick={() => {changeTheme(theme)}}>Theme</Button>
+    <Logo id="logo"/>
     {children}
+    <SimpleButton id="theme" onClick={() => {changeTheme(theme)}}>
+      { theme === ThemeTypes.Dark? <Brightness7Icon /> : <Brightness4Icon/> }
+    </SimpleButton>
   </Nav>
 )
 

frontend/src/app/components/logo.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import logoSmall from './../../media/logo-small.png'
+import logo from './../../media/logo.png'
+import { Link } from 'react-router-dom'
+
+export const LogoComponent = ({ id, className }) => (
+  <span id={id} className={className}>
+    <Link id='smalllogo' to={'/'}>
+      <img src={logoSmall} alt="logo" />
+    </Link>
+    <Link id='largelogo' to={'/'}>
+      <img src={logo} alt="logo" />
+    </Link>
+  </span>
+)

frontend/src/app/utils/string-utils.js

@@ -0,0 +1 @@
+export const capitalize = str => `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`

frontend/src/styles/blocks/buttons.js

@@ -1,20 +1,21 @@
 import styled from 'styled-components'
 import { variables } from './../variables'
 
-export const Button = styled.button`
-  background: var(--cYellow);
+export const SimpleButton = styled.button`
   border: none;
-  padding: 15px 20px;
   border-radius: 8px;
-  width: 100%;
-  font-weight: 700;
   color: var(--cFont);
 
-  @media (min-width: ${variables.bpMedium}) {
-    width: 300px;
-  }
-
   &:hover {
     cursor: pointer;
   }
 `
+
+export const Button = styled(SimpleButton)`
+  background: var(--cYellow);
+  padding: 15px 20px;
+  width: 100%;
+  @media (min-width: ${variables.bpMedium}) {
+    width: 300px;
+  }
+`

frontend/src/styles/blocks/index.js

@@ -4,8 +4,8 @@ import {
 } from './typo'
 import { Nav, Container, GridContainer, Box, ProfileDetail } from './layout'
 import { ListCon, ListItem } from './list'
-import { StyledLink } from './link'
-import { Button } from './buttons'
+import { StyledLink, SimpleLink } from './link'
+import { Button, SimpleButton } from './buttons'
 import { SelectBox, Label, Input } from './inputs'
 import { Logo } from './logo'
 
@@ -14,8 +14,8 @@ export {
   FiltersBlock, FiltersSpan, StyledHyperLink,
   Nav, Container, GridContainer, Box, ProfileDetail,
   ListCon, ListItem,
-  StyledLink,
-  Button,
+  SimpleLink, StyledLink,
+  Button, SimpleButton,
   SelectBox, Label, Input,
   Logo,
 }

frontend/src/styles/blocks/layout.js

@@ -6,20 +6,38 @@ const Nav = styled.nav`
   width: 100%;
   height: 50px;
   background: var(--cYellow);
-  text-align: center;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
 
-  h1 {
-    margin-top: 10px;
-    background: var(--cYellow);
-    text-align: center;
+  font-size: 16px
+  #title {
+    display: flex;
+    flex: 1;
+    justify-content: start;
+    align-items: center;
+    font-size: 1.7em;
+    @media (max-width: ${variables.bpSmall}) {
+      font-size: 1.4em;
+    }
+    padding-bottom: 3px;
+  }
+  #theme {
+    padding: 8px;
+    display: flex;
+    width: auto;
+    svg {
+      height: 1.5em;
+      width: 1.5em;
+      font-size: inherit;
+    }
   }
   button {
-    float: right;
+    padding: 2px 10px 0px 10px;
     width: auto;
     background: var(--cTheme);
-    padding: 10px 15px;
-    color: var(--cFont);
-    margin: 7px;
+    margin: 5px;
+    font-size: inherit;
   }
 `
 

frontend/src/styles/blocks/link.js

@@ -1,10 +1,13 @@
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-export const StyledLink = styled(Link)`
+export const SimpleLink = styled(Link)`
   text-decoration: none;
-  padding: 5px;
   color: inherit;
+`
+
+export const StyledLink = styled(SimpleLink)`
+  padding: 5px;
 
   span {
     font-size: 10px;

frontend/src/styles/blocks/logo.js

@@ -1,20 +1,24 @@
 import styled from 'styled-components'
 import { variables } from './../variables'
+import { LogoComponent } from '../../app/components/logo'
 
-export const Logo = styled.span`
-  position: absolute;
-  left: 0;
-
-  img {
-    width: auto;
-    height: 50px;
-    position: absolute;
-    left: 10px;
-
-    @media (max-width: ${variables.bpMedium}) {
-      width: 100px;
-      height: auto;
-      margin: 5px 0;
+export const Logo = styled(LogoComponent)`
+  #smalllogo {
+    display: none
+  }
+  @media (max-width: ${variables.bpSmall}) {
+    #largelogo {
+      display: none;
     }
+    #smalllogo {
+      display: inherit;
+    }
+  }
+  height: 100%;
+  a,img {
+    height: 100%;
+  }
+  a {
+    padding: 0px;
   }
 `

frontend/src/styles/variables.js

@@ -4,6 +4,8 @@ export const variables = {
 
   bpMedium: '600px',
 
+  bpSmall: '420px',
+
   // Grid Layout vars
   GridGap: '1rem',
   DefaultGridTemplateColums: '1fr',