fix: styling fixes

GTBitsOfGood · Oct 29, 2023 · 05d6a79 · 05d6a79
1 parent cffbe7b
commit 05d6a79
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 24 deletions.
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/SearchBar/CurrentSearchInfo.jsx b/src/components/SearchBar/CurrentSearchInfo.jsx
@@ -1,5 +1,13 @@
 import { CloseIcon } from "@chakra-ui/icons";
-import { Box, HStack, IconButton, Tag, Text, Wrap } from "@chakra-ui/react";
+import {
+  Box,
+  HStack,
+  IconButton,
+  Tag,
+  Text,
+  Wrap,
+  useTheme,
+} from "@chakra-ui/react";
 
 const CurrentSearchInfo = ({
   handleSearch,
@@ -9,6 +17,7 @@ const CurrentSearchInfo = ({
   setResetSearch,
   setTagToClear,
 }) => {
+  const theme = useTheme();
   const clearTags = () => {
     setResetSearch(true);
     handleSearch({ searchString: searchString, tags: [] });
@@ -26,7 +35,7 @@ const CurrentSearchInfo = ({
   return (
     <Box mt={5} mb={0}>
       {searchString !== "" && (
-        <Text fontSize="lg" fontWeight="500">
+        <Text fontSize="lg" fontWeight="500" style={theme.textStyles.search}>
           You searched for &quot;{searchString}&quot; in {location}
         </Text>
       )}

diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx
@@ -11,12 +11,13 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
+  Tag,
   Text,
   useDisclosure,
+  useTheme,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { Form, useForm, useFormState } from "react-final-form";
-import Tag from "../Tag";
 
 const SearchBarComponent = (props) => {
   const {
@@ -34,6 +35,7 @@ const SearchBarComponent = (props) => {
 
   const { values } = useFormState();
   const { mutators } = useForm();
+  const theme = useTheme();
 
   const { isOpen, onToggle } = useDisclosure();
   const searchPlaceholder = "Search within " + pageType;
@@ -105,9 +107,7 @@ const SearchBarComponent = (props) => {
             value={searchInput}
             onChange={handleSearchInputChange}
             placeholder={searchPlaceholder}
-            fontWeight="400"
-            fontSize="16px"
-            fontFamily="'Europa-Regular', sans-serif"
+            style={theme.textStyles.searchBox}
             width="25rem"
             borderRadius="15px"
             border="2px solid lightGrey"

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
@@ -2,8 +2,9 @@ import Head from "next/head";
 import PropTypes from "prop-types";
 import React from "react";
 import NavBar from "src/components/NavBar/NavBar";
-import Footer from "../components/NavBar/Footer";
+import "src/styles/fonts.css";
 import { SWRConfig } from "swr";
+import Footer from "../components/NavBar/Footer";
 
 import fetchJson from "src/lib/utils/fetchJson";
 import { southfaceTheme } from "src/styles/theme";

diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
@@ -1,5 +1,5 @@
+import Document, { Head, Html, Main, NextScript } from "next/document";
 import React from "react";
-import Document, { Html, Head, Main, NextScript } from "next/document";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -17,6 +17,10 @@ class MyDocument extends Document {
             type="image/png"
             href="/static/favicon.png"
           />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap"
+            rel="stylesheet"
+          />
         </Head>
         <body>
           <Main />

diff --git a/src/pages/library/[buildingType]/[primaryCategory]/index.jsx b/src/pages/library/[buildingType]/[primaryCategory]/index.jsx
@@ -146,13 +146,26 @@ const LibraryCategoryPage = (props) => {
             paddingY="8rem"
             marginX="8rem"
           >
-            <Text fontSize="2xl" textAlign="center" color="grey" mb={5}>
+            <Text
+              fontSize="2xl"
+              textAlign="center"
+              mb={5}
+              color={theme.colors.boldGrey}
+              fontWeight="400"
+              fontFamily={theme.fonts.heading}
+            >
               Sorry! We couldn&apos;t find any standards matching your search.
               Try changing your spelling, removing filters, or searching for
               something else.
             </Text>
             <Link href={`/library/${props.params.buildingType}`}>
-              <Button variant="Blue" size="md">
+              <Button
+                variant="Blue"
+                size="md"
+                fontFamily={theme.fonts.headingBold}
+                fontWeight="700"
+                fontSize="16px"
+              >
                 Return to {capitalizeAndRemoveDash(props.params.buildingType)}
               </Button>
             </Link>

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -96,15 +96,27 @@ export const southfaceTheme = extendTheme({
       fontWeight: "400",
       fontStyle: "normal",
       headingBold: `'Europa-Regular', sans-serif`,
-      fontColor: "#6D6E70",
+      color: "#6D6E70",
       fontSize: "16px",
     },
     nameBold: {
       fontWeight: "700",
-      fontStyle: "normal",
       headingBold: `'Europa-Bold', sans-serif`,
-      fontColor: "#6D6E70",
+      color: "#6D6E70",
       fontSize: "16px",
     },
+
+    // Search text
+    search: {
+      fontWeight: "400",
+      fontFamily: "'Europa-Regular', sans-serif",
+      color: "#6D6E70",
+    },
+
+    searchBox: {
+      fontWeight: "300",
+      fontFamily: "'Europa-Light', sans-serif",
+      color: "#6D6E70",
+    },
   },
 });