diff options
Diffstat (limited to 'frontend/src')
-rw-r--r-- | frontend/src/components/game-browser/GameList.css | 2 | ||||
-rw-r--r-- | frontend/src/components/game-browser/GameList.jsx | 10 | ||||
-rw-r--r-- | frontend/src/components/game-browser/PlayerCount.css | 2 | ||||
-rw-r--r-- | frontend/src/components/game-browser/PlayerCount.jsx | 4 | ||||
-rw-r--r-- | frontend/src/components/home/ChooseNameForm.jsx | 5 | ||||
-rw-r--r-- | frontend/src/components/lobby/PlayerList.jsx | 4 | ||||
-rw-r--r-- | frontend/src/components/shared/IconButton.jsx | 19 |
7 files changed, 13 insertions, 33 deletions
diff --git a/frontend/src/components/game-browser/GameList.css b/frontend/src/components/game-browser/GameList.css index 6b29741f..a04e126c 100644 --- a/frontend/src/components/game-browser/GameList.css +++ b/frontend/src/components/game-browser/GameList.css @@ -1,3 +1,3 @@ -table.pt-html-table td { +tr.gameListRow td { vertical-align: middle; } diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.jsx index b46cd14c..b797a358 100644 --- a/frontend/src/components/game-browser/GameList.jsx +++ b/frontend/src/components/game-browser/GameList.jsx @@ -1,4 +1,5 @@ // @flow +import { Button, Classes } from '@blueprintjs/core' import type { List } from 'immutable'; import React from 'react'; import { connect } from 'react-redux'; @@ -6,7 +7,6 @@ import type { ApiLobby } from '../../api/model'; import type { GlobalState } from '../../reducers'; import { actions } from '../../redux/actions/lobby'; import { getAllGames } from '../../redux/games'; -import { IconButton } from '../shared/IconButton'; import './GameList.css'; import { GameStatus } from './GameStatus'; import { PlayerCount } from './PlayerCount'; @@ -17,7 +17,7 @@ type GameListProps = { }; const GameListPresenter = ({ games, joinGame }: GameListProps) => ( - <table className='pt-html-table'> + <table className={Classes.HTML_TABLE}> <thead> <GameListHeaderRow /> </thead> @@ -37,13 +37,13 @@ const GameListHeaderRow = () => ( ); const GameListItemRow = ({game, joinGame}) => ( - <tr> + <tr className="gameListRow"> <td>{game.name}</td> <td> <GameStatus state={game.state} /> </td> <td> - <PlayerCount nbPlayers={game.players.size} /> + <PlayerCount nbPlayers={game.players.length} /> </td> <td> <JoinButton game={game} joinGame={joinGame}/> @@ -54,7 +54,7 @@ const GameListItemRow = ({game, joinGame}) => ( const JoinButton = ({game, joinGame}) => { const disabled = game.state !== 'LOBBY'; const onClick = () => joinGame(game.id); - return <IconButton minimal disabled={disabled} icon='arrow-right' title='Join Game' onClick={onClick}/>; + return <Button minimal disabled={disabled} icon='arrow-right' title='Join Game' onClick={onClick}/>; }; const mapStateToProps = (state: GlobalState) => ({ diff --git a/frontend/src/components/game-browser/PlayerCount.css b/frontend/src/components/game-browser/PlayerCount.css index ca1a3723..d2f18e50 100644 --- a/frontend/src/components/game-browser/PlayerCount.css +++ b/frontend/src/components/game-browser/PlayerCount.css @@ -1,3 +1,3 @@ -svg.pt-icon, .playerCount { +.playerCountIcon, .playerCount { vertical-align: middle; } diff --git a/frontend/src/components/game-browser/PlayerCount.jsx b/frontend/src/components/game-browser/PlayerCount.jsx index aa9d1d2f..9a5306d6 100644 --- a/frontend/src/components/game-browser/PlayerCount.jsx +++ b/frontend/src/components/game-browser/PlayerCount.jsx @@ -8,6 +8,6 @@ type PlayerCountProps = { } export const PlayerCount = ({nbPlayers}: PlayerCountProps) => <div title='Number of players'> - <Icon icon="people" title={false} /> - <span className='playerCount'> {nbPlayers}</span> + <Icon className="playerCountIcon" icon="people" title={false} /> + <span className="playerCount"> {nbPlayers}</span> </div>; diff --git a/frontend/src/components/home/ChooseNameForm.jsx b/frontend/src/components/home/ChooseNameForm.jsx index 13f6034b..71279e35 100644 --- a/frontend/src/components/home/ChooseNameForm.jsx +++ b/frontend/src/components/home/ChooseNameForm.jsx @@ -1,9 +1,8 @@ // @flow -import { Classes, InputGroup, Intent } from '@blueprintjs/core'; +import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { actions } from '../../redux/actions/user'; -import { IconButton } from '../shared/IconButton'; type ChooseNameFormPresenterProps = { chooseUsername: (username: string) => void, @@ -33,7 +32,7 @@ class ChooseNameFormPresenter extends Component<ChooseNameFormPresenterProps> { } renderSubmit = () => ( - <IconButton className={Classes.MINIMAL} onClick={this.play} intent={Intent.PRIMARY} icon="arrow-right" /> + <Button className={Classes.MINIMAL} onClick={this.play} intent={Intent.PRIMARY} icon="arrow-right" /> ); } diff --git a/frontend/src/components/lobby/PlayerList.jsx b/frontend/src/components/lobby/PlayerList.jsx index bd37f40d..80212a3e 100644 --- a/frontend/src/components/lobby/PlayerList.jsx +++ b/frontend/src/components/lobby/PlayerList.jsx @@ -1,5 +1,5 @@ //@flow -import { Icon } from '@blueprintjs/core' +import { Classes, Icon } from '@blueprintjs/core' import { List } from 'immutable'; import * as React from 'react'; import { Flex } from 'reflexbox'; @@ -25,7 +25,7 @@ const PlayerListItem = ({player, isOwner, isUser}) => ( ); export const PlayerList = ({players, owner, currentPlayer}: PlayerListProps) => ( - <table className='pt-html-table'> + <table className={Classes.HTML_TABLE}> <tbody> {players.map(player => <PlayerListItem key={player.username} player={player} diff --git a/frontend/src/components/shared/IconButton.jsx b/frontend/src/components/shared/IconButton.jsx deleted file mode 100644 index 3031720a..00000000 --- a/frontend/src/components/shared/IconButton.jsx +++ /dev/null @@ -1,19 +0,0 @@ -//@flow -import { Button, Icon } from '@blueprintjs/core'; -import type { IconName } from '@blueprintjs/icons'; -import * as React from 'react'; - -type IconButtonProps = { - icon: IconName, - title?: string | false | null, - [string]: any, -} - -export const IconButton = ({icon, title, ...props}: IconButtonProps) => { - if (title) { - // this works around https://github.com/palantir/blueprint/issues/2321 - const iconWithoutTitle = <Icon icon={icon} title={false} />; - return <Button {...props} icon={iconWithoutTitle} title={title} />; - } - return <Button {...props} icon={icon} />; -}; |