gh-147: Add game Title

salsita · Apr 3, 2020 · ec65e54 · ec65e54
1 parent ee83444
commit ec65e54
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 85 deletions.
diff --git a/frontend/src/app/App.js b/frontend/src/app/App.js
@@ -4,32 +4,36 @@ 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 { isGameSelected } from './modules/games/games-selectors'
+import { SimpleButton, Subtitle, SimpleLink, Container } from '../styles/blocks'
+import { getSelectedGame } from './modules/games/games-selectors'
 import { connect } from 'react-redux'
 
 export class AppComponent extends Component {
   render() {
-    const { match: { url, params: { gameName } }, isGameSelected, gameNotFound } = this.props
+    const { match: { url, params: { gameName } }, selectedGame, gameNotFound } = this.props
     const createMatch = () => {
       this.props.history.push(`${url}${ROUTES.CREATE_MATCH}`)
     }
     const constructUrl = relativePath => `${url}${relativePath}`
     return (
       <>
         <Header>
-          { isGameSelected? <Button onClick={createMatch}>Add Match</Button> : null }
+          { selectedGame? <>
+            <span id='title'>
+              <SimpleLink to={url}>{selectedGame.name.toUpperCase()}</SimpleLink>
+            </span>
+            <SimpleButton onClick={createMatch}>Add Match</SimpleButton>
+          </> : null }
         </Header>
         <Container>
-          { isGameSelected
+          { selectedGame
             ? <Switch>
               <Route exact path={constructUrl(ROUTES.LEADERBOARD)}>
                 <LeaderboardPage constructUrl={constructUrl} />
@@ -56,7 +60,7 @@ export class AppComponent extends Component {
 }
 
 const mapStateToProps = state => ({
-  isGameSelected: isGameSelected(state),
+  selectedGame: getSelectedGame(state),
   gameNotFound: state.gameNotFound,
 })
 

diff --git a/frontend/src/app/App.test.js b/frontend/src/app/App.test.js
@@ -1,6 +1,6 @@
 import { AppComponent } from './App'
 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'
@@ -14,7 +14,7 @@ describe('AppComponent', () => {
     beforeEach(() => {
       appComponent = shallowWithProps(AppComponent, {
         match: { params: { gameName: FOOSBALL_GAME.name } },
-        isGameSelected: false,
+        selectedGame: null,
         gameNotFound: true,
       })
     })
@@ -23,20 +23,20 @@ describe('AppComponent', () => {
     })
   })
 
-  describe('when game is selected', () => {
+  describe('when foosball is selected', () => {
     beforeEach(() => {
       appComponent = shallowWithProps(AppComponent, {
         match: { ...ROUTER_MATCH, url: URLS.FOOSBALL },
-        isGameSelected: true,
+        selectedGame: FOOSBALL_GAME,
         history: HISTORY_MOCK,
       })
     })
-    it('renders button Add Match in the header', () => {
+    it('renders button "Add Match" and game title in the header', () => {
       expect(appComponent).toMatchSnapshot()
     })
     describe('on Add Match button click', () => {
       beforeEach(() => {
-        appComponent.find(Header).find(Button).simulate('click')
+        appComponent.find(Header).find(SimpleButton).simulate('click')
       })
       it('redirects to create match page', () => {
         expect(HISTORY_MOCK.push).toBeCalledWith(URLS.CREATE_FOOSBALL_MATCH)
@@ -48,7 +48,7 @@ describe('AppComponent', () => {
     beforeEach(() => {
       appComponent = shallowWithProps(AppComponent, {
         match: { ...ROUTER_MATCH, url: URLS.FOOSBALL },
-        isGameSelected: false,
+        selectedGame: null,
         gameNotFound: false,
       })
     })

diff --git a/frontend/src/app/__snapshots__/App.test.js.snap b/frontend/src/app/__snapshots__/App.test.js.snap
@@ -1,34 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AppComponent when game is not selected and not found renders with no button and message "Game 'foosball'" was not found 1`] = `
-<Fragment>
-  <Connect(HeaderComponent) />
-  <styled.div>
-    <styled.h2>
-      Game 'foosball' was not found!
-       
-    </styled.h2>
-  </styled.div>
-  <Footer />
-</Fragment>
-`;
-
-exports[`AppComponent when game is not selected but could be found renders header with no button and with message "Loading" 1`] = `
-<Fragment>
-  <Connect(HeaderComponent) />
-  <styled.div>
-    <styled.h2>
-      Loading...
-       
-    </styled.h2>
-  </styled.div>
-  <Footer />
-</Fragment>
-`;
-
-exports[`AppComponent when game is selected renders button Add Match in the header 1`] = `
+exports[`AppComponent when foosball is selected renders button "Add Match" and game title in the header 1`] = `
 <Fragment>
   <Connect(HeaderComponent)>
+    <span
+      id="title"
+    >
+      <Styled(Link)
+        to="/foosball"
+      >
+        FOOSBALL
+      </Styled(Link)>
+    </span>
     <styled.button
       onClick={[Function]}
     >
@@ -81,3 +64,29 @@ exports[`AppComponent when game is selected renders button Add Match in the head
   <Footer />
 </Fragment>
 `;
+
+exports[`AppComponent when game is not selected and not found renders with no button and message "Game 'foosball'" was not found 1`] = `
+<Fragment>
+  <Connect(HeaderComponent) />
+  <styled.div>
+    <styled.h2>
+      Game 'foosball' was not found!
+       
+    </styled.h2>
+  </styled.div>
+  <Footer />
+</Fragment>
+`;
+
+exports[`AppComponent when game is not selected but could be found renders header with no button and with message "Loading" 1`] = `
+<Fragment>
+  <Connect(HeaderComponent) />
+  <styled.div>
+    <styled.h2>
+      Loading...
+       
+    </styled.h2>
+  </styled.div>
+  <Footer />
+</Fragment>
+`;
diff --git a/frontend/src/app/components/header.js b/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>
-    <Logo><StyledLink to={'/'}><img src={logo} alt="logo" /></StyledLink></Logo>
-    <Button onClick={() => {changeTheme(theme)}}>Theme</Button>
+    <Logo/>
     {children}
+    <SimpleButton id="theme" onClick={() => {changeTheme(theme)}}>
+      { theme === ThemeTypes.Dark? <Brightness7Icon /> : <Brightness4Icon/> }
+    </SimpleButton>
   </Nav>
 )
 

diff --git a/frontend/src/app/components/logo.js b/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 = ({ className }) => (
+  <span className={className}>
+    <Link id='smalllogo' to={'/'}>
+      <img src={logoSmall} alt="logo" />
+    </Link>
+    <Link id='largelogo' to={'/'}>
+      <img src={logo} alt="logo" />
+    </Link>
+  </span>
+)
diff --git a/frontend/src/media/logo-small.png b/frontend/src/media/logo-small.png
diff --git a/frontend/src/styles/blocks/buttons.js b/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;
+  }
+`
diff --git a/frontend/src/styles/blocks/index.js b/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,
 }
diff --git a/frontend/src/styles/blocks/layout.js b/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;
   }
 `
 

diff --git a/frontend/src/styles/blocks/link.js b/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;

diff --git a/frontend/src/styles/blocks/logo.js b/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;
   }
 `
diff --git a/frontend/src/styles/variables.js b/frontend/src/styles/variables.js
@@ -4,6 +4,8 @@ export const variables = {
 
   bpMedium: '600px',
 
+  bpSmall: '420px',
+
   // Grid Layout vars
   GridGap: '1rem',
   DefaultGridTemplateColums: '1fr',