add font families to a number of components. resulting in a more attr…

…active home page
SmileyJames · Jun 28, 2021 · c2b2369 · c2b2369
1 parent b530a3d
commit c2b2369
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 7 deletions.
diff --git a/app/src/components/cta-card/CallToActionCard.js b/app/src/components/cta-card/CallToActionCard.js
@@ -27,7 +27,7 @@ const CallToActionCard = ({
       </Flex>
       <Box width={sizeToRightWidth(size)} m={3} pt={2}>
         <Heading>{headingText}</Heading>
-        <Text>{bodyText}</Text>
+        <Text fontFamily="body" as="p">{bodyText}</Text>
         <Flex justifyContent="end" mt={3}>
           <Button
             onClick={onAction}

diff --git a/app/src/components/host-form/HostForm.js b/app/src/components/host-form/HostForm.js
@@ -14,7 +14,7 @@ const HostForm = ({ compendium = [], onNewGame = () => {} }) => {
 
   return (
     <Box minWidth="10em" px={2} my={4} width={['60%', '50%', '20em']}>
-      <Label my={2}>
+      <Label fontFamily="body" my={2}>
         Choose a game to host...
       </Label>
       <Select my={2} onChange={onChange} value={value}>

diff --git a/app/src/components/join-form/JoinForm.js b/app/src/components/join-form/JoinForm.js
@@ -15,7 +15,7 @@ const JoinForm = ({ onJoinGame = () => {} }) => {
   return (
     <Box minWidth="10em" px={2} my={4} width={['60%', '50%', '20em']}>
       <Box>
-        <Label my={2}>
+        <Label fontFamily="body" my={2}>
 	  Enter the code to join a game
         </Label>
         <Input my={2} onChange={onChange} value={value}/>

diff --git a/app/src/components/navbar/NavBar.js b/app/src/components/navbar/NavBar.js
@@ -1,11 +1,10 @@
 import toPairs from "lodash/toPairs";
-import { useHistory } from "react-router-dom"
-import { Flex, Text, Link } from "rebass/styled-components";
+import { Flex, Heading, Link } from "rebass/styled-components";
 
 function NavHeading({ children }) {
   return (
     <Flex flexGrow={2} justifyContent="center" alignItems="center">
-      <Text>{children}</Text>
+      <Heading>{children}</Heading>
     </Flex>
   ) 
 }
@@ -19,6 +18,7 @@ function NavLink({ children, onKeyPress, onClick, href="#", ...rest }) {
   return (
     <Flex {...rest} py={2} px={3}>
       <Link
+        fontFamily="body"
         variant="nav"
         onClick={onClick && prepareHandler(onClick)}
         onKeyPress={onKeyPress && prepareHandler(onKeyPress)}

diff --git a/app/src/components/typed-banner/TypedBanner.js b/app/src/components/typed-banner/TypedBanner.js
@@ -3,7 +3,7 @@ import { Heading, Flex } from "rebass/styled-components";
 
 const TypedBanner = ({ typedSentences, stopped = false }) => (
   <Flex px="20%" py={5} my={4} backgroundColor="secondary">
-    <Heading color="muted" sx={{ userSelect: "none" }}>
+    <Heading fontFamily="body" color="muted" sx={{ userSelect: "none" }}>
       <ReactTyped
         strings={typedSentences}
         typeSpeed={50}