Merge pull request #231 from GTBitsOfGood/ash/208-fontAdjustments

Ash/208 font adjustments
GTBitsOfGood · Oct 31, 2023 · c06a913 · c06a913 · github-actions · Oct 31, 2023
2 parents d7fa20c + 2a63e10
commit c06a913
Show file tree

Hide file tree

Showing 37 changed files with 280 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "react-icons": "^4.7.1",
     "react-rating-stars-component": "^2.2.0",
     "swr": "^2.0.3",
+    "typeface-inter": "^3.18.1",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

diff --git a/public/fonts/europa-bold-webfont.woff2 b/public/fonts/europa-bold-webfont.woff2
diff --git a/public/fonts/europa-light-webfont.woff2 b/public/fonts/europa-light-webfont.woff2
diff --git a/public/fonts/europa-regular-webfont.woff2 b/public/fonts/europa-regular-webfont.woff2
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/CategoryCards/CategoryCards.jsx b/src/components/CategoryCards/CategoryCards.jsx
@@ -4,17 +4,21 @@ import CategoryCard from "./CategoryCard";
 function CategoryCards(props) {
   return (
     <>
-      {Object.keys(primaryCategoryNames).sort((a, b) => primaryCategoryNames[a].localeCompare(primaryCategoryNames[b])).map((categoryInitials) => {
-        const name = primaryCategoryNames[categoryInitials].trim();
-        return (
-          <CategoryCard
-            routerQuery={props.routerQuery}
-            initials={categoryInitials}
-            title={name}
-            key={name}
-          />
-        );
-      })}
+      {Object.keys(primaryCategoryNames)
+        .sort((a, b) =>
+          primaryCategoryNames[a].localeCompare(primaryCategoryNames[b])
+        )
+        .map((categoryInitials) => {
+          const name = primaryCategoryNames[categoryInitials].trim();
+          return (
+            <CategoryCard
+              routerQuery={props.routerQuery}
+              initials={categoryInitials}
+              title={name}
+              key={name}
+            />
+          );
+        })}
     </>
   );
 }

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>
@@ -604,6 +608,7 @@ const CardModal = ({
                     variant="Red"
                     size="lg"
                     onClick={onDeleteStandardOpen}
+                    fontFamily="Europa-Bold"
                   >
                     Delete Standard
                   </Button>
@@ -616,6 +621,7 @@ const CardModal = ({
                         setSelectedImage(0);
                         openImagePreviewCallback();
                       }}
+                      fontFamily="Europa-Bold"
                     >
                       View Notes
                     </Button>
@@ -624,6 +630,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}