style(ui): adjust fonts for player-page totals tab, warning message, dotaplus icon and leaderboard badge

src/components/Alerts/Warning.tsx

@@ -11,8 +11,8 @@ const StyledDiv = styled.div`
   & svg {
     vertical-align: sub;
     margin-right: 5px;
-    width: 20px !important;
-    height: 20px !important;
+    width: 16px !important;
+    height: 16px !important;
     fill: ${constants.colorYelor} !important;
   }
   color: ${constants.colorYelor};

src/components/Container/Container.tsx

@@ -36,7 +36,12 @@ const Container = ({
   !hide ? (
     <div className={className} style={{ ...style }}>
       {title && <Heading title={title} subtitle={subtitle} titleTo={titleTo} />}
-      {error && <Error />}
+      {error && (
+        <>
+          <Spacer variant="1" />
+          <Error />
+        </>
+      )}
       {!error && loading && <LoadingOverlayUpper30 text={text} />}
       {!error && !loading && (
         <>

src/components/Error/Error.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 import { useStrings } from "../../hooks/useStrings.hook";
+import styled from "@emotion/styled";
+import constants from "../constants";
+
+const ErrorMessage = styled.div`
+  font-family: ${constants.fontFamilyFuturistic};
+  font-size: ${constants.fontSizeMedium};
+  color: ${constants.colorYelor};
+`;
 
 const Error = (props: { text?: string }) => {
   const strings = useStrings();
   return (
-    <div>
+    <ErrorMessage>
       Whoops! Something went wrong. (
       {props.text ? props.text : strings.general_unknown})
-    </div>
+    </ErrorMessage>
   );
 };
 

src/components/Form/FormField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { Autocomplete, Chip, TextField } from "@mui/material";
 import querystring from "querystring";
+import constants from "../constants";
 // import ChipList from './ChipList';
 // import constants from '../constants';
 
@@ -125,7 +126,29 @@ class FormField extends React.Component<FormFieldProps> {
           multiple={true}
           value={chipList}
           getOptionLabel={(option: any) => option.label}
-          renderInput={(params) => <TextField {...params} label={label} />}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label={label}
+              slotProps={{
+                inputLabel: {
+                  sx: {
+                    fontSize: constants.fontSizeSmall,
+                  },
+                },
+              }}
+              sx={{
+                "& .MuiOutlinedInput-root": {
+                  paddingTop: "2px",
+                  paddingBottom: "2px",
+                },
+                "& .MuiInputBase-input": {
+                  padding: "6px 10px",
+                  fontSize: constants.fontSizeSmall,
+                },
+              }}
+            />
+          )}
           renderValue={(value: any[], getItemProps) =>
             value.map((v, index) => {
               return (
@@ -137,13 +160,33 @@ class FormField extends React.Component<FormFieldProps> {
                     deleteChipFromUrl(name, index, history);
                     this.props.deleteChip && this.props.deleteChip(name, index);
                   }}
+                  sx={{
+                    height: 22,
+                    "& .MuiChip-label": {
+                      fontSize: constants.fontSizeSmall,
+                    },
+                    "& .MuiChip-deleteIcon": {
+                      fontSize: constants.fontSizeSmall,
+                    },
+                  }}
                 />
               );
             })
           }
           openOnFocus
           options={dataSource}
           onChange={this.handleSelect}
+          slotProps={{
+            listbox: {
+              sx: {
+                "& .MuiAutocomplete-option": {
+                  fontSize: constants.fontSizeSmall,
+                  padding: "4px 10px",
+                  minHeight: "unset",
+                },
+              },
+            },
+          }}
         />
         {/* <ChipList
           name={name}

src/components/Match/MatchHeader/MatchHeader.tsx

@@ -240,8 +240,10 @@ const Styled = styled.header`
   }
 
   .unparsed {
-    text-align: center;
     margin-top: 12px;
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeSmall};
+    text-align: center;
   }
 
   .copy-match-id {

src/components/Player/Header/PlayerHeader.tsx

@@ -116,10 +116,15 @@ const Styled = styled.div`
     }
 
     & img {
-      width: 65px;
-      height: 75px;
+      width: 52px;
+      height: 58px;
     }
   }
+
+  .rankMedal-board {
+    font-family: ${constants.fontFamilyFuturistic};
+    font-size: ${constants.fontSizeCommon} !important;
+  }
 `;
 
 const LARGE_IMAGE_SIZE = 124;

src/components/Player/Pages/Totals/Totals.tsx

@@ -5,12 +5,14 @@ import Card from "./Card";
 import { getPlayerTotals } from "../../../../actions";
 import Container from "../../../Container/Container";
 import useStrings from "../../../../hooks/useStrings.hook";
+import constants from "../../../constants";
 
 const CardContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
   margin-left: -8px;
   margin-right: -8px;
+  font-family: ${constants.fontFamilyFuturistic};
 `;
 
 const totalsToShow: Record<string, number | string> = {

src/components/Player/Player.tsx

@@ -9,6 +9,7 @@ import TableFilterForm from "./TableFilterForm";
 import PlayerHeader from "./Header/PlayerHeader";
 import playerPages from "./playerPages";
 import PlayerProfilePrivate from "./PlayerProfilePrivate";
+import { Spacer } from "../Spacer/Spacer";
 
 type PlayerProps = {
   officialPlayerName: string;
@@ -68,6 +69,7 @@ class Player extends React.Component<PlayerProps> {
         {isPlayerProfilePublic ? (
           <div>
             <TableFilterForm playerId={playerId} />
+            <Spacer variant="2" />
             {page ? (
               page.content(playerId, match.params, location)
             ) : (

src/index.css

@@ -193,15 +193,14 @@ th {
     }
   }
   & img {
-    width: 124px;
-    height: 124px;
+    width: 108px;
+    height: 108px;
   }
   & .rankMedal-board {
     position: absolute;
     align-self: center;
-    margin-top: 80px;
+    margin-top: 70px;
     margin-left: 1px;
-    font-size: 22px;
     color: #ecd9c8;
     text-shadow: 2px 2px 2px black;
   }