refactor function components

src/App.js

@@ -4,7 +4,7 @@ import LandingPage from "./pages/LandingPage";
 import Challenges from "./pages/Challenges";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 
-function App() {
+const App = () => {
     return (
         <BrowserRouter>
             <ThemeProvider theme={theme}>

src/components/ButtonLink.js

@@ -18,7 +18,7 @@ const ButtonLinkStyle = styled(Label)`
   }
 `;
 
-function ButtonLink(props) {
+const ButtonLink = (props) => {
     return (
         <ButtonLinkStyle>
             {props.children}

src/components/Logo.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Logo = () => {
+    return (
+        <>
+
+        </>
+    );
+}
+
+export default Logo;

src/components/NavBar.js

@@ -0,0 +1,14 @@
+import React from "react";
+import {Container, FlexRow} from "../utils/containers";
+
+const NavBar = () => {
+    return (
+        <Container as='header'>
+            <FlexRow as='nav'>
+
+            </FlexRow>
+        </Container>
+    );
+}
+
+export default NavBar;

src/pages/Challenges.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function Challenges() {
+const Challenges = () => {
     return (
         <>
             Challenges

src/pages/LandingPage.js

@@ -5,7 +5,7 @@ import theme from "../utils/theme";
 import {Link} from "react-router-dom";
 import ButtonLink from "../components/ButtonLink";
 
-function LandingPage() {
+const LandingPage = () => {
     return (
         <FlexColumn alignmentY='flex-start' setWidth='100%' setMinHeight='100vh' as='main'>
             <FlexColumn alignmentX='flex-start' setGap='24px'