UI cleanup (#3534)

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air-2.local>

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -228,6 +228,7 @@ const AddOnDashboard: React.FC<Props> = ({
                           }
                         />
                         <Text size={14}>{app.name}</Text>
+                        <Spacer inline x={2} />
                       </Container>
                       <StatusIcon src={healthy} />
                       <Container row>

dashboard/src/main/home/app-dashboard/expanded-app/metrics/AreaChart.tsx

@@ -331,6 +331,7 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
                     left={10}
                     scale={valueScale}
                     hideAxisLine={true}
+                    numTicks={6}
                     hideTicks={true}
                     tickLabelProps={() => ({
                         fill: "white",

dashboard/src/main/home/app-dashboard/expanded-app/metrics/MetricsSection.tsx

@@ -16,6 +16,7 @@ import MetricsChart from "./MetricsChart";
 import { useQuery } from "@tanstack/react-query";
 import Loading from "components/Loading";
 import CheckboxRow from "components/CheckboxRow";
+import Spacer from "components/porter/Spacer";
 
 type PropsType = {
   currentChart: ChartType;
@@ -267,11 +268,14 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
       return null;
     }
     return (
-      <CheckboxRow
-        toggle={() => setShowAutoscalingThresholds(!showAutoscalingThresholds)}
-        checked={showAutoscalingThresholds}
-        label="Show Autoscaling Thresholds"
-      />
+      <>
+        <Spacer inline x={1} />
+        <CheckboxRow
+          toggle={() => setShowAutoscalingThresholds(!showAutoscalingThresholds)}
+          checked={showAutoscalingThresholds}
+          label="Show autoscaling thresholds"
+        />
+      </>
     )
   }
 
@@ -329,6 +333,7 @@ const MetricsHeader = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
+  margin-bottom: 10px;
   overflow: visible;
   justify-content: space-between;
 `;
@@ -343,6 +348,7 @@ const RangeWrapper = styled.div`
 const StyledMetricsSection = styled.div`
   width: 100%;
   display: flex;
+  margin-top: -20px;
   flex-direction: column;
   position: relative;
 `;
@@ -351,9 +357,9 @@ const Highlight = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-top: 20px;
   margin-left: 8px;
   margin-bottom: 15px;
-  margin-top: 20px;
   color: ${(props: { color: string }) => props.color};
   cursor: pointer;
 

dashboard/src/main/home/navbar/Help.tsx

@@ -35,7 +35,6 @@ export default class Help extends Component<PropsType, StateType> {
               <i className="material-icons-outlined">book</i>
               Documentation
             </Option>
-            <Line />
             <Option
               onClick={() => {
                 window.open("https://discord.gg/Vbse9vJtPU", "_blank").focus();
@@ -102,14 +101,6 @@ const Option = styled.div`
   }
 `;
 
-const Line = styled.div`
-  height: 1px;
-  z-index: 0;
-  left: 0;
-  background: #aaaabb55;
-  width: 100%;
-`;
-
 const CloseOverlay = styled.div`
   position: fixed;
   width: 100vw;
@@ -129,8 +120,8 @@ const Flex = styled.div`
 const Dropdown = styled.div`
   position: absolute;
   right: 0;
-  top: calc(100% + 5px);
-  background: #26282f;
+  top: calc(100% + 15px);
+  background: #121212;
   width: ${(props: {
     dropdownWidth: string;
     dropdownMaxHeight: string;
@@ -141,11 +132,11 @@ const Dropdown = styled.div`
     dropdownMaxHeight: string;
     feedbackSent?: boolean;
   }) => (props.dropdownMaxHeight ? props.dropdownMaxHeight : "300px")};
-  border-radius: 10px;
+  border-radius: 5px;
   z-index: 999;
   overflow-y: auto;
   margin-bottom: 20px;
-  box-shadow: 0 8px 20px 0px #00000088;
+  border: 1px solid #494B4F;
   animation: ${(props: {
     dropdownWidth: string;
     dropdownMaxHeight: string;

dashboard/src/main/home/navbar/Navbar.tsx

@@ -2,6 +2,9 @@ import React, { Component } from "react";
 import styled from "styled-components";
 import { Context } from "shared/Context";
 
+import userIcon from "assets/user-icon.png"
+import settings from "assets/settings-bold.png";
+
 import Feedback from "./Feedback";
 import Help from "./Help";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
@@ -40,7 +43,7 @@ class Navbar extends Component<PropsType, StateType> {
               }
             >
               <SettingsIcon>
-                <i className="material-icons">settings</i>
+                <Icon src={settings} />
               </SettingsIcon>
               Account settings
             </UserDropdownButton>
@@ -62,14 +65,13 @@ class Navbar extends Component<PropsType, StateType> {
     return (
       <StyledNavbar>
         <Help />
-        {this.renderFeedbackButton()}
         <NavButton
           selected={this.state.showDropdown}
           onClick={() =>
             this.setState({ showDropdown: !this.state.showDropdown })
           }
         >
-          <I className="material-icons">account_circle</I>
+          <Img src={userIcon} selected={this.state.showDropdown} />
           {this.renderSettingsDropdown()}
         </NavButton>
       </StyledNavbar>
@@ -81,6 +83,13 @@ Navbar.contextType = Context;
 
 export default withAuth(Navbar);
 
+const Icon = styled.img`
+  height: 15px;
+  margin-right: 10px;
+  opacity: 0.6;
+  margin-bottom: -3px;
+`;
+
 const VersionTag = styled.div`
   position: absolute;
   right: 10px;
@@ -108,6 +117,16 @@ const I = styled.i`
   margin-right: 7px;
 `;
 
+const Img = styled.img<{ selected: boolean }>`
+  height: 16px;
+  opacity: ${props => props.selected ? "1" : "0.6"};
+  margin-right: 10px; 
+  border-radius: 5px;
+  :hover {
+    opacity: 1;
+  }
+`;
+
 const CloseOverlay = styled.div`
   position: fixed;
   width: 100vw;
@@ -124,7 +143,7 @@ const UserDropdownButton = styled.button`
   height: 40px;
   font-size: 13px;
   font-family: "Work Sans", sans-serif;
-  color: white;
+  color: #ffffff88;
   width: 100%;
   border: 0;
   text-align: left;
@@ -135,7 +154,16 @@ const UserDropdownButton = styled.button`
     outline: 0;
   }
   :hover {
-    background: #ffffff11;
+    color: #fff;
+    > i {
+      color: #fff;
+      border: 1px solid #fff;
+    }
+    > div {
+      > img {
+        opacity: 100%;
+      }
+    }
   }
   display: flex;
   align-items: center;
@@ -168,8 +196,8 @@ const DropdownLabel = styled.div`
 const Dropdown = styled.div`
   position: absolute;
   right: 0;
-  top: calc(100% + 5px);
-  background: #26282f;
+  top: calc(100% + 15px);
+  background: #121212;
   width: ${(props: {
     dropdownWidth: string;
     dropdownMaxHeight: string;
@@ -180,11 +208,11 @@ const Dropdown = styled.div`
     dropdownMaxHeight: string;
     feedbackSent?: boolean;
   }) => (props.dropdownMaxHeight ? props.dropdownMaxHeight : "300px")};
-  border-radius: 3px;
+  border-radius: 5px;
   z-index: 999;
+  border: 1px solid #494B4F;
   overflow-y: auto;
   margin-bottom: 20px;
-  box-shadow: 0 8px 20px 0px #00000088;
   animation: ${(props: {
     dropdownWidth: string;
     dropdownMaxHeight: string;