diff --git a/src/components/ControlPanel.js b/src/components/ControlPanel.js index 8d90619..341ce45 100644 --- a/src/components/ControlPanel.js +++ b/src/components/ControlPanel.js @@ -67,7 +67,7 @@ export const ControlPanel = ({ zoomOut }) => ( - + changeTheme(e.target.value)} value={theme}> @@ -75,7 +75,7 @@ export const ControlPanel = ({ - + Zoom: {zoom} @@ -84,7 +84,7 @@ export const ControlPanel = ({ - + FPS: {fps} diff --git a/src/components/Tooltip.js b/src/components/Tooltip.js index 2fb2bfd..a9a3ab9 100644 --- a/src/components/Tooltip.js +++ b/src/components/Tooltip.js @@ -11,6 +11,7 @@ export const Tooltip = styled.div` margin-top: 0.5rem; padding: ${({ theme }) => theme.tooltip.padding}; box-shadow: 1px 1px 3px ${({ theme }) => theme.tooltip.shadowColor}; + right: 0; ${props => props.hover ? css` diff --git a/src/containers/Snake.js b/src/containers/Snake.js index 4f8fb6c..ca5dcd2 100644 --- a/src/containers/Snake.js +++ b/src/containers/Snake.js @@ -22,6 +22,7 @@ import ControlPanel from "../components/ControlPanel.js"; import Scoreboard from "../components/Scoreboard.js"; import Stage from "../components/Stage.js"; import SnakePart from "../components/SnakePart.js"; +import Button, { ButtonContainer } from "../components/Button.js"; import Apple from "../components/Apple.js"; import Banner from "../components/Banner.js"; import Highscore from "../components/Highscore.js"; @@ -87,7 +88,14 @@ const Snake = ({ (cell.type === "snake" && ) } - {!started && Press 'r' to start the game} + {!started && ( + +

Press 'r' to start the game

+ + + +
+ )} {died && lastGameId !== gameId && hasHighscore(score) && ( )} diff --git a/src/theming/GlobalStyle.js b/src/theming/GlobalStyle.js index be01aa4..340c4b9 100644 --- a/src/theming/GlobalStyle.js +++ b/src/theming/GlobalStyle.js @@ -18,6 +18,19 @@ const GlobalStyle = createGlobalStyle` font-family: Lato; } + // firefox + @-moz-document url-prefix() { + select { + text-indent: -2px + } + } + + // Edge + @supports (-ms-ime-align: auto) { + select { + text-indent: -2px + } + } `; export default GlobalStyle;