add global theme and styles

package.json

@@ -6,6 +6,8 @@
     "@chakra-ui/react": "^2.2.8",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fontsource/inter": "^4.5.12",
+    "@fontsource/montserrat": "^4.5.12",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

src/App.tsx

@@ -13,22 +13,24 @@ function App() {
       <Image
         src="./assets/sunset.jpg"
         zIndex={1}
+        boxSize="100%"
         position="absolute"
-        height="100%"
       />
       <Container as="section" paddingY={4} centerContent zIndex={2}>
         <Header data={data} setData={setData} />
         <Flex direction="column" paddingY={5} w="100%">
           <Flex id="location" alignContent="flex-start">
-            {data ? <Heading size="lg">{data.name}</Heading> : null}
+            {data ? <Heading variant="title">{data.name}</Heading> : null}
           </Flex>
           <Flex id="temp">
             {data ? (
-              <Heading size="lg">{data.main.temp.toFixed()}°C</Heading>
+              <Heading variant="title">{data.main.temp.toFixed()}°C</Heading>
             ) : null}
           </Flex>
           <Flex id="description">
-            {data ? <Heading size="lg">{data.weather[0].main}</Heading> : null}{" "}
+            {data ? (
+              <Heading variant="title">{data.weather[0].main}</Heading>
+            ) : null}{" "}
           </Flex>
         </Flex>
         <Footer data={data} />

src/index.tsx

@@ -2,10 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import { ChakraProvider } from "@chakra-ui/react";
+import theme from "./theme/theme";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <ChakraProvider>
+  <ChakraProvider theme={theme}>
     <React.StrictMode>
       <App />
     </React.StrictMode>

src/theme/theme.tsx

@@ -0,0 +1,37 @@
+import { extendTheme } from "@chakra-ui/react";
+import "@fontsource/inter";
+
+const theme = extendTheme({
+  styles: {
+    global: {
+      footer: {
+        color: "black",
+        fontWeight: "600",
+      },
+    },
+  },
+
+  fonts: {
+    heading: "'Montserrat', sans-serif",
+    body: "'Inter', sans-serif",
+  },
+
+  components: {
+    Heading: {
+      variants: {
+        title: {
+          color: "#d9d7d2",
+          textShadow: "2px 2px 2px #000000",
+        },
+      },
+      baseStyle: {
+        fontWeight: "800",
+      },
+      defaultProps: {
+        size: "3xl",
+      },
+    },
+  },
+});
+
+export default theme;

yarn.lock

@@ -1939,6 +1939,16 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fontsource/inter@^4.5.12":
+  version "4.5.12"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.12.tgz#a6236379bf710658db048d7087ec588754962cb6"
+  integrity sha512-bGKk4/8tube/nCk8hav0ZDBVbzJzc7m0Vt4xF5p15IN4YImwGdtKG38Oq5bU8xHNS+VfvbFFCepgQNj7Pr/Lvg==
+
+"@fontsource/montserrat@^4.5.12":
+  version "4.5.12"
+  resolved "https://registry.yarnpkg.com/@fontsource/montserrat/-/montserrat-4.5.12.tgz#465c61fb508f6d0055dbcbfbc6eb7307a81fdf6f"
+  integrity sha512-UQ+4ijm1sddIBtmEZ9bKgCB1rSi4Imog0YKz7wDLtMQ3Mw2ZaBseTgoLDfbWnfdowS0PLp+Z4T2KZ/1AySTlDQ==
+
 "@humanwhocodes/config-array@^0.10.4":
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.4.tgz#01e7366e57d2ad104feea63e72248f22015c520c"