diff --git a/src/App.module.scss b/src/App.module.scss
deleted file mode 100644
index 72819e40abb596e4eeff01e7cb7e692000908495..0000000000000000000000000000000000000000
--- a/src/App.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$hello: 'world';
-
-:export {
- hello: $hello;
-}
\ No newline at end of file
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afeece5ac28064fa3c73a29215037465f789..0000000000000000000000000000000000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(<App />);
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/index.scss b/src/index.scss
index e7d9e649170e1ea212ceed0bb473c79133be8c94..6812b4636ca21b161e07289f9b3ebe0ebe705c5f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,4 +1,4 @@
-@import "style/fonts.scss";
+@import "style/fonts.module";
body {
margin: 0;
diff --git a/src/js/components/Button/Button.module.scss b/src/js/components/Button/Button.module.scss
index 2ff826e8ceb9998811a921e02428b76af1ad0954..39ea3ccbebec1501be8f66d7e6931bf0933f4800 100644
--- a/src/js/components/Button/Button.module.scss
+++ b/src/js/components/Button/Button.module.scss
@@ -1,5 +1,5 @@
@import '../../../style/colors.module';
-@import '../../../style/fonts';
+@import '../../../style/fonts.module';
.TakiButton {
font-family: $primary_font;
diff --git a/src/js/components/MultiColoredText/MultiColoredText.js b/src/js/components/MultiColoredText/MultiColoredText.js
index 085481fcb02a7f4555f195bfa46da5007d060c28..bdb2287d30f600fc60de570f2046edb735d08f93 100644
--- a/src/js/components/MultiColoredText/MultiColoredText.js
+++ b/src/js/components/MultiColoredText/MultiColoredText.js
@@ -3,7 +3,7 @@ const MultiColoredText = (props) => {
return (
<div>
{content.map((part) => {
- return <span key={part.text} style={{color: part.color}}>{part.text}</span>
+ return <span key={part.text} style={{color: part.color}}>{part.text}</span> // TODO not sure which unique value to choose for the key here
})
}
</div>
diff --git a/src/js/components/MultiColoredText/MultiColoredText.module.scss b/src/js/components/MultiColoredText/MultiColoredText.module.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/js/components/TopBar/TopBar.js b/src/js/components/TopBar/TopBar.js
index 3f066c467b849574ab80cf97cc5d97a671dac0ab..52f58c5e1fa492468590164f7177783287c7dde6 100644
--- a/src/js/components/TopBar/TopBar.js
+++ b/src/js/components/TopBar/TopBar.js
@@ -1,4 +1,3 @@
-import './TopBar.module.scss';
import TopLinks from "../TopLinks/TopLInks";
import {Header} from "antd/lib/layout/layout";
import {useEffect, useState} from "react";
@@ -6,21 +5,21 @@ import {useEffect, useState} from "react";
const TopBar = (props) => {
- const [section, setSection] = useState("landingSection");
+ const [currentSection, setCurrentSection] = useState("landingSection");
useEffect(() => {
- const newSectionMap = Object.entries(props.currentSection);
- if (props.currentSection !== section && newSectionMap.filter(([key, value]) => value)[0]) {
- setSection(Object.fromEntries(newSectionMap.filter(([key, value]) => value)))
+ const newSectionMap = Object.entries(props.sectionStatus);
+ if (props.sectionStatus !== currentSection && newSectionMap.filter(([key, value]) => value)[0]) {
+ setCurrentSection(Object.fromEntries(newSectionMap.filter(([key, value]) => value)))
}
- }, [props.currentSection]);
+ }, [props.sectionStatus]);
return (
<Header className={"top-bar"}>
- <TopLinks section={section}/>
+ <TopLinks currentSection={currentSection}/>
</Header>
);
}
diff --git a/src/js/components/TopBar/TopBar.module.scss b/src/js/components/TopBar/TopBar.module.scss
deleted file mode 100644
index aa6e89e293934d6ea22373c261614812e106bd8e..0000000000000000000000000000000000000000
--- a/src/js/components/TopBar/TopBar.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import '../../../style/colors.module';
-@import '../../../style/fonts';
-
diff --git a/src/js/components/TopLinks/TopLInks.js b/src/js/components/TopLinks/TopLInks.js
index b3c039d6407431176524e46293bafef195da2d40..a596e606530290145cfafaf9ea247a1b5bf9b135 100644
--- a/src/js/components/TopLinks/TopLInks.js
+++ b/src/js/components/TopLinks/TopLInks.js
@@ -12,7 +12,7 @@ const chosenSectionStyle = {
};
const TopLinks = (props) => {
- const {section} = props;
+ const {currentSection} = props;
return (
<div className={styles.TopLinks}>
<a href={"#LandingSection"} className={styles.Logo}>
@@ -20,29 +20,29 @@ const TopLinks = (props) => {
</a>
<div className={styles.Links}>
<div className={styles.Link}>
- <a href={"#VscodeSection"} style={section.vscodeSection ? chosenSectionStyle : {}}>Un IDE complet</a>
+ <a href={"#VscodeSection"} style={currentSection.vscodeSection ? chosenSectionStyle : {}}>Un IDE complet</a>
</div>
<div className={styles.Link}>
- <a href={"#CloudSection"} style={section.cloudSection ? chosenSectionStyle : {}}>L'algorithme est votre maître mot ?</a>
+ <a href={"#CloudSection"} style={currentSection.cloudSection ? chosenSectionStyle : {}}>L'algorithme est votre maître mot ?</a>
</div>
<div className={styles.Link}>
<a href={"#StatsSection"}
- style={section.statsSection || section.featuresSection ? chosenSectionStyle : {}}>Comment suivre vos étudiants ?</a>
+ style={currentSection.statsSection || currentSection.featuresSection ? chosenSectionStyle : {}}>Comment suivre vos étudiants ?</a>
</div>
<div className={styles.Link}>
- <a href={"#TowerSection"} style={section.towerSection || section.octopusSection ? chosenSectionStyle : {}}>Apprendre de manière ludique</a>
+ <a href={"#TowerSection"} style={currentSection.towerSection || currentSection.octopusSection ? chosenSectionStyle : {}}>Apprendre de manière ludique</a>
</div>
<div className={styles.Link}>
<a href={"#BottomSection"}
- style={section.bottomSection && !section.contactSection ? chosenSectionStyle : {}}>Article</a>
+ style={currentSection.bottomSection && !currentSection.contactSection ? chosenSectionStyle : {}}>Article</a>
</div>
<div className={styles.Link}>
- <a href={"#Contact"} style={section.contactSection ? chosenSectionStyle : {}}>Contact</a>
+ <a href={"#Contact"} style={currentSection.contactSection ? chosenSectionStyle : {}}>Contact</a>
</div>
</div>
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index 53cb7d037f52eff74ff8a135906f7560fa6f3265..6392b111500ef2cf9c456baa96a8aa78a80c6466 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -1,5 +1,5 @@
@import '../../../style/colors.module';
-@import '../../../style/fonts';
+@import '../../../style/fonts.module';
.TopLinks {
@@ -24,8 +24,7 @@
flex-direction: row;
-
- .Link {
+ .Link {
text-align: center;
margin-left: 3%;
min-width: fit-content;
@@ -38,8 +37,7 @@
}
-
- a:hover{
+ a:hover {
color: $primary_pink;
}
}
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index 2cb37bac7f26c7ee324d758326510b5d8bf6e123..c2d24474cfcc06c1f6fa00ae19a2e1a51bce1f29 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -1,5 +1,5 @@
@import '../../style/colors.module';
-@import '../../style/fonts';
+@import '../../style/fonts.module';
html {
scroll-behavior: smooth;
diff --git a/src/js/pages/MainPage.js b/src/js/pages/MainPage.js
index 35e028662a39218da285f4e6869521151e67a271..3f1fc91d5ef06c745f3bb2db8e25c954d86ff9ee 100644
--- a/src/js/pages/MainPage.js
+++ b/src/js/pages/MainPage.js
@@ -2,8 +2,6 @@ import {Layout} from "antd";
import "./MainPage,module.scss";
import LandingSection from "../sections/LandingSection/LandingSection";
import VscodeSection from "../sections/VscodeSection/VscodeSection";
-
-
import CloudSection from "../sections/CloudSection/CloudSection";
import StatsSection from "../sections/StatsSection/StatsSection";
import FeatureSection from "../sections/FeatureSection/FeatureSection";
@@ -14,74 +12,72 @@ import React from "react";
import {useElementOnScreen} from "../utils/utils";
import TopBar from "../components/TopBar/TopBar";
import {Content} from "antd/lib/layout/layout";
-
const { Footer} = Layout;
-
-
const MainPage = () => {
- const currentSection = {};
+ // maybe find a cleaner way to instantiate the child references
+ const sections = {};
const landingSectionRef = React.createRef();
- currentSection["landingSection"] = useElementOnScreen(landingSectionRef, {
+ sections["landingSection"] = useElementOnScreen(landingSectionRef, {
root: null,
rootMargin: "0px",
threshold: 1.0
});
const vscodeSectionRef = React.createRef();
- currentSection["vscodeSection"] = useElementOnScreen(vscodeSectionRef, {
+ sections["vscodeSection"] = useElementOnScreen(vscodeSectionRef, {
root: null,
rootMargin: "0px",
threshold: 0.8
});
const cloudSectionRef = React.createRef();
- currentSection["cloudSection"] = useElementOnScreen(cloudSectionRef, {
+ sections["cloudSection"] = useElementOnScreen(cloudSectionRef, {
root: null,
rootMargin: "0px",
threshold: 0.7
});
const statsSectionRef = React.createRef();
- currentSection["statsSection"] = useElementOnScreen(statsSectionRef, {
+ sections["statsSection"] = useElementOnScreen(statsSectionRef, {
root: null,
rootMargin: "0px",
threshold: 0.8
});
const featuresSectionRef = React.createRef();
- currentSection["featuresSection"] = useElementOnScreen(featuresSectionRef, {
+ sections["featuresSection"] = useElementOnScreen(featuresSectionRef, {
root: null,
rootMargin: "0px",
threshold: 1.0
});
const towerSectionRef = React.createRef();
- currentSection["towerSection"] = useElementOnScreen(towerSectionRef, {
+ sections["towerSection"] = useElementOnScreen(towerSectionRef, {
root: null,
rootMargin: "0px",
threshold: 1.0
});
const octopusSectionRef = React.createRef();
- currentSection["octopusSection"] = useElementOnScreen(octopusSectionRef, {
+ sections["octopusSection"] = useElementOnScreen(octopusSectionRef, {
root: null,
rootMargin: "0px",
threshold: 0.7
});
const bottomSectionRef = React.createRef();
- currentSection["bottomSection"] = useElementOnScreen(bottomSectionRef, {
+ sections["bottomSection"] = useElementOnScreen(bottomSectionRef, {
root: null,
rootMargin: "0px",
threshold: 0.5
});
const contactSectionRef = React.createRef();
- currentSection["contactSection"] = useElementOnScreen(contactSectionRef, {
+ sections["contactSection"] = useElementOnScreen(contactSectionRef, {
root: null,
rootMargin: "0px",
threshold: 0.8
@@ -91,9 +87,7 @@ const MainPage = () => {
return (
<Layout>
-
- <TopBar currentSection={currentSection} />
-
+ <TopBar sectionStatus={sections} />
<Content className="site-layout">
<LandingSection innerRef={landingSectionRef}/>
<VscodeSection innerRef={vscodeSectionRef}/>
@@ -114,4 +108,5 @@ const MainPage = () => {
}
+
export default MainPage;
\ No newline at end of file
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 7aa6dd28a2e0b869e20e9a1cdd8c06f875c306ec..3665851c4192b4a7f678b83eb5786bdd61c31818 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.BottomSection {
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index deab19731b20dca0c7e15923f11334606cbf6379..41766a51cefea9a30622ec0dfe4b2d1ec323f24d 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.CloudSection {
@@ -47,37 +47,6 @@
}
}
-//@media (max-width: 575.98px) {
-// .CloudSection {
-// min-height: 80vh;
-//
-// .UpperBlock {
-// font-size: 3vw;
-// max-width: 50vw;
-//
-// }
-//
-// .Cloud {
-// margin-top: 10%;
-// max-width: 60vw;
-// max-height: 60vh;
-// }
-//
-// .BottomBlock {
-// font-size: 4vw;
-// line-height: 4vw;
-// max-width: 40%;
-//
-// .Caption {
-// font-size: 3vw;
-// line-height: 3vw;
-// max-width: 70%;
-//
-// }
-// }
-// }
-//}
-
@media (max-width: 768px) {
.CloudSection {
diff --git a/src/js/sections/FeatureSection/FeatureSection.module.scss b/src/js/sections/FeatureSection/FeatureSection.module.scss
index e1375277e0f3bfa5adf659773823e9c43b40ef63..4f51b3363b6386f62aa7edc953b6cd3d885f1e5b 100644
--- a/src/js/sections/FeatureSection/FeatureSection.module.scss
+++ b/src/js/sections/FeatureSection/FeatureSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.FeatureSection {
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index dc99b060fd2629de31b0cdc5f574111d3e805e23..52c66e7806f84a9d34ceaa95372ab0e942febc07 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.LandingSection {
diff --git a/src/js/sections/OctopusSection/OctopusSection.module.scss b/src/js/sections/OctopusSection/OctopusSection.module.scss
index e15b99bf9a090b7ca0ca565df0efa5ad0d6bd3b8..8139eba271183fb7fa571e396f72a9b4056b463d 100644
--- a/src/js/sections/OctopusSection/OctopusSection.module.scss
+++ b/src/js/sections/OctopusSection/OctopusSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.OctopusSection {
diff --git a/src/js/sections/StatsSection/StatsSection.module.scss b/src/js/sections/StatsSection/StatsSection.module.scss
index a3da9818b01d4e2ab745e206a49dcdd9996e03e2..c304f026000402c7532875c3e24f183f97c55b04 100644
--- a/src/js/sections/StatsSection/StatsSection.module.scss
+++ b/src/js/sections/StatsSection/StatsSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.StatsSection {
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 4901d961e07f20286ea551a09e7255393e06e718..1f38f91825633e7f7a54ed5a71e1974bf5c766d6 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.TowerSection {
@@ -51,38 +51,6 @@
}
-
-
-
-//@media (max-width: 1200px) {
-// .TowerSection {
-// flex-direction: column;
-// text-align: center;
-// padding-top: 10%;
-// padding-bottom: 10%;
-//
-// .LeftSide {
-// .TowerImage {
-// width: 90vw;
-// height: 50vh;
-// }
-// }
-//
-// .RightSide {
-// .Title {
-// font-size: 5vw;
-// line-height: 5vw;
-// }
-//
-// .Caption {
-// font-size: 2.7vw;
-// line-height: 2.7vw;
-//
-// }
-// }
-// }
-//}
-
@media (max-width: 1200px) {
.TowerSection {
min-height: 40vh;
diff --git a/src/js/sections/VscodeSection/VscodeSection.module.scss b/src/js/sections/VscodeSection/VscodeSection.module.scss
index ec144b6b49bf1811955a4c7a7860ef0277d23c45..213749a185233afffb4e440861dd4bf3dcb89ca8 100644
--- a/src/js/sections/VscodeSection/VscodeSection.module.scss
+++ b/src/js/sections/VscodeSection/VscodeSection.module.scss
@@ -1,5 +1,5 @@
@import "../../../utils";
-@import "../../../style/fonts";
+@import "../../../style/fonts.module";
@import "../../../style/colors.module";
.VscodeSection {
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c058cebbef8b891c5062be6f31033d7d186..0000000000000000000000000000000000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b7b3e0e3897ab3bcaad13caf6876e48699..0000000000000000000000000000000000000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/src/style/fonts.scss b/src/style/fonts.module.scss
similarity index 100%
rename from src/style/fonts.scss
rename to src/style/fonts.module.scss