Tighten and simplify padding, highlighting, and help icon.

BattlesnakeOfficial · Jul 28, 2021 · 10837d0 · 10837d0
1 parent 1822f9d
commit 10837d0
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 62 deletions.
diff --git a/src/components/avatar.jsx b/src/components/avatar.jsx
@@ -4,16 +4,10 @@ import { breakpoints, colors, themes } from "../theme";
 import { getReadableCauseOfDeath } from "../utils/engine-client";
 
 const AvatarWrapper = styled("div")`
-  margin-bottom: 0.5rem;
-  padding-bottom: 1rem;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
 
-  @media (min-width: ${breakpoints.lg}) {
-    margin-bottom: 1rem;
-  }
-
   opacity: ${props => (props.isEliminated ? "0.5" : "1.0")};
 `;
 
@@ -51,12 +45,11 @@ const Latency = styled("span")(({ theme, latency }) => ({
 }));
 
 const HealthBarWrapper = styled("div")({
-  marginTop: "1rem",
+  marginTop: "0.2rem",
   width: "100%",
-  height: "1.8rem",
+  height: "1.0rem",
   background: colors.healthBarBackground,
-  borderRadius: "1.5rem",
-  border: `2px solid ${colors.healthBarBackground}`
+  borderRadius: "1.5rem"
 });
 
 const HealthBar = styled("div")(({ color }) => ({
@@ -66,11 +59,10 @@ const HealthBar = styled("div")(({ color }) => ({
 }));
 
 const CauseOfDeath = styled("div")(({ theme }) => ({
-  marginTop: "1rem",
   width: "100%",
-  height: "1.8rem",
+  height: "2.2rem",
   padding: ".2rem 0",
-  fontSize: "1.5rem",
+  fontSize: "1rem",
   lineHeight: "1.3rem",
   color: theme === themes.dark ? colors.lightText : colors.darkText
 }));
@@ -83,25 +75,27 @@ class Avatar extends React.Component {
           <Name>{this.props.snake.name}</Name>
           <Length>{this.props.snake.body.length}</Length>
         </NameWrapper>
-        <AuthorWrapper>
-          <Author>by {this.props.snake.author}</Author>
-          <Latency latency={this.props.snake.latency}>
-            {this.props.snake.latency} ms
-          </Latency>
-        </AuthorWrapper>
         {this.props.snake.death ? (
           <CauseOfDeath theme={this.props.theme}>
             {getReadableCauseOfDeath(this.props.snake.death)}
           </CauseOfDeath>
         ) : (
-          <HealthBarWrapper>
-            <HealthBar
-              color={this.props.snake.color}
-              style={{
-                width: `${this.props.snake.health}%`
-              }}
-            />
-          </HealthBarWrapper>
+          <div>
+            <AuthorWrapper>
+              <Author>by {this.props.snake.author}</Author>
+              <Latency latency={this.props.snake.latency}>
+                {this.props.snake.latency} ms
+              </Latency>
+            </AuthorWrapper>
+            <HealthBarWrapper>
+              <HealthBar
+                color={this.props.snake.color}
+                style={{
+                  width: `${this.props.snake.health}%`
+                }}
+              />
+            </HealthBarWrapper>
+          </div>
         )}
       </AvatarWrapper>
     );

diff --git a/src/components/game.jsx b/src/components/game.jsx
@@ -26,12 +26,11 @@ const GameBoardWrapper = styled("div")({
   display: "flex",
   justifyContent: "space-between",
   width: "100%",
-  height: "100%"
+  height: "100%",
+  padding: "10px"
 });
 
 const BoardTitle = styled("div")(({ theme }) => ({
-  paddingLeft: "2rem",
-  paddingTop: "1rem",
   fontSize: "2.5rem",
   fontWeight: "600",
   textAlign: "center",
@@ -42,9 +41,7 @@ const HeaderWrapper = styled("div")`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  padding-right: 1rem;
+  margin: 0.5rem 0;
   text-align: center;
 
   @media (min-width: ${breakpoints.xxl}) {
@@ -78,7 +75,7 @@ const TurnCount = styled("div")`
 `;
 const TurnCountValue = styled("span")`
   display: inline-block;
-  width: 8rem;
+  width: 6rem;
 `;
 
 const BoardWrapper = styled("div")`
@@ -95,14 +92,15 @@ const BoardWrapper = styled("div")`
 const ScoreboardWrapper = styled("div")`
   display: none;
   width: 40vw;
-  margin-left: 2rem;
+  margin: 0 2rem;
 
   @media (min-width: ${breakpoints.md}) {
     display: ${({ hide }) => (hide ? "none" : "block")};
   }
 `;
 
 const Ruleset = styled("p")`
+  margin: 0.25rem;
   width: 100%;
   font-size: 1.2rem;
   text-align: center;

diff --git a/src/components/mediaControls.jsx b/src/components/mediaControls.jsx
@@ -6,30 +6,14 @@ import { themes, breakpoints } from "../theme";
 
 const MediaControlsWrapper = styled("div")`
   display: ${({ hide }) => (hide ? "none" : "block")};
-  margin-top: 1rem;
+  margin-top: 0.5rem;
   width: 100%;
 `;
 
 const KeyboardShortcutsWrapper = styled("div")({
-  position: "relative",
-  marginLeft: "1rem"
+  position: "relative"
 });
 
-const ShortcutsPaneTrigger = styled("div")`
-  margin: 0;
-  padding: 1rem;
-  height: 3rem;
-  width: 3rem;
-  background: #dfdfdf;
-  border-radius: 50%;
-  line-height: 0.5;
-  text-align: center;
-
-  &:hover {
-    cursor: pointer;
-  }
-`;
-
 const ShortcutsPane = styled("div")`
   position: absolute;
   bottom: 2.5rem;
@@ -59,8 +43,7 @@ const ShortcutsPane = styled("div")`
 const ButtonWrapper = styled("div")({
   display: "flex",
   justifyContent: "center",
-  width: "100%",
-  marginBottom: "2rem"
+  width: "100%"
 });
 
 const Button = styled("button")`
@@ -209,9 +192,9 @@ class MediaControls extends React.Component {
             onKeyEvent={this.handleKeyEvent}
           />
           <KeyboardShortcutsWrapper>
-            <ShortcutsPaneTrigger onClick={this.handleShortcutPaneShowToggle}>
-              ?
-            </ShortcutsPaneTrigger>
+            <Button onClick={this.handleShortcutPaneShowToggle} theme={theme}>
+              <span className="material-icons icon-image-preview">help</span>
+            </Button>
             {!this.state.paneHidden && (
               <ShortcutsPane>
                 <h4>Keyboard shortcuts</h4>

diff --git a/src/components/scoreboard.jsx b/src/components/scoreboard.jsx
@@ -30,7 +30,6 @@ const orderSnakes = snakes => {
 
 const Wrapper = styled("div")`
   display: none;
-  padding-right: 2rem;
   color: ${({ theme }) =>
     theme === themes.dark ? colors.lightText : colors.darkText};
   font-weight: 600;
@@ -48,14 +47,14 @@ const Wrapper = styled("div")`
 `;
 
 const AvatarWrapper = styled("div")`
+  padding: 0.75rem;
   transition: background-color 0.2s, box-shadow 0.2s;
-  box-shadow: ${props =>
-    props.highlighted ? `0 0 0 1px ${colors.lightText}` : null};
-
+  border: 2px solid ${props => (props.highlighted ? "#888" : "transparent")};
   &:hover {
     background-color: ${props =>
       props.theme === themes.dark ? colors.purple : colors.light};
     cursor: pointer;
+    border-color: #888;
   }
 `;