odota · howardchung · Jul 5, 2026 · Jul 5, 2026 · Jul 5, 2026 · Jul 5, 2026
diff --git a/src/components/AccountWidget/AccountWidget.tsx b/src/components/AccountWidget/AccountWidget.tsx
@@ -32,15 +32,11 @@ const AccountWidget = ({
       {!error && !loading && user ? (
         <LoggedIn style={style} playerId={user.account_id} />
       ) : (
-        <Button href={`${config.VITE_API_HOST}/login`}>
-          <IconSteam />
-          <ButtonLabel
-            style={{
-              lineHeight: "1px",
-            }}
-          >
-            {strings.app_login}
-          </ButtonLabel>
+        <Button
+          startIcon={<IconSteam />}
+          href={`${config.VITE_API_HOST}/login`}
+        >
+          {strings.app_login}
         </Button>
       )}
     </div>

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -33,6 +33,30 @@ const darkTheme = createTheme({
   palette: {
     mode: "dark",
   },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          display: "flex-inline",
+          alignItems: "center",
+          textTransform: "none",
+          fontFamily: constants.fontFamilySerif,
+          fontSize: constants.fontSizeSmall,
+          fontWeight: 300,
+          "&:hover": {
+            backgroundColor: "transparent",
+            filter: "brightness(0.85)",
+          },
+        },
+        startIcon: {
+          marginRight: 2,
+          "& .MuiSvgIcon-root": {
+            fontSize: "1rem",
+          },
+        },
+      },
+    },
+  },
 });
 
 type AppStylesProps = {

diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Heading from "../Heading/Heading";
 import Error from "../Error/Error";
 import { LoadingOverlayUpper30 } from "../LoadingOverlay";
+import { Spacer } from "../Spacer/Spacer";
 
 type ContainerProps = {
   title?: string;
@@ -37,7 +38,12 @@ const Container = ({
       {title && <Heading title={title} subtitle={subtitle} titleTo={titleTo} />}
       {error && <Error />}
       {!error && loading && <LoadingOverlayUpper30 text={text} />}
-      {!error && !loading && children}
+      {!error && !loading && (
+        <>
+          <Spacer variant="1" />
+          {children}
+        </>
+      )}
     </div>
   ) : null;
 

diff --git a/src/components/Heading/Styled.tsx b/src/components/Heading/Styled.tsx
@@ -2,6 +2,9 @@ import styled from "styled-components";
 import constants from "../constants";
 
 export const StyledDiv = styled.div`
+  display: flex;
+  align-items: center;
+
   &.top-heading {
     width: 100vw;
     position: relative;
@@ -22,8 +25,11 @@ export const StyledDiv = styled.div`
   .winner {
     position: relative;
     bottom: 1px;
-    background: rgb(25, 25, 25);
+    color: ${constants.colorGreenDark};
+    background: ${constants.colorGreen};
+    border: 0px solid ${constants.colorGreen};
     font-size: 10px;
+    font-weight: 600;
     padding: 1px;
     padding-right: 4px;
     margin-left: 10px;
@@ -42,17 +48,14 @@ export const StyledDiv = styled.div`
     width: 0;
     position: absolute;
     pointer-events: none;
-    border-right-color: rgb(25, 25, 25);
+    border-right-color: ${constants.colorGreen};
     border-width: 8px;
     margin-top: -8px;
   }
 
   & svg {
     height: 20px !important;
     width: 20px !important;
-    position: relative;
-    margin-right: 6px;
-    top: 2px;
     opacity: 0.8;
     fill: ${constants.textColorPrimary};
   }
@@ -67,6 +70,9 @@ export const StyledDiv = styled.div`
   }
 
   .title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     font-family: ${constants.fontFamilySerif};
     font-size: 1rem;
     font-weight: 400;
@@ -82,7 +88,7 @@ export const StyledDiv = styled.div`
   .subtitle {
     margin-left: 4px;
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.5);
+    color: ${constants.colorGreyMuted};
     letter-spacing: normal;
     font-weight: normal;
     overflow-wrap: normal;

diff --git a/src/components/Home/Buttons.tsx b/src/components/Home/Buttons.tsx
@@ -12,15 +12,13 @@ const Buttons = ({ user }: HomePageProps) => {
   return (
     <div>
       {!user && (
-        <div>
-          <Button
-            variant="contained"
-            startIcon={<IconSteam />}
-            href={`${config.VITE_API_HOST}/login`}
-          >
-            {strings.home_login}
-          </Button>
-        </div>
+        <Button
+          variant="contained"
+          startIcon={<IconSteam />}
+          href={`${config.VITE_API_HOST}/login`}
+        >
+          {strings.home_login}
+        </Button>
       )}
     </div>
   );

diff --git a/src/components/Match/AbilityBuildTable.tsx b/src/components/Match/AbilityBuildTable.tsx
@@ -3,6 +3,7 @@ import { isRadiant, getTeamName } from "../../utility";
 import { IconRadiant, IconDire } from "../Icons";
 import Heading from "../Heading/Heading";
 import Table from "../Table/Table";
+import { Spacer } from "../Spacer/Spacer";
 
 const filterMatchPlayers = (players: MatchPlayer[], team = "") =>
   players
@@ -34,6 +35,7 @@ const AbilityBuildTable = ({
       title={`${getTeamName(radiantTeam, true)} - ${heading}`}
       icon={<IconRadiant />}
     />
+    <Spacer variant="1" />
     <Table
       data={filterMatchPlayers(players, "radiant")}
       columns={columns}
@@ -43,6 +45,7 @@ const AbilityBuildTable = ({
       title={`${getTeamName(direTeam, false)} - ${heading}`}
       icon={<IconDire />}
     />
+    <Spacer variant="1" />
     <Table
       data={filterMatchPlayers(players, "dire")}
       columns={columns}

diff --git a/src/components/Match/BuildingMap/BuildingMap.tsx b/src/components/Match/BuildingMap/BuildingMap.tsx
@@ -12,6 +12,7 @@ import buildingData733 from "./buildingData733";
 import constants from "../../constants";
 import config from "../../../config";
 import useStrings from "../../../hooks/useStrings.hook";
+import { Spacer } from "../../Spacer/Spacer";
 
 const buildingDataByPatch = [
   { patch: "7.33", data: buildingData733 },
@@ -560,6 +561,7 @@ const BuildingMap = ({ match }: { match: Match }) => {
   return (
     <StyledDiv>
       <Heading title={strings.heading_buildings} />
+      <Spacer variant="1" />
       <DotaMap startTime={match.start_time} maxWidth={300}>
         {icons}
         <div className="hero-icons radiant-safe">{radiantSafe}</div>

diff --git a/src/components/Match/Laning/Graph.tsx b/src/components/Match/Laning/Graph.tsx
@@ -19,6 +19,8 @@ import {
   StyledHolder,
 } from "../../Visualizations/Graph/Styled";
 import useStrings from "../../../hooks/useStrings.hook";
+import { Spacer } from "../../Spacer/Spacer";
+import constants from "../../constants";
 
 const formatGraphTime = (minutes: number) => `${minutes}:00`;
 
@@ -116,6 +118,7 @@ const Graph = (props: GraphProps) => {
     return (
       <StyledHolder>
         <Heading title={strings.heading_graph_cs} />
+        <Spacer variant="1" />
         <ResponsiveContainer width="100%" height={400}>
           <LineChart
             data={matchData}
@@ -126,9 +129,32 @@ const Graph = (props: GraphProps) => {
               bottom: 5,
             }}
           >
-            <XAxis dataKey="time" />
-            <YAxis mirror />
-            <CartesianGrid stroke="#505050" strokeWidth={1} opacity={0.5} />
+            <XAxis
+              dataKey="time"
+              tick={{
+                fontFamily: constants.fontFamilySerif,
+                fontSize: 12,
+                fill: constants.colorGreyMuted,
+              }}
+              axisLine={false}
+              tickLine={false}
+            />
+            <YAxis
+              mirror
+              tick={{
+                fontFamily: constants.fontFamilySerif,
+                fontSize: 12,
+                fill: constants.colorGreyMuted,
+              }}
+              axisLine={false}
+              tickLine={false}
+            />
+            <CartesianGrid
+              strokeWidth={1}
+              stroke="#2a2a2a"
+              strokeDasharray="3 3"
+              opacity={0.4}
+            />
 
             <Tooltip content={<CustomizedTooltip />} />
             {match.players.map((player) => {
@@ -158,7 +184,13 @@ const Graph = (props: GraphProps) => {
                 />
               );
             })}
-            <Legend />
+            <Legend
+              wrapperStyle={{
+                fontFamily: constants.fontFamilySerif,
+                fontSize: 13,
+                color: constants.colorGreyMuted,
+              }}
+            />
             <Brush endIndex={12} height={20} />
           </LineChart>
         </ResponsiveContainer>

diff --git a/src/components/Match/MatchHeader/MatchHeader.tsx b/src/components/Match/MatchHeader/MatchHeader.tsx
@@ -55,7 +55,7 @@ const Styled = styled.header`
     letter-spacing: 1px;
 
     @media only screen and (max-width: 1023px) {
-      margin: 10px 0;
+      margin: 10px 0 20px;
       justify-self: auto;
     }
 
@@ -128,10 +128,12 @@ const Styled = styled.header`
       font-family: ${constants.fontFamilySerif};
       font-size: ${constants.fontSizeSmall};
       letter-spacing: 0.02rem;
+      margin-top: -16px;
     }
 
     & .duration {
-      font-size: 28px;
+      margin-top: 6px;
+      font-size: 32px;
 
       @media only screen and (max-width: 400px) {
         font-size: 24px;
@@ -141,7 +143,7 @@ const Styled = styled.header`
     & .ended {
       font-size: ${constants.fontSizeSmall};
       color: ${constants.colorMutedLight};
-      margin-top: 3px;
+      margin-top: 6px;
 
       & > div {
         display: inline-block;
@@ -250,15 +252,15 @@ const Styled = styled.header`
       padding: 0px !important;
       padding-right: 4px !important;
     }
-    
+
     svg {
-      margin: 0px  !important;
-      margin-left: 4px  !important;
+      margin: 0px !important;
+      margin-left: 4px !important;
     }
 
     line-height: 0px !important;
     height: 20px !important;
-  },
+  }
 `;
 
 const getWinnerStyle = (radiantWin: boolean | undefined) => {
@@ -355,18 +357,14 @@ const MatchHeader = ({ match }: { match: Match }) => {
                     style={{ height: 18, width: 18 }}
                   />
                 }
-                sx={{
-                  fontFamily: constants.fontFamilySerif,
-                  fontSize: constants.fontSizeSmall,
-                }}
               >
                 {match.match_id}
               </Button>
             </li>
             <li>
               <span className="infoKey">{strings.match_region}</span>
               <span className="infoValue">
-                {strings[`region_${match.region}` as keyof Strings]}
+                {strings[`region_${match.region}` as keyof Strings] || "-"}
               </span>
             </li>
           </ul>

diff --git a/src/components/Match/Overview/Overview.tsx b/src/components/Match/Overview/Overview.tsx
@@ -9,6 +9,7 @@ import Collapsible from "../../Collapsible/Collapsible";
 import AbilityBuildTable from "../AbilityBuildTable";
 import DeferredContainer from "../../DeferredContainer/DeferredContainer";
 import config from "../../../config";
+import { Spacer } from "../../Spacer/Spacer";
 
 const Styled = styled.div`
   width: 100%;
@@ -73,6 +74,7 @@ export const getOverviewTab = (strings: Strings, beta = false) => {
             summable
           />
         )}
+        <Spacer variant="1" />
         <DeferredContainer>
           <Collapsible name="abilityBuilds" initialMaxHeight={800}>
             <AbilityBuildTable

diff --git a/src/components/Match/TeamTable.tsx b/src/components/Match/TeamTable.tsx
@@ -5,6 +5,7 @@ import { isRadiant, getTeamName } from "../../utility";
 import Heading from "../Heading/Heading";
 import Table from "../Table/Table";
 import PicksBans from "./Overview/PicksBans"; // Displayed only on `Overview` page
+import { Spacer } from "../Spacer/Spacer";
 
 const StyledDiv = styled.div`
   .teamtable {
@@ -161,12 +162,14 @@ class TeamTable extends React.Component<TeamTableProps> {
           buttonIcon={buttonIcon || ""}
           winner={!hideWinnerTag && radiantWin}
         />
+        <Spacer variant="1" />
         <div className="teamtable teamtable-radiant">
           <Table
             data={filterMatchPlayers(players, "radiant")}
             {...tableProps}
           />
         </div>
+        <Spacer variant="1" />
         {
           gameMode === 22 ? (
             <>
@@ -199,13 +202,16 @@ class TeamTable extends React.Component<TeamTableProps> {
             )
           ) /* team 0 - radiant */
         }
+        <Spacer variant="1" />
         <Heading
           title={`${getTeamName(direTeam, false)} - ${heading}`}
           winner={!hideWinnerTag && !radiantWin}
         />
+        <Spacer variant="1" />
         <div className="teamtable teamtable-dire">
           <Table data={filterMatchPlayers(players, "dire")} {...tableProps} />
         </div>
+        <Spacer variant="1" />
         {
           gameMode === 22 ? (
             <>