style(ui): style histogram, adjust alignment on Match page, add futuristic font

index.html

@@ -73,6 +73,10 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@400;600;700;800&display=swap"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/icon?family=Material+Icons"

src/components/Api/Api.tsx

@@ -15,6 +15,7 @@ const path = "/keys";
 const ApiContainer = styled.div`
   width: 80%;
   margin: 6vh auto 0;
+  font-family: ${constants.fontFamilyFuturistic};
 
   @media only screen and (max-width: 768px) {
     width: 100%;
@@ -25,7 +26,7 @@ const ApiContainer = styled.div`
   }
 
   & h1 {
-    font-family: ${constants.fontFamilySerif};
+    font-family: ${constants.fontFamilyFuturistic};
     font-weight: 400;
 
     @media only screen and (max-width: 768px) {
@@ -254,10 +255,16 @@ class KeyManagement extends React.Component<
               <ButtonGroup>
                 {showLoginButton ? (
                   <Button
-                    variant="contained"
+                    variant="outlined"
                     startIcon={<IconSteam />}
                     href={`${config.VITE_API_HOST}/login`}
                     style={{ margin: "5px 5px" }}
+                    sx={{
+                      backgroundColor: constants.primarySurfaceColor,
+                      "&:hover": {
+                        backgroundColor: constants.primarySurfaceColor,
+                      },
+                    }}
                   >
                     {strings.api_login}
                   </Button>

src/components/App/App.tsx

@@ -40,7 +40,7 @@ const darkTheme = createTheme({
           display: "flex-inline",
           alignItems: "center",
           textTransform: "none",
-          fontFamily: constants.fontFamilySerif,
+          fontFamily: constants.fontFamilyFuturistic,
           fontSize: constants.fontSizeSmall,
           fontWeight: 300,
           "&:hover": {

src/components/App/AppLogo.tsx

@@ -28,7 +28,13 @@ const AppLogo = ({ size, onClick }: AppLogoProps) => {
       to="/"
       onClick={onClick}
     >
-      <span style={{ fontSize: size, whiteSpace: "nowrap" }}>
+      <span
+        style={{
+          fontFamily: constants.fontFamilyFuturistic,
+          fontSize: size,
+          whiteSpace: "nowrap",
+        }}
+      >
         {strings.app_name && `<${strings.app_name}/>`}
       </span>
     </StyledLink>

src/components/Footer/Footer.tsx

@@ -126,6 +126,10 @@ const StyledFooter = styled.footer`
     }
   }
 
+  .about {
+    font-family: ${constants.fontFamilyFuturistic};
+  }
+
   @media only screen and (max-width: 960px) {
     padding: 20px 25px 15px;
     flex-direction: column;

src/components/Footer/PageLinks.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import useStrings from "../../hooks/useStrings.hook";
+import constants from "../constants";
 
 const PageLinks = () => {
   const strings = useStrings();
@@ -37,6 +38,10 @@ const PageLinks = () => {
           key={link.path}
           target="_blank"
           rel="noopener noreferrer"
+          style={{
+            fontFamily: constants.fontFamilyFuturistic,
+            fontSize: constants.fontSizeSmall,
+          }}
         >
           {link.name}
         </a>

src/components/GamemodeToggle/GamemodeToggle.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { FormControlLabel, Switch } from "@mui/material";
 
 import { useStrings } from "../../hooks/useStrings.hook";
+import constants from "../constants";
 
 const GamemodeToggle = () => {
   const strings = useStrings();
@@ -25,9 +26,15 @@ const GamemodeToggle = () => {
   return (
     <FormControlLabel
       label={strings.app_show_turbo_stats}
+      sx={{
+        "& .MuiFormControlLabel-label": {
+          fontFamily: constants.fontFamilyFuturistic,
+          fontSize: constants.fontSizeSmall,
+        },
+      }}
       control={
         <Switch
-          color="primary"
+          size="small"
           checked={modeFilter === "turbo"}
           onChange={handleToggle}
         />

src/components/Header/Header.tsx

@@ -112,13 +112,23 @@ const DrawerLink = styled(Link)`
     background-color: rgba(0, 0, 0, 0.08);
     transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
+
+  span {
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeSmall};
+  }
+`;
+
+const LinkGroupLink = styled(Link)`
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeSmall} !important;
 `;
 
 const LinkGroup = ({ navbarPages }: { navbarPages: any[] }) => (
   <VerticalAlignToolbar>
     {navbarPages.map((page: any) => (
       <TabContainer key={page.key}>
-        <Link to={page.to}>{page.label}</Link>
+        <LinkGroupLink to={page.to}>{page.label}</LinkGroupLink>
         {Boolean(page.feature) && (
           <div
             style={{

src/components/Heading/Styled.tsx

@@ -19,7 +19,7 @@ export const StyledDiv = styled.div`
     letter-spacing: 10px;
     font-weight: bold;
     background-color: rgba(14, 84, 113, 37%);
-    font-family: ${constants.fontFamilySerif};
+    font-family: ${constants.fontFamilyFuturistic};
   }
 
   .winner {
@@ -73,8 +73,8 @@ export const StyledDiv = styled.div`
     display: flex;
     align-items: center;
     gap: 8px;
-    font-family: ${constants.fontFamilySerif};
-    font-size: 1rem;
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeCommon};
     font-weight: 400;
     letter-spacing: 0.002em;
     line-height: 1.6;
@@ -86,8 +86,9 @@ export const StyledDiv = styled.div`
   }
 
   .subtitle {
-    margin-left: 4px;
-    font-size: 13px;
+    margin-left: 8px;
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeSmall};
     color: ${constants.colorGreyMuted};
     letter-spacing: normal;
     font-weight: normal;

src/components/Hero/AttributesBlock.tsx

@@ -9,6 +9,8 @@ const AttributesWrapper = styled.div`
   display: flex;
   margin-left: -8px;
   margin-right: -8px;
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeSmall};
 
   @media screen and (max-width: ${constants.wrapMobile}) {
     flex-wrap: wrap;

src/components/Hero/BenchmarkGraph.tsx

@@ -7,10 +7,10 @@ import {
   Tooltip,
   Area,
   AreaChart,
-  CartesianGrid,
   ResponsiveContainer,
 } from "recharts";
 import constants from "../constants";
+import Grid from "../Visualizations/Graph/Grid";
 
 const Wrapper = styled.div`
   box-sizing: border-box;
@@ -47,6 +47,7 @@ const tooltipWrapperStyle = {
 };
 
 const tooltipContentStyle = {
+  fontFamily: constants.fontFamilyFuturistic,
   background: "transparent",
   border: 0,
 };
@@ -78,9 +79,29 @@ const BenchmarkGraph = ({ data }: { data: any }) => {
               <stop offset="100%" stopColor={data.color} stopOpacity="0" />
             </linearGradient>
           </defs>
-          <CartesianGrid stroke="rgba(255, 255, 255, .1)" strokeDasharray="0" />
-          <XAxis dataKey="Percentage" />
-          <YAxis />
+          <Grid />
+          <XAxis
+            dataKey="Percentage"
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              fill: "#B0B0B0",
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
+          />
+          <YAxis
+            width={50}
+            tick={{
+              fontFamily: constants.fontFamilySerif,
+              fontSize: 13,
+              fill: "#B0B0B0",
+            }}
+            tickFormatter={(value) => value?.toLocaleString()}
+            axisLine={false}
+            tickLine={false}
+          />
           <Area
             dataKey="Value"
             name={data.title}

src/components/Hero/Header.tsx

@@ -73,6 +73,7 @@ const HeroAvatar = styled.img`
 `;
 
 const HeroName = styled.div`
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: 40px;
   font-weight: ${constants.fontWeightMedium};
   line-height: 40px;
@@ -85,7 +86,8 @@ const HeroName = styled.div`
 
 const HeroRoleInformations = styled.div`
   color: ${constants.primaryTextColor};
-  font-size: 12px;
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeSmall};
   letter-spacing: 1px;
   margin: 8px 0;
   text-transform: uppercase;

src/components/Hero/Hero.tsx

@@ -24,6 +24,8 @@ const HeroBlock = styled.div`
 `;
 
 const HeroFooter = styled.div`
+  margin-top: 8px;
+  padding: 8px 0;
   text-align: center;
 `;
 
@@ -159,7 +161,10 @@ class Hero extends React.Component<HeroProps> {
               title={strings.tab_players}
               subtitle={strings.hero_disclaimer_pro}
             />
-            <Players {...props} />
+            <Players
+              {...props}
+              loadingText={`Loading ${hero?.localized_name} players...`}
+            />
           </div>
         ),
         route: `/heroes/${tabsHeroId}/players`,

src/components/Hero/ItemSuggestion.tsx

@@ -54,7 +54,7 @@ function ItemSuggestion(props: ItemSuggestionProps) {
   ];
   const itemsPopularityData = props.data;
   return props.isLoading ? (
-    <TableSkeleton />
+    <TableSkeleton text="Loading item suggestions..." />
   ) : (
     <Table data={itemsPopularityData} columns={itemSuggestionColumns} />
   );

src/components/Hero/Players.tsx

@@ -9,6 +9,7 @@ import { proPlayersSelector } from "../../reducers/selectors";
 
 class Players extends React.Component<{
   isLoading: boolean;
+  loadingText?: string;
   data: {
     account_id: number;
     games_played: number;
@@ -32,7 +33,7 @@ class Players extends React.Component<{
   }
 
   render() {
-    const { data, isLoading, proPlayers, strings } = this.props;
+    const { data, isLoading, proPlayers, strings, loadingText } = this.props;
 
     const playersColumns = [
       {
@@ -66,7 +67,7 @@ class Players extends React.Component<{
     ];
 
     if (isLoading) {
-      return <PlayersSkeleton />;
+      return <PlayersSkeleton loadingText={loadingText} />;
     }
 
     const preparedData = data

src/components/Home/Buttons.tsx

@@ -3,6 +3,7 @@ import { Button } from "@mui/material";
 import { connect } from "react-redux";
 import { IconSteam } from "../Icons";
 import config from "../../config";
+import constants from "../constants";
 
 import { HomePageProps } from "./Home";
 import useStrings from "../../hooks/useStrings.hook";
@@ -13,9 +14,15 @@ const Buttons = ({ user }: HomePageProps) => {
     <div>
       {!user && (
         <Button
-          variant="contained"
+          variant="outlined"
           startIcon={<IconSteam />}
           href={`${config.VITE_API_HOST}/login`}
+          sx={{
+            backgroundColor: constants.primarySurfaceColor,
+            "&:hover": {
+              backgroundColor: constants.primarySurfaceColor,
+            },
+          }}
         >
           {strings.home_login}
         </Button>

src/components/Home/Sponsors.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Button } from "@mui/material";
 import styled from "styled-components";
 import config from "../../config";
-
 import useStrings from "../../hooks/useStrings.hook";
 
 const StyledDiv = styled.div`

src/components/Home/Styled.tsx

@@ -16,7 +16,7 @@ export const HeadlineDiv = styled.div`
   margin-top: 10%;
   text-transform: uppercase;
   font-size: 4rem;
-  font-family: ${constants.fontFamilySerif};
+  font-family: ${constants.fontFamilyFuturistic};
   font-weight: ${constants.fontWeightMedium};
   line-height: 1.2;
   letter-spacing: 0.02em;
@@ -36,6 +36,7 @@ export const HeadlineDiv = styled.div`
   }
 `;
 export const DescriptionDiv = styled.div`
+  font-family: ${constants.fontFamilyFuturistic};
   font-weight: ${constants.fontWeightLight};
   margin-bottom: 20px;
   text-shadow: #000 0 0 3px;
@@ -61,10 +62,11 @@ export const ButtonContainer = styled.div`
   }
 `;
 export const BottomTextDiv = styled.div`
+  font-family: ${constants.fontFamilyFuturistic};
   font-size: ${constants.fontSizeMedium};
-  opacity: 0.6;
   font-weight: ${constants.fontWeightLight};
   text-align: right;
+  opacity: 0.6;
 
   @media only screen and (max-width: 425px) {
     text-align: center;

src/components/Home/Why.tsx

@@ -37,12 +37,13 @@ const StyledDiv = styled.div`
 
       & .headline {
         margin-top: 8px;
-        font-family: ${constants.fontFamilySerif};
+        font-family: ${constants.fontFamilyFuturistic};
         font-size: 1.25rem;
         line-height: 2;
       }
 
       & .description {
+        font-family: ${constants.fontFamilyFuturistic};
         font-size: 0.875rem;
         font-weight: ${constants.fontWeightLight};
         line-height: 1.5;