From 670c3afcbba1cbdb7f79e167e9910db1abab7e7f Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Mon, 13 Jul 2026 18:17:07 +0800 Subject: [PATCH 1/9] refactor(Histogram): abstract getPercentileColor to utility.tsx --- .../Visualizations/Graph/HistogramGraph.tsx | 15 ++++----------- src/utility.tsx | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/src/components/Visualizations/Graph/HistogramGraph.tsx b/src/components/Visualizations/Graph/HistogramGraph.tsx index 679a0fb162..9b1d75c089 100644 --- a/src/components/Visualizations/Graph/HistogramGraph.tsx +++ b/src/components/Visualizations/Graph/HistogramGraph.tsx @@ -9,7 +9,7 @@ import { XAxis, YAxis, } from "recharts"; -import { formatGraphValueData, percentile } from "../../../utility"; +import { formatGraphValueData, getPercentileColor } from "../../../utility"; import { StyledTooltip, TooltipLabel, HistogramTooltipDiv } from "./Styled"; import Grid from "./Grid"; import useStrings from "../../../hooks/useStrings.hook"; @@ -30,10 +30,9 @@ const HistogramTooltipContent = ({ const data = payload && payload[0] && payload[0].payload; const winratePercentile = data && data?.games > 0 && data?.win / data?.games; const winratePercent = formatPercent(winratePercentile); - const grade = percentile(winratePercentile); const numWins = data?.win; const numLosses = data?.games - data?.win; - const color = String(constants[grade.color as keyof typeof constants]); + const color = getPercentileColor(winratePercentile); return ( @@ -115,14 +114,8 @@ const HistogramGraph = ({ {columns.map((entry) => { const { win, games, x } = entry; const percent = win / games; - const grade = percentile(percent); - const stroke = String( - constants[grade.color as keyof typeof constants], - ); - const color = String( - constants[grade.color as keyof typeof constants], - ); - return ; + const color = getPercentileColor(percent); + return ; })} diff --git a/src/utility.tsx b/src/utility.tsx index 81937eb068..358593b261 100644 --- a/src/utility.tsx +++ b/src/utility.tsx @@ -145,6 +145,12 @@ export const jsonFn = (json: any) => (arrayFn: any) => (fn: any) => //@ts-expect-error json[Object.keys(json)[arrayFn]((key, index) => fn(json[key], index))]; +/** + * Get percentile grade data for a proportion. + * + * @param pct Percent should be between 0 and 1.0. + * @returns Object containing `color` and `grade` for the percentile. + */ export const percentile = (pct: number) => { if (pct >= 0.8) { return { @@ -173,6 +179,18 @@ export const percentile = (pct: number) => { }; }; +/** + * Get color based on percentile. + * + * @param percent Percent should be between 0 and 1.0. + * @returns Color string for the percentile grade. + */ +export const getPercentileColor = (percent: number) => { + const grade = percentile(percent); + const color = String(constants[grade.color as keyof typeof constants]); + return color; +}; + export const IMAGESIZE_ENUM = { SMALL: { // ~10KB From 9414855126a657203bf4f02547903f8f225f302c Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Mon, 13 Jul 2026 21:17:33 +0800 Subject: [PATCH 2/9] style(PlayerPage): style average and maximum of recorded matches --- .../Player/Pages/Overview/Overview.tsx | 1 + .../Player/Pages/Overview/Summary.tsx | 83 +++++++++++++------ 2 files changed, 58 insertions(+), 26 deletions(-) diff --git a/src/components/Player/Pages/Overview/Overview.tsx b/src/components/Player/Pages/Overview/Overview.tsx index d5bd0ad795..bab00381f2 100644 --- a/src/components/Player/Pages/Overview/Overview.tsx +++ b/src/components/Player/Pages/Overview/Overview.tsx @@ -36,6 +36,7 @@ const SummaryContainer = styled(Container)` & ul { border: 1px solid rgb(0, 0, 0, 0.12); + border-radius: 2px; background-color: rgba(255, 255, 255, 0.03); margin: 0; padding-left: 5px; diff --git a/src/components/Player/Pages/Overview/Summary.tsx b/src/components/Player/Pages/Overview/Summary.tsx index 12ba668bc6..5d803b6b58 100644 --- a/src/components/Player/Pages/Overview/Summary.tsx +++ b/src/components/Player/Pages/Overview/Summary.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Link } from "react-router-dom"; import { heroes } from "dotaconstants"; +import styled from "styled-components"; import { isRadiant, sum, @@ -12,6 +13,37 @@ import constants from "../../../constants"; import HeroImage from "../../../Visualizations/HeroImage"; import useStrings from "../../../../hooks/useStrings.hook"; +const BulletList = styled.ul` + display: flex; + align-items: flex-start; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 0.5rem; +`; +const StyledBulletListItem = styled.li` + margin: 0 !important; + padding: 8px; + font-family: ${constants.fontFamilyFuturistic}; +`; +const Label = styled.span` + font-size: 0.7rem; +`; +const StyledLink = styled(Link)<{ color?: string }>` + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + color: ${(props) => props.color}; + &:hover { + filter: brightness(1.6); + } +`; +const StatList = styled.div` + display: flex; + align-items: center; + gap: 4px; +`; + const SummOfRecMatches = ({ matchesData }: { matchesData: any[] }) => { const strings = useStrings(); // initial values @@ -91,52 +123,51 @@ const SummOfRecMatches = ({ matchesData }: { matchesData: any[] }) => { return (
-
    + {winrate ? ( -
  • - {strings.th_winrate} + +

    {winrate}%

    -
    • - ) : null}{" "} + + ) : null} {Object.keys(computed).map((key) => { const c = computed[key]; if (c.avg) { const hero = heroes[c.max.heroId as keyof Heroes] || {}; return ( -
  • - {strings[`heading_${key}` as keyof Strings]} - -

    + + + + {key === "duration" ? formatSeconds(c.avg) : abbreviateNumber(c.avg)} -   {key === "duration" ? formatSeconds(c.max.value) : abbreviateNumber(c.max.value)} - -

    - -
    • + + + + ); } - return null; })} -
+
); }; From 70b725cd60813e85ccbdbb4b022ff2f4c62cf1b5 Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Mon, 13 Jul 2026 21:20:18 +0800 Subject: [PATCH 3/9] style(PlayerPage): style GaugeChart --- src/components/Visualizations/GaugeChart.tsx | 67 +++++++++++--------- 1 file changed, 36 insertions(+), 31 deletions(-) diff --git a/src/components/Visualizations/GaugeChart.tsx b/src/components/Visualizations/GaugeChart.tsx index 011d28fd43..51ae0c9db7 100644 --- a/src/components/Visualizations/GaugeChart.tsx +++ b/src/components/Visualizations/GaugeChart.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { abbreviateNumber } from "../../utility"; +import constants from "../constants"; const Styled = styled.div<{ percent?: number; meterColor?: string }>` font-size: 60%; @@ -69,63 +70,67 @@ const Styled = styled.div<{ percent?: number; meterColor?: string }>` } .percentage-indicator { - font: bold 1.25em/1.6 sans-serif; + font-family: ${constants.fontFamilyFuturistic}; + font-size: 0.6rem; + font-weight: 600; + letter-spacing: 0.04em; + line-height: 1.75; color: ${(props) => props.meterColor}; - - white-space: pre; - vertical-align: baseline; - user-select: none; + font-variant-numeric: tabular-nums; text-align: center; } .caption { - position: relative; + color: #9ca3af; + font-size: 9px; + font-weight: 500; + letter-spacing: 0.12em; text-align: center; - color: rgb(179, 179, 179); - font-size: 12px; - bottom: 5px; text-transform: uppercase; - width: 96px; - max-height: 16px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-top: 2px; + padding-bottom: 5px; } .win-number { + width: 24px; position: absolute; left: 0px; + font-family: ${constants.fontFamilyFuturistic}; + font-size: 0.95em; + font-weight: 500; + font-variant-numeric: tabular-nums; + color: #a8adb8; text-align: center; - color: rgb(144, 144, 144); - font-family: Tahoma; - width: 24px; ::before { + content: "W"; position: absolute; bottom: 1.8em; left: 8px; - content: "W"; - color: white; - text-shadow: 1px 1px black; + font-family: ${constants.fontFamilyFuturistic}; + color: ${constants.colorWhite}; + text-shadow: none; } } .loss-number { + width: 24px; position: absolute; right: 0px; + font-family: ${constants.fontFamilyFuturistic}; + font-size: 0.95em; + font-weight: 500; + font-variant-numeric: tabular-nums; + color: #a8adb8; text-align: center; - color: rgb(144, 144, 144); - font-family: Tahoma; - width: 24px; ::before { + content: "L"; position: absolute; bottom: 1.8em; right: 8px; - content: "L"; - color: white; - text-shadow: 1px 1px black; + font-family: ${constants.fontFamilyFuturistic}; + color: ${constants.colorWhite}; + text-shadow: none; } } `; @@ -134,13 +139,13 @@ const computeMeterPercent = (value: number) => 0.005 * value; const computeMeterColor = (value: number) => { if (value < 45) { - return "rgb(179,132,91)"; + return "#ef5350"; } else if (value < 50) { - return "rgb(156,148,96)"; + return "#ffa726"; } else if (value < 53) { - return "rgb(140,159,99)"; + return "#9ccc65"; } - return "rgb(117,176,103)"; + return "#66bb6a"; }; const GaugeChart = ({ From e4821d9bd0e389ecedb175919113ca83a9b742af Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Mon, 13 Jul 2026 22:28:44 +0800 Subject: [PATCH 4/9] style(PlayerPage): group charts by category --- .../Player/Pages/Overview/CountsSummary.tsx | 57 +++++++++++++------ .../Player/Pages/Overview/Overview.tsx | 33 ++++++++--- .../Player/Pages/Overview/Summary.tsx | 12 ++-- src/components/Visualizations/GaugeChart.tsx | 8 +++ 4 files changed, 78 insertions(+), 32 deletions(-) diff --git a/src/components/Player/Pages/Overview/CountsSummary.tsx b/src/components/Player/Pages/Overview/CountsSummary.tsx index b68a14d84f..fb5e07a794 100644 --- a/src/components/Player/Pages/Overview/CountsSummary.tsx +++ b/src/components/Player/Pages/Overview/CountsSummary.tsx @@ -5,16 +5,13 @@ import GaugeChart from "./../../../Visualizations/GaugeChart"; import constants from "../../../constants"; const Styled = styled.div` + position: relative; border: 1px solid rgb(0, 0, 0, 0.12); background-color: rgba(255, 255, 255, 0.03); overflow: hidden; - position: relative; - - .gauge-container { - justify-content: center; - display: flex; - flex-wrap: wrap; - } + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; @media only screen and (min-width: ${constants.appWidth}px) { .gauge-chart:nth-child(even)::after { @@ -28,18 +25,44 @@ const Styled = styled.div` } } `; +const Group = styled.div` + padding-bottom: 8px; + display: flex; + flex-direction: column; + align-items: center; +`; +const GroupLabel = styled.div` + padding: 8px 0; + font-family: ${constants.fontFamilyFuturistic}; + font-size: ${constants.fontSizeSmall}; + text-align: center; +`; +const ChartPair = styled.div` + display: flex; + flex-direction: row; +`; -const Summary = ({ data }: { data: any[] }) => ( +const Summary = ({ + data, +}: { + data: Record; +}) => ( -
- {data.map((el) => ( - - ))} -
+ {Object.values(data).flatMap((group) => ( + + {group.label} + + {group.data.map((el: any) => ( + + ))} + + + ))} ); diff --git a/src/components/Player/Pages/Overview/Overview.tsx b/src/components/Player/Pages/Overview/Overview.tsx index bab00381f2..0f7f8ddee6 100644 --- a/src/components/Player/Pages/Overview/Overview.tsx +++ b/src/components/Player/Pages/Overview/Overview.tsx @@ -113,7 +113,7 @@ type OverviewProps = { peersData: any[]; peersLoading: boolean; peersError: string; - countsData: any[]; + countsData: Record; countsLoading: boolean; countsError: string; location: { @@ -161,7 +161,7 @@ const Overview = ({ @@ -371,13 +371,28 @@ const filterCounts = (counts: Record) => { } }); - return [ - ...countMap.is_radiant, - ...countMap.game_mode, - ...countMap.region, - ...countMap.lane_role, - ...countMap.patch, - ]; + return { + game_mode: { + label: "Game Mode", + data: countMap.game_mode, + }, + is_radiant: { + label: "Team", + data: countMap.is_radiant, + }, + region: { + label: "Region", + data: countMap.region, + }, + lane_role: { + label: "Role", + data: countMap.lane_role, + }, + patch: { + label: "Patch", + data: countMap.patch, + }, + }; }; const mapStateToProps = (state: any) => ({ diff --git a/src/components/Player/Pages/Overview/Summary.tsx b/src/components/Player/Pages/Overview/Summary.tsx index 5d803b6b58..153b2bc83e 100644 --- a/src/components/Player/Pages/Overview/Summary.tsx +++ b/src/components/Player/Pages/Overview/Summary.tsx @@ -94,7 +94,7 @@ const SummOfRecMatches = ({ matchesData }: { matchesData: any[] }) => { color = "red"; break; case "assists": - color = "lightGray"; + color = "colorNeutralTier3"; break; case "gold_per_min": color = "golden"; @@ -146,12 +146,12 @@ const SummOfRecMatches = ({ matchesData }: { matchesData: any[] }) => { {key === "duration" ? formatSeconds(c.avg) : abbreviateNumber(c.avg)} - - {key === "duration" - ? formatSeconds(c.max.value) - : abbreviateNumber(c.max.value)} - + + {key === "duration" + ? formatSeconds(c.max.value) + : abbreviateNumber(c.max.value)} + ` text-shadow: none; } } + + .total-matches { + font-family: ${constants.fontFamilyFuturistic}; + font-size: 9px; + color: ${constants.colorGreyMuted}; + text-align: center; + } `; const computeMeterPercent = (value: number) => 0.005 * value; @@ -177,6 +184,7 @@ const GaugeChart = ({
{abbreviateNumber(Math.round((number / 100) * (100 - percent)))}
+
{number}
); From f2b4b06f38f7e2c0098aa47582c4658fd65f0650 Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Wed, 15 Jul 2026 01:25:17 +0800 Subject: [PATCH 5/9] style(PlayerButtons): vertically align icon with buttonText --- src/components/Player/Header/PlayerButtons.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Player/Header/PlayerButtons.tsx b/src/components/Player/Header/PlayerButtons.tsx index d27558be98..3bc756d265 100644 --- a/src/components/Player/Header/PlayerButtons.tsx +++ b/src/components/Player/Header/PlayerButtons.tsx @@ -54,7 +54,7 @@ class PlayerButtons extends React.Component<
From 3ee6a3ae3785163b19b85f7eb66a7146163c7423 Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Wed, 15 Jul 2026 07:57:50 +0800 Subject: [PATCH 6/9] refactor(colors): abstract colors to global file --- src/components/Header/Header.tsx | 2 +- src/components/Heading/Styled.tsx | 2 +- src/components/Match/MatchHeader/MatchHeader.tsx | 2 +- src/components/Player/Header/PlayerHeader.tsx | 2 +- src/components/TabBar/TabBar.tsx | 2 +- src/components/constants.ts | 2 ++ 6 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index eca783cbf9..d587de765a 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -74,7 +74,7 @@ const DropdownMenuItem = styled(MenuItem)` const ToolbarHeader = styled(Toolbar)` backdrop-filter: blur(16px); - background-color: rgba(19, 111, 149, 37%) !important; + background-color: ${constants.colorHeaderToolbar}; box-shadow: 2px 2px 3px -2px rgb(0 0 0 / 23%); width: 100%; z-index: 200; diff --git a/src/components/Heading/Styled.tsx b/src/components/Heading/Styled.tsx index 9518463f01..36fc6f4d41 100644 --- a/src/components/Heading/Styled.tsx +++ b/src/components/Heading/Styled.tsx @@ -18,7 +18,7 @@ export const StyledDiv = styled.div` align-items: baseline; letter-spacing: 10px; font-weight: bold; - background-color: rgba(14, 84, 113, 37%); + background-color: ${constants.colorOpenDotaBlue} font-family: ${constants.fontFamilyFuturistic}; } diff --git a/src/components/Match/MatchHeader/MatchHeader.tsx b/src/components/Match/MatchHeader/MatchHeader.tsx index 34f1ae1562..a92ba52668 100644 --- a/src/components/Match/MatchHeader/MatchHeader.tsx +++ b/src/components/Match/MatchHeader/MatchHeader.tsx @@ -20,7 +20,7 @@ const Styled = styled.header` left: 50%; right: 50%; padding-top: 35px; - background-color: rgba(14, 84, 113, 37%); + background-color: ${constants.colorOpenDotaBlue}; .matchInfo { display: grid; diff --git a/src/components/Player/Header/PlayerHeader.tsx b/src/components/Player/Header/PlayerHeader.tsx index 38217f12b2..c7a5402b93 100644 --- a/src/components/Player/Header/PlayerHeader.tsx +++ b/src/components/Player/Header/PlayerHeader.tsx @@ -19,7 +19,7 @@ const Styled = styled.div` right: 50%; display: grid; padding-top: 35px; - background-color: rgba(14, 84, 113, 37%); + background-color: ${constants.colorOpenDotaBlue}; grid-template-columns: 1fr minmax(min-content, ${constants.appWidth}px) 1fr; .container { diff --git a/src/components/TabBar/TabBar.tsx b/src/components/TabBar/TabBar.tsx index 146df2daf5..b7e4065e43 100644 --- a/src/components/TabBar/TabBar.tsx +++ b/src/components/TabBar/TabBar.tsx @@ -8,7 +8,7 @@ import { withRouter } from "react-router-dom"; const StyledMain = styled.main` position: relative; margin: 0px 0px 30px 0px; - background-color: rgba(14, 84, 113, 37%); + background-color: ${constants.colorOpenDotaBlue}; border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100vw; left: 50%; diff --git a/src/components/constants.ts b/src/components/constants.ts index bb1db85db3..d5fbf3fc0a 100644 --- a/src/components/constants.ts +++ b/src/components/constants.ts @@ -68,6 +68,8 @@ export default { colorBoxBlue: "rgba(71, 114, 179, 0.05)", colorGraphYellow: "rgb(223,217,94)", colorGraphBlue: "rgb(192,217,220)", + colorOpenDotaBlue: "rgba(14, 84, 113, 37%)", + colorHeaderToolbar: "rgba(19, 111, 149, 37%)", sliderTicksColor: "#757575", sliderTicksColorActive: "#337AB7", dividerColor: "rgb(52, 50, 50)", From 566b795366934d0bff26f3d5a018e119b4af24d9 Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Wed, 15 Jul 2026 08:02:53 +0800 Subject: [PATCH 7/9] style(ui): add teal/cyan color palette --- src/components/Heading/Styled.tsx | 2 +- src/components/Match/MatchHeader/MatchHeader.tsx | 2 +- src/components/Player/Header/PlayerHeader.tsx | 2 +- src/components/TabBar/TabBar.tsx | 2 +- src/components/constants.ts | 4 ++-- src/index.css | 9 ++++++--- 6 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/Heading/Styled.tsx b/src/components/Heading/Styled.tsx index 36fc6f4d41..d6e0207f29 100644 --- a/src/components/Heading/Styled.tsx +++ b/src/components/Heading/Styled.tsx @@ -18,7 +18,7 @@ export const StyledDiv = styled.div` align-items: baseline; letter-spacing: 10px; font-weight: bold; - background-color: ${constants.colorOpenDotaBlue} + background-color: ${constants.colorHeaderSection}; font-family: ${constants.fontFamilyFuturistic}; } diff --git a/src/components/Match/MatchHeader/MatchHeader.tsx b/src/components/Match/MatchHeader/MatchHeader.tsx index a92ba52668..376d8bb940 100644 --- a/src/components/Match/MatchHeader/MatchHeader.tsx +++ b/src/components/Match/MatchHeader/MatchHeader.tsx @@ -20,7 +20,7 @@ const Styled = styled.header` left: 50%; right: 50%; padding-top: 35px; - background-color: ${constants.colorOpenDotaBlue}; + background-color: ${constants.colorHeaderSection}; .matchInfo { display: grid; diff --git a/src/components/Player/Header/PlayerHeader.tsx b/src/components/Player/Header/PlayerHeader.tsx index c7a5402b93..d92a7bdc43 100644 --- a/src/components/Player/Header/PlayerHeader.tsx +++ b/src/components/Player/Header/PlayerHeader.tsx @@ -19,7 +19,7 @@ const Styled = styled.div` right: 50%; display: grid; padding-top: 35px; - background-color: ${constants.colorOpenDotaBlue}; + background-color: ${constants.colorHeaderSection}; grid-template-columns: 1fr minmax(min-content, ${constants.appWidth}px) 1fr; .container { diff --git a/src/components/TabBar/TabBar.tsx b/src/components/TabBar/TabBar.tsx index b7e4065e43..dab8d5760f 100644 --- a/src/components/TabBar/TabBar.tsx +++ b/src/components/TabBar/TabBar.tsx @@ -8,7 +8,7 @@ import { withRouter } from "react-router-dom"; const StyledMain = styled.main` position: relative; margin: 0px 0px 30px 0px; - background-color: ${constants.colorOpenDotaBlue}; + background-color: ${constants.colorHeaderSection}; border-bottom: 1px solid rgba(255, 255, 255, 0.1); width: 100vw; left: 50%; diff --git a/src/components/constants.ts b/src/components/constants.ts index d5fbf3fc0a..094f5aea2e 100644 --- a/src/components/constants.ts +++ b/src/components/constants.ts @@ -68,8 +68,8 @@ export default { colorBoxBlue: "rgba(71, 114, 179, 0.05)", colorGraphYellow: "rgb(223,217,94)", colorGraphBlue: "rgb(192,217,220)", - colorOpenDotaBlue: "rgba(14, 84, 113, 37%)", - colorHeaderToolbar: "rgba(19, 111, 149, 37%)", + colorHeaderSection: "rgba(14, 116, 144, 0.35)", + colorHeaderToolbar: " rgba(34, 211, 238, 0.25)", sliderTicksColor: "#757575", sliderTicksColorActive: "#337AB7", dividerColor: "rgb(52, 50, 50)", diff --git a/src/index.css b/src/index.css index c1ac92aa0a..b669c13075 100644 --- a/src/index.css +++ b/src/index.css @@ -25,10 +25,13 @@ li { list-style-type: none; } +:root { + --base-background: var(--opendota-blue); + --opendota-blue: #071f2b; +} + #root { - background-color: #192023; - background-image: -webkit-linear-gradient(to right, #1a2b3e, #141e30); - background-image: linear-gradient(to right, #1a2b3e, #141e30); + background: var(--base-background); color: rgba(255, 255, 255, 0.87); height: 100%; min-height: 100vh; From 39c6158feddf2f4d2c672253674ec8d02f8dca1e Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Wed, 15 Jul 2026 08:22:37 +0800 Subject: [PATCH 8/9] style(GaugeChart): update meter color to blue palette with contrast against base-background-color '#071f2b' --- src/components/Visualizations/GaugeChart.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Visualizations/GaugeChart.tsx b/src/components/Visualizations/GaugeChart.tsx index ea6de13873..9d1d68fc56 100644 --- a/src/components/Visualizations/GaugeChart.tsx +++ b/src/components/Visualizations/GaugeChart.tsx @@ -145,14 +145,14 @@ const Styled = styled.div<{ percent?: number; meterColor?: string }>` const computeMeterPercent = (value: number) => 0.005 * value; const computeMeterColor = (value: number) => { - if (value < 45) { - return "#ef5350"; - } else if (value < 50) { - return "#ffa726"; - } else if (value < 53) { - return "#9ccc65"; + if (value < 20) { + return "#1769AA"; + } else if (value < 40) { + return "#0078D4"; + } else if (value < 80) { + return "#149BD7"; } - return "#66bb6a"; + return "#50E6FF"; }; const GaugeChart = ({ From 0fbb7db27bb0751ffea8be889ef17e9c7a07e73e Mon Sep 17 00:00:00 2001 From: Mark Toh Date: Wed, 15 Jul 2026 08:50:38 +0800 Subject: [PATCH 9/9] style(ui): use blue color palette --- src/components/constants.ts | 4 ++-- src/index.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/constants.ts b/src/components/constants.ts index 094f5aea2e..faeaddf79e 100644 --- a/src/components/constants.ts +++ b/src/components/constants.ts @@ -68,8 +68,8 @@ export default { colorBoxBlue: "rgba(71, 114, 179, 0.05)", colorGraphYellow: "rgb(223,217,94)", colorGraphBlue: "rgb(192,217,220)", - colorHeaderSection: "rgba(14, 116, 144, 0.35)", - colorHeaderToolbar: " rgba(34, 211, 238, 0.25)", + colorHeaderSection: "rgba(14, 84, 113, 37%)", + colorHeaderToolbar: "rgba(19, 111, 149, 37%)", sliderTicksColor: "#757575", sliderTicksColorActive: "#337AB7", dividerColor: "rgb(52, 50, 50)", diff --git a/src/index.css b/src/index.css index b669c13075..db2f70a179 100644 --- a/src/index.css +++ b/src/index.css @@ -27,7 +27,7 @@ li { :root { --base-background: var(--opendota-blue); - --opendota-blue: #071f2b; + --opendota-blue: #171f37; } #root {