Update board font, tweak spacing.

BattlesnakeOfficial · Jul 28, 2021 · 25ae55a · 25ae55a
1 parent 10837d0
commit 25ae55a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/public/index.css b/public/index.css
@@ -12,9 +12,7 @@ html {
 body {
  margin: 0;
  padding: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
- "Segoe UI Symbol";
+ font-family: "Poppins", -apple-system, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.15;

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="%PUBLIC_URL%/index.css">
  <title>Battlesnake</title>

diff --git a/src/components/game.jsx b/src/components/game.jsx
@@ -31,9 +31,10 @@ const GameBoardWrapper = styled("div")({
 });
 
 const BoardTitle = styled("div")(({ theme }) => ({
- fontSize: "2.5rem",
+ fontSize: "2rem",
  fontWeight: "600",
  textAlign: "center",
+ textTransform: "uppercase",
  color: theme === themes.dark ? colors.lightText : colors.darkText
 }));
 
@@ -64,8 +65,9 @@ const LogoWrapper = styled("div")`
 `;
 
 const TurnCount = styled("div")`
- font-size: 1.8rem;
+ font-size: 2rem;
  font-weight: 600;
+ text-transform: uppercase;
  color: ${({ theme }) =>
  theme === themes.dark ? colors.lightText : colors.darkText};
 
@@ -92,7 +94,7 @@ const BoardWrapper = styled("div")`
 const ScoreboardWrapper = styled("div")`
  display: none;
  width: 40vw;
- margin: 0 2rem;
+ padding: 0 2rem;
 
  @media (min-width: ${breakpoints.md}) {
  display: ${({ hide }) => (hide ? "none" : "block")};
@@ -192,7 +194,7 @@ class Game extends React.Component {
  highlightSnake={this.props.highlightSnake}
  theme={this.props.theme}
  />
- <Ruleset>Game Ruleset: {this.props.ruleset.name}</Ruleset>
+ <Ruleset>Rules: {this.props.ruleset.name}</Ruleset>
  </ScoreboardWrapper>
  )}
  </GameBoardWrapper>