From fe6f2fea7de4f9ad0223f1a8f02a48ec9febd3a0 Mon Sep 17 00:00:00 2001
From: Igor <nemytyshew@yandex.ru>
Date: Mon, 5 Apr 2021 20:30:06 +0300
Subject: [PATCH] Font-family for headings (#358)

* Rubik for all headings

* Font for headings
---
 app/calendar/components/EventInfo.tsx  |  4 +--
 app/plus/components/PlusVotingPage.tsx |  4 +--
 components/common/Markdown.tsx         | 36 +++-----------------------
 components/u/AvatarWithInfo.tsx        |  4 +--
 pages/_app.tsx                         |  5 ++++
 pages/about.tsx                        |  4 +--
 pages/linking-info.tsx                 |  4 +--
 pages/markdown.tsx                     |  2 +-
 pages/play/index.tsx                   |  4 +--
 pages/sr/player/[id].tsx               |  2 +-
 pages/t/[team].tsx                     |  4 +--
 11 files changed, 19 insertions(+), 54 deletions(-)

diff --git a/app/calendar/components/EventInfo.tsx b/app/calendar/components/EventInfo.tsx
index 581cadb69..7b5a1a251 100644
--- a/app/calendar/components/EventInfo.tsx
+++ b/app/calendar/components/EventInfo.tsx
@@ -57,9 +57,7 @@ const TournamentInfo = ({ event, edit }: EventInfoProps) => {
       <Box textAlign="center">
         <Box>
           {imgSrc && <Image src={imgSrc} width={36} height={36} />}
-          <Heading fontFamily="'Rubik', sans-serif" size="lg">
-            {event.name}
-          </Heading>
+          <Heading size="lg">{event.name}</Heading>
           {event.tags.length > 0 && (
             <Flex flexWrap="wrap" justifyContent="center" mt={3} mb={2}>
               {event.tags.map((tag) => {
diff --git a/app/plus/components/PlusVotingPage.tsx b/app/plus/components/PlusVotingPage.tsx
index 7130d43c2..1b28b6fe0 100644
--- a/app/plus/components/PlusVotingPage.tsx
+++ b/app/plus/components/PlusVotingPage.tsx
@@ -104,9 +104,7 @@ export default function PlusVotingPage() {
         </Box>
       ) : (
         <Flex align="center" justify="center" height="6.8rem">
-          <Heading fontFamily="'Rubik', sans-serif">
-            +{plusStatus.membershipTier} Voting
-          </Heading>
+          <Heading>+{plusStatus.membershipTier} Voting</Heading>
         </Flex>
       )}
       {currentUser && (
diff --git a/components/common/Markdown.tsx b/components/common/Markdown.tsx
index d6fdae526..96a71fd2a 100644
--- a/components/common/Markdown.tsx
+++ b/components/common/Markdown.tsx
@@ -148,14 +148,7 @@ const Markdown: React.FC<MarkdownProps> = ({
 
         if (smallHeaders) {
           return (
-            <Heading
-              as="h3"
-              mt={2}
-              mb={1}
-              size="md"
-              {...getCoreProps(props)}
-              fontFamily="'Rubik', sans-serif"
-            >
+            <Heading as="h3" mt={2} mb={1} size="md" {...getCoreProps(props)}>
               {children}
             </Heading>
           );
@@ -163,14 +156,7 @@ const Markdown: React.FC<MarkdownProps> = ({
 
         if (props.level === 1) {
           return (
-            <Heading
-              as="h1"
-              mt={8}
-              mb={4}
-              size="2xl"
-              {...getCoreProps(props)}
-              fontFamily="'Rubik', sans-serif"
-            >
+            <Heading as="h1" mt={8} mb={4} size="2xl" {...getCoreProps(props)}>
               {children}
             </Heading>
           );
@@ -178,28 +164,14 @@ const Markdown: React.FC<MarkdownProps> = ({
 
         if (props.level === 2) {
           return (
-            <Heading
-              as="h2"
-              mt={4}
-              mb={2}
-              size={"lg"}
-              {...getCoreProps(props)}
-              fontFamily="'Rubik', sans-serif"
-            >
+            <Heading as="h2" mt={4} mb={2} size={"lg"} {...getCoreProps(props)}>
               {children}
             </Heading>
           );
         }
 
         return (
-          <Heading
-            as="h3"
-            mt={2}
-            mb={1}
-            size="md"
-            {...getCoreProps(props)}
-            fontFamily="'Rubik', sans-serif"
-          >
+          <Heading as="h3" mt={2} mb={1} size="md" {...getCoreProps(props)}>
             {children}
           </Heading>
         );
diff --git a/components/u/AvatarWithInfo.tsx b/components/u/AvatarWithInfo.tsx
index 4a185a79f..9f17d65ec 100644
--- a/components/u/AvatarWithInfo.tsx
+++ b/components/u/AvatarWithInfo.tsx
@@ -68,9 +68,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
         />
         <Flex flexDirection="column" justifyContent="center" mb="0.5rem">
           <Flex alignItems="center" justifyContent="center" my="0.2rem">
-            <Heading fontFamily="'Rubik', sans-serif" size="lg">
-              {getFullUsername(user)}
-            </Heading>
+            <Heading size="lg">{getFullUsername(user)}</Heading>
           </Flex>
           {user.profile?.country && (
             <Flex align="center" mx="auto" my={1}>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index cae1adf7f..bca78ee08 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -82,6 +82,11 @@ const extendedTheme = extendTheme({
         colorScheme: "theme",
       },
     },
+    Heading: {
+      baseStyle: {
+        fontFamily: "'Rubik', sans-serif",
+      },
+    },
     Modal: {
       baseStyle: (props) => ({
         dialog: {
diff --git a/pages/about.tsx b/pages/about.tsx
index 4639387a9..b7351d310 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -19,7 +19,7 @@ const About = () => {
           Trello
         </MyLink>{" "}
         to see what is happening with development.
-        <Heading size="lg" mb="0.5em" fontFamily="'Rubik', sans-serif" mt="1em">
+        <Heading size="lg" mb="0.5em" mt="1em">
           <Trans>Feedback</Trans>
         </Heading>
         <Trans>
@@ -68,7 +68,7 @@ const About = () => {
         </List>
       </div>
       <div style={{ marginTop: "1em" }}>
-        <Heading size="lg" mb="0.5em" fontFamily="'Rubik', sans-serif">
+        <Heading size="lg" mb="0.5em">
           <Trans>Thanks to</Trans>
         </Heading>
         <ul style={{ marginLeft: "1.2em", marginTop: "0.5em" }}>
diff --git a/pages/linking-info.tsx b/pages/linking-info.tsx
index 3f477ea65..77c773deb 100644
--- a/pages/linking-info.tsx
+++ b/pages/linking-info.tsx
@@ -9,9 +9,7 @@ const LinkingInfoPage = ({}) => {
         <title>How to link placements | sendou.ink</title>
       </Head>
       <>
-        <Heading fontFamily="'Rubik', sans-serif" as="h1">
-          How to link
-        </Heading>
+        <Heading as="h1">How to link</Heading>
         This page explains how you can get your Top 500 and/or League placements
         linked to your sendou.ink user. You need to DM the bot{" "}
         <b>Lanista#5266</b> on{" "}
diff --git a/pages/markdown.tsx b/pages/markdown.tsx
index 92486157b..b969d5094 100644
--- a/pages/markdown.tsx
+++ b/pages/markdown.tsx
@@ -15,7 +15,7 @@ const MarkdownHelpPage = () => {
   return (
     <>
       <MyHead title="Markdown help" />
-      <Heading size="lg" mb="0.5em" fontFamily="'Rubik', sans-serif">
+      <Heading size="lg" mb="0.5em">
         Markdown help
       </Heading>
       <Box>
diff --git a/pages/play/index.tsx b/pages/play/index.tsx
index ffab3e502..9cd9f63af 100644
--- a/pages/play/index.tsx
+++ b/pages/play/index.tsx
@@ -54,9 +54,7 @@ const PlayPage: React.FC<Props> = ({ ladderDay }) => {
         <>
           {[1, 2].map((round) => (
             <Fragment key={round}>
-              <Heading size="md" fontFamily="'Rubik', sans-serif">
-                Round {round}
-              </Heading>
+              <Heading size="md">Round {round}</Heading>
               <SubText mt={4}>Maplist</SubText>
               {(ladderDay.matches.find((match) => match.order === round)!
                 .maplist as any[]).map(({ stage, mode }, i) => {
diff --git a/pages/sr/player/[id].tsx b/pages/sr/player/[id].tsx
index e44b33f6f..7cc37bf2a 100644
--- a/pages/sr/player/[id].tsx
+++ b/pages/sr/player/[id].tsx
@@ -48,7 +48,7 @@ const SalmonRunPlayerPage = (props: Props) => {
           .map((category) => {
             return (
               <Box key={category} mt={4}>
-                <Heading as="h2" size="md" fontFamily="'Rubik', sans-serif">
+                <Heading as="h2" size="md">
                   {/* @ts-ignore */}
                   {salmonRunCategoryToNatural[category]}
                 </Heading>
diff --git a/pages/t/[team].tsx b/pages/t/[team].tsx
index 57172ff2d..7111f9f6a 100644
--- a/pages/t/[team].tsx
+++ b/pages/t/[team].tsx
@@ -142,9 +142,7 @@ const TeamPage: React.FC<Props> = (props) => {
         {team.twitterName && (
           <TwitterAvatar twitterName={team.twitterName} size="lg" mr={2} />
         )}
-        <Heading fontFamily="'Rubik', sans-serif" textAlign="center">
-          {team.name}
-        </Heading>
+        <Heading textAlign="center">{team.name}</Heading>
 
         {team.twitterName && (
           <a href={`https://twitter.com/${team.twitterName}`}>