style(match-page): style averages/maximums and counts section in match-page

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;

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.colorHeaderSection};
     font-family: ${constants.fontFamilyFuturistic};
   }
 

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.colorHeaderSection};
 
   .matchInfo {
     display: grid;

src/components/Player/Header/PlayerButtons.tsx

@@ -54,14 +54,19 @@ class PlayerButtons extends React.Component<
       <Styled>
         <div data-hint={strings.app_refresh} data-hint-position="top">
           <Button
-            startIcon={<RefreshIcon style={{ marginRight: 4 }} />}
+            startIcon={<RefreshIcon />}
             disabled={this.state.disableRefresh}
             onClick={() => {
               fetch(`${config.VITE_API_HOST}/api/players/${playerId}/refresh`, {
                 method: "POST",
               });
               this.setState({ disableRefresh: true });
             }}
+            sx={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "4px",
+            }}
           >
             {strings.app_refresh_label}
           </Button>

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.colorHeaderSection};
   grid-template-columns: 1fr minmax(min-content, ${constants.appWidth}px) 1fr;
 
   .container {

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<string, { label: string; data: any[] }>;
+}) => (
   <Styled>
-    <div className="gauge-container">
-      {data.map((el) => (
-        <GaugeChart
-          number={el.matches}
-          percent={el.winPercent}
-          caption={el.category}
-        />
-      ))}
-    </div>
+    {Object.values(data).flatMap((group) => (
+      <Group>
+        <GroupLabel>{group.label}</GroupLabel>
+        <ChartPair>
+          {group.data.map((el: any) => (
+            <GaugeChart
+              key={`${group.label}-${el.category}`}
+              number={el.matches}
+              percent={el.winPercent}
+              caption={el.category}
+            />
+          ))}
+        </ChartPair>
+      </Group>
+    ))}
   </Styled>
 );
 

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;
@@ -112,7 +113,7 @@ type OverviewProps = {
   peersData: any[];
   peersLoading: boolean;
   peersError: string;
-  countsData: any[];
+  countsData: Record<string, { label: string; data: any[] }>;
   countsLoading: boolean;
   countsError: string;
   location: {
@@ -160,7 +161,7 @@ const Overview = ({
     <OverviewContainer>
       <Collapsible
         name="playerSummary"
-        initialMaxHeight={800}
+        initialMaxHeight={1200}
         buttonStyle={{ top: 8 }}
       >
         <Spacer variant="1" />
@@ -370,13 +371,28 @@ const filterCounts = (counts: Record<string, any>) => {
     }
   });
 
-  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) => ({

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
@@ -62,7 +94,7 @@ const SummOfRecMatches = ({ matchesData }: { matchesData: any[] }) => {
           color = "red";
           break;
         case "assists":
-          color = "lightGray";
+          color = "colorNeutralTier3";
           break;
         case "gold_per_min":
           color = "golden";
@@ -91,52 +123,51 @@ const SummOfRecMatches = ({ matchesData }: { matchesData: any[] }) => {
 
   return (
     <div>
-      <ul>
+      <BulletList>
         {winrate ? (
-          <li>
-            <span>{strings.th_winrate}</span>
+          <StyledBulletListItem>
+            <Label>{strings.th_winrate}</Label>
             <p>{winrate}%</p>
-          </li>
-        ) : null}{" "}
+          </StyledBulletListItem>
+        ) : null}
         {Object.keys(computed).map((key) => {
           const c = computed[key];
 
           if (c.avg) {
             const hero = heroes[c.max.heroId as keyof Heroes] || {};
             return (
-              <li key={key}>
-                <span>{strings[`heading_${key}` as keyof Strings]}</span>
-                <Link to={`/matches/${c.max.matchId}`}>
-                  <p
-                    style={
-                      {
-                        color: constants[c.color as keyof typeof constants],
-                      } as React.CSSProperties
-                    }
-                  >
+              <StyledBulletListItem key={key}>
+                <Label>{strings[`heading_${key}` as keyof Strings]}</Label>
+                <StyledLink
+                  to={`/matches/${c.max.matchId}`}
+                  color={constants[c.color as keyof typeof constants] as string}
+                >
+                  <StatList>
                     {key === "duration"
                       ? formatSeconds(c.avg)
                       : abbreviateNumber(c.avg)}
-                    &nbsp;
-                    <span>
-                      {key === "duration"
-                        ? formatSeconds(c.max.value)
-                        : abbreviateNumber(c.max.value)}
-                      <HeroImage
-                        id={String(hero.id)}
-                        isIcon
-                        alt={hero.localized_name}
-                      />
-                    </span>
-                  </p>
-                </Link>
-              </li>
+                  </StatList>
+                  <span>
+                    {key === "duration"
+                      ? formatSeconds(c.max.value)
+                      : abbreviateNumber(c.max.value)}
+                  </span>
+                  <HeroImage
+                    id={String(hero.id)}
+                    isIcon
+                    alt={hero.localized_name}
+                    style={{
+                      width: 24,
+                      height: 24,
+                    }}
+                  />
+                </StyledLink>
+              </StyledBulletListItem>
             );
           }
-
           return null;
         })}
-      </ul>
+      </BulletList>
     </div>
   );
 };

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.colorHeaderSection};
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   width: 100vw;
   left: 50%;