fix: font styling

GTBitsOfGood · Oct 30, 2023 · 2a63e10 · 2a63e10
1 parent 3d78384
commit 2a63e10
Show file tree

Hide file tree

Showing 27 changed files with 167 additions and 43 deletions.
diff --git a/src/components/AddStandard/AddStandardForm.jsx b/src/components/AddStandard/AddStandardForm.jsx
@@ -135,7 +135,14 @@ const AddStandardForm = () => {
       {({ handleSubmit, values }) => (
         <Box p={14} pb={14} w="full" as="form" onSubmit={handleSubmit}>
           <HStack>
-            <Heading as="h1" size="xl" color="Grey" textAlign="left" my={2}>
+            <Heading
+              as="h1"
+              size="xl"
+              color="#515254"
+              textAlign="left"
+              my={2}
+              fontFamily="Roboto Slab"
+            >
               Add a New Standard
             </Heading>
 

diff --git a/src/components/AddStandard/CreateTag.jsx b/src/components/AddStandard/CreateTag.jsx
@@ -37,7 +37,8 @@ const CreateTag = () => {
     <Box mb={4}>
       <FormLabel
         fontSize="xl"
-        color="#8C8C8C"
+        color="#51524"
+        fontFamily="'Europa-Bold', sans-serif"
         fontWeight="bold"
         textAlign="left"
         mb={1}

diff --git a/src/components/AddStandard/EditAddStandard.jsx b/src/components/AddStandard/EditAddStandard.jsx
@@ -40,14 +40,15 @@ const EditAddStandard = ({ handleSubmit }) => {
     capitalizeAndRemoveDash(buildingType.name)
   );
   return (
-    <Box>
+    <Box fontFamily="'Europa-Regular', sans-serif">
       <Box w="50%">
         <MassUpload name="massUpload" />
 
         <FormLabel
-          fontSize="xl"
+          fontSize="2xl"
           fontWeight="bold"
-          color="#8C8C8C"
+          fontFamily="'Europa-Bold', sans-serif"
+          color="#515254"
           mb={1}
           mt={5}
         >
@@ -76,7 +77,7 @@ const EditAddStandard = ({ handleSubmit }) => {
         />
       </Box>
 
-      <FormLabel fontSize="xl" fontWeight="bold" color="#8C8C8C" mb={1} mt={5}>
+      <FormLabel fontSize="xl" fontWeight="bold" color="#515254" mb={1} mt={5}>
         Tags
       </FormLabel>
 

diff --git a/src/components/ArchivedReportView/ArchivedReportView.jsx b/src/components/ArchivedReportView/ArchivedReportView.jsx
@@ -11,7 +11,13 @@ const ArchivedReportView = () => {
   console.log(archivedReports);
   return (
     <>
-      <Heading fontSize="1.5em">Completed Reports</Heading>
+      <Heading
+        fontSize="1.5em"
+        fontFamily="'Roboto Slab'
+      , serif"
+      >
+        Completed Reports
+      </Heading>
       {user?.isLoggedIn && (
         <Link
           href="/archived-reports"

diff --git a/src/components/FormComponents/Error.jsx b/src/components/FormComponents/Error.jsx
@@ -5,7 +5,11 @@ const Error = ({ name }) => {
   const {
     meta: { error },
   } = useField(name, { subscription: { error: true } });
-  return <FormErrorMessage>{error}</FormErrorMessage>;
+  return (
+    <FormErrorMessage fontFamily="'Europa-Regular', sans-serif">
+      {error}
+    </FormErrorMessage>
+  );
 };
 
 export default Error;
diff --git a/src/components/FormComponents/InputControl.jsx b/src/components/FormComponents/InputControl.jsx
@@ -8,7 +8,12 @@ const InputControl = ({ name, label, type, ...props }) => {
   return (
     <Control name={name}>
       <HStack>
-        <FormLabel htmlFor={name} m={0} color="Grey">
+        <FormLabel
+          htmlFor={name}
+          m={0}
+          color="Grey"
+          fontFamily="'Europa-Regular', sans-serif"
+        >
           {label}
         </FormLabel>
         <Error name={name} />
@@ -20,6 +25,7 @@ const InputControl = ({ name, label, type, ...props }) => {
         isInvalid={meta.error && meta.touched}
         id={name}
         type={type}
+        fontFamily="'Europa-Regular', sans-serif"
       />
     </Control>
   );

diff --git a/src/components/FormComponents/Multiselect.jsx b/src/components/FormComponents/Multiselect.jsx
@@ -12,7 +12,8 @@ const Multiselect = ({ name, label, entries }) => {
           m={0}
           fontSize="xl"
           fontWeight="bold"
-          color="#8C8C8C"
+          fontFamily="'Europa-Bold', sans-serif"
+          color="#515254"
         >
           {label}
         </FormLabel>

diff --git a/src/components/FormComponents/TextareaControl.jsx b/src/components/FormComponents/TextareaControl.jsx
@@ -15,12 +15,23 @@ const AdaptedTextarea = ({ input, meta, ...rest }) => (
 const TextareaControl = ({ name, label, ...props }) => (
   <Control name={name}>
     <HStack>
-      <FormLabel htmlFor={name} m={0} color="Grey">
+      <FormLabel
+        htmlFor={name}
+        m={0}
+        color="Grey"
+        fontFamily="'Europa-Regular', sans-serif"
+      >
         {label}
       </FormLabel>
       <Error name={name} />
     </HStack>
-    <Field name={name} component={AdaptedTextarea} id={name} {...props} />
+    <Field
+      name={name}
+      component={AdaptedTextarea}
+      id={name}
+      fontFamily="'Europa-Regular', sans-serif"
+      {...props}
+    />
   </Control>
 );
 

diff --git a/src/components/Login/LoginComponent/LoginComponent.jsx b/src/components/Login/LoginComponent/LoginComponent.jsx
@@ -23,8 +23,14 @@ const LoginComponent = () => {
   };
 
   return (
-    <Flex direction="column" height="65%" width="60%" gap="1em">
-      <Text fontSize="3xl" as="b">
+    <Flex
+      direction="column"
+      height="65%"
+      width="60%"
+      gap="1em"
+      fontFamily="Europa-Regular"
+    >
+      <Text fontSize="3xl" as="b" fontFamily="Roboto Slab">
         Login
       </Text>
       <Box>
@@ -46,7 +52,13 @@ const LoginComponent = () => {
           />
         </FormControl>
       </Box>
-      <Button width="100%" height="2.3em" variant="Blue" onClick={handleSubmit}>
+      <Button
+        width="100%"
+        height="2.3em"
+        variant="Blue"
+        onClick={handleSubmit}
+        fontFamily="Europa-Bold"
+      >
         Log In
       </Button>
       {/* <Center gap="0.3em">

diff --git a/src/components/Modals/BuildingTypeModal/BuildingTypeModal.jsx b/src/components/Modals/BuildingTypeModal/BuildingTypeModal.jsx
@@ -110,9 +110,15 @@ const BuildingTypeModal = ({ isOpen, onClose }) => {
         size={{ base: "xs", md: "2xl", lg: "4xl" }}
       >
         <ModalOverlay />
-        <ModalContent rounded={14}>
+        <ModalContent rounded={14} fontFamily="Europa-Regular">
           <ModalCloseButton right={2} top={0} m={4} />
-          <ModalHeader mt={8} mx={6} fontSize="4xl" color="#6D6E70">
+          <ModalHeader
+            mt={8}
+            mx={6}
+            fontSize="4xl"
+            color="#6D6E70"
+            fontFamily="Roboto Slab"
+          >
             Add A New Building Type
           </ModalHeader>
           <Form

diff --git a/src/components/Modals/CardModal/CardModal.jsx b/src/components/Modals/CardModal/CardModal.jsx
@@ -255,7 +255,7 @@ const CardModal = ({
       size={{ base: "xs", md: "2xl", lg: "4xl" }}
     >
       <ModalOverlay />
-      <ModalContent rounded={14}>
+      <ModalContent rounded={14} fontFamily="'Europa-Regular', sans-serif">
         <ModalCloseButton right={2} top={0} m={4} />
         <ModalHeader mt={10} mx={6}>
           <Flex
@@ -266,7 +266,9 @@ const CardModal = ({
             {editing ? (
               <InputControl name="title" size="lg"></InputControl>
             ) : (
-              <Heading mb={2}>{card.title}</Heading>
+              <Heading mb={2} fontFamily="'Roboto Slab', serif" color="#515254">
+                {card.title}
+              </Heading>
             )}
             {user?.isAdmin ? (
               !editing ? (
@@ -296,6 +298,7 @@ const CardModal = ({
                     whiteSpace="nowrap"
                     width="auto"
                     onClick={onDiscardChangesOpen}
+                    fontFamily="Europa-Bold"
                   >
                     Discard Changes
                   </Button>
@@ -310,6 +313,7 @@ const CardModal = ({
                     _active={{ bgColor: "#057b8f" }}
                     onClick={onSaveChangesOpen}
                     isDisabled={form.hasValidationErrors}
+                    fontFamily="Europa-Bold"
                   >
                     Save Changes
                   </Button>
@@ -602,6 +606,7 @@ const CardModal = ({
                     variant="Red"
                     size="lg"
                     onClick={onDeleteStandardOpen}
+                    fontFamily="Europa-Bold"
                   >
                     Delete Standard
                   </Button>
@@ -614,6 +619,7 @@ const CardModal = ({
                         setSelectedImage(0);
                         openImagePreviewCallback();
                       }}
+                      fontFamily="Europa-Bold"
                     >
                       View Notes
                     </Button>
@@ -622,6 +628,7 @@ const CardModal = ({
                       variant="Blue-rounded"
                       size="lg"
                       isDisabled={user?.isLoggedIn ? false : true}
+                      fontFamily="Europa-Bold"
                     >
                       {!selected
                         ? "Add to Report"

diff --git a/src/components/Modals/CardModal/ConfirmActionModal.jsx b/src/components/Modals/CardModal/ConfirmActionModal.jsx
@@ -53,7 +53,7 @@ const ConfirmActionModal = ({
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered={true}>
       <ModalOverlay />
-      <ModalContent rounded={14}>
+      <ModalContent rounded={14} fontFamily="Europa-Regular">
         <ModalHeader
           pt={10}
           display="flex"
@@ -81,6 +81,7 @@ const ConfirmActionModal = ({
               fontSize="md"
               width="auto"
               onClick={onClose}
+              fontFamily="Europa-Bold"
             >
               {abandonActionText}
             </Button>
@@ -91,6 +92,7 @@ const ConfirmActionModal = ({
               fontSize="md"
               width="auto"
               onClick={handleAction}
+              fontFamily="Europa-Bold"
             >
               {confirmActionText}
             </Button>

diff --git a/src/components/Modals/ConfirmActionModal/ConfirmActionModal.jsx b/src/components/Modals/ConfirmActionModal/ConfirmActionModal.jsx
@@ -32,7 +32,7 @@ const ConfirmActionModal = ({
     {...rest}
   >
     <ModalOverlay />
-    <ModalContent rounded={14} display="flex">
+    <ModalContent rounded={14} display="flex" fontFamily="Europa-Regular">
       <ModalHeader
         pt={10}
         display="flex"
@@ -65,6 +65,8 @@ const ConfirmActionModal = ({
             size="sm"
             fontSize="md"
             width="auto"
+            fontWeight="700"
+            fontFamily="Europa-Bold"
             onClick={handleCancelAction ? handleCancelAction : onClose}
           >
             {cancelButtonText}
@@ -74,6 +76,8 @@ const ConfirmActionModal = ({
             size="sm"
             fontSize="md"
             width="auto"
+            fontWeight="700"
+            fontFamily="Europa-Bold"
             onClick={handleAction}
           >
             {confirmButtonText}

diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
@@ -51,7 +51,14 @@ const NavBar = () => {
 
   const NavLinkAuth = (props) => {
     if (!user?.isLoggedIn) {
-      return <NavLink name="Login" href={urls.pages.login} {...props} />;
+      return (
+        <NavLink
+          fontFamily="Europa-Regular"
+          name="Login"
+          href={urls.pages.login}
+          {...props}
+        />
+      );
     } else {
       return (
         <Flex align="center">
@@ -218,6 +225,7 @@ const NavBar = () => {
               fontSize="lg"
               onClick={onCartOpen}
               style={shoppingCartButtonStyle}
+              fontFamily="Europa-Regular"
             >
               {<Icon as={FiChevronsUp} mr="1" fontSize="xl" />} Report Preview
             </Button>

diff --git a/src/components/Notes/AddNewNote.jsx b/src/components/Notes/AddNewNote.jsx
@@ -49,6 +49,7 @@ const AddNewNote = ({ newNote, setNewNote, createNewNote }) => {
         color="Grey"
         value={newNote.body}
         fontSize="sm"
+        fontFamily="Europa-Regular"
         onChange={(val) => handleChange(val)}
         submitOnBlur={false}
         onSubmit={() => {

diff --git a/src/components/Notes/ModalNotes.jsx b/src/components/Notes/ModalNotes.jsx
@@ -4,8 +4,8 @@ import {
   // Button,
   Circle,
   Flex,
-  Heading,
   HStack,
+  Heading,
   IconButton,
   Text,
   VStack,
@@ -16,9 +16,9 @@ import useSWR, { mutate } from "swr";
 import { thumbsDown, thumbsUp, thumbsUpAndDown } from "../../actions/Card";
 import useUser from "../../lib/hooks/useUser";
 import AddNewNote from "./AddNewNote";
+import InformationPreview from "./InformationPreview";
 import Note from "./Note";
 import SentimentButton from "./SentimentButton";
-import InformationPreview from "./InformationPreview";
 
 export default function ModalNotes({
   selState,
@@ -102,7 +102,7 @@ export default function ModalNotes({
       justifyContent="space-between"
     >
       <VStack alignItems="left" w="100%" maxH={{ xl: "86%", "2xl": "89%" }}>
-        <Heading size="lg" mt={3} mb={2}>
+        <Heading size="lg" mt={3} mb={2} fontFamily="Roboto Slab">
           Notes
         </Heading>
 
@@ -178,7 +178,9 @@ export default function ModalNotes({
         <Flex alignItems="end">
           <VStack alignItems="left" w="80%">
             <HStack>
-              <Text fontSize="sm">Was this image helpful?</Text>
+              <Text fontSize="sm" fontFamily="Europa-Regular">
+                Was this image helpful?
+              </Text>
               {user?.isAdmin ? (
                 <IconButton
                   bg="none"

diff --git a/src/components/Notes/ReportNotes.jsx b/src/components/Notes/ReportNotes.jsx
@@ -51,7 +51,7 @@ export default function ReportNotes({
   return (
     <VStack alignItems="left">
       <VStack alignItems="left" w="100%">
-        <Heading textColor="#3F3F3F" size="md" mt={3} mb={-2}>
+        <Heading textColor="#515254" size="md" mt={3} mb={-2}>
           Notes ({currentNotes.length})
         </Heading>
         {currentNotes.length === 0 ? (

diff --git a/src/components/RecentStandardsView/RecentStandardsView.jsx b/src/components/RecentStandardsView/RecentStandardsView.jsx
@@ -8,7 +8,9 @@ function RecentStandardsView({ maxCards }) {
 
   return (
     <Flex flexDirection="column" gap="16px">
-      <Heading fontSize="1.5em">Recent Standards</Heading>
+      <Heading fontSize="1.5em" fontFamily="'Roboto Slab', serif">
+        Recent Standards
+      </Heading>
       <Link href="/library">
         <Button width="max" variant="Grey-outlined">
           <Text fontSize="xs">See All Standards</Text>