Font-family for headings (#358)

* Rubik for all headings

* Font for headings

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) => {

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 && (

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>
         );

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}>

pages/_app.tsx

@@ -82,6 +82,11 @@ const extendedTheme = extendTheme({
         colorScheme: "theme",
       },
     },
+    Heading: {
+      baseStyle: {
+        fontFamily: "'Rubik', sans-serif",
+      },
+    },
     Modal: {
       baseStyle: (props) => ({
         dialog: {

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" }}>

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{" "}

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>

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) => {

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>

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}`}>