added footer

Orang-utan · Dec 26, 2020 · 69b59e6 · 69b59e6
1 parent 6f0c692
commit 69b59e6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 15 deletions.
diff --git a/src/client/public/index.html b/src/client/public/index.html
@@ -15,6 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script
+      defer
+      src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
+    ></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>TS-Boilerplate</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/client/src/App.js b/src/client/src/App.js
@@ -3,7 +3,7 @@ import { QueryCache, ReactQueryCacheProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query-devtools';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import auth from './api/auth';
-import Navbar from './components/Navbar';
+import AppContainer from './components/AppContainer';
 import PublicRoute from './components/routing/PublicRoute';
 import PrivateRoute from './components/routing/PrivateRoute';
 import { AuthContext } from './context';
@@ -43,19 +43,24 @@ function App() {
   return (
     <AuthContext.Provider value={authContextValue}>
       <Router>
-        <ReactQueryCacheProvider queryCache={queryCache}>
-          <ReactQueryDevtools />
-          <Navbar />
-          <main>
-            <Switch>
-              <PublicRoute exact path="/" component={IndexPage} />
-              <PublicRoute exact path="/login" component={LoginPage} />
-              <PublicRoute exact path="/register" component={RegisterPage} />
-              <PrivateRoute exact path="/dashboard" component={DashboardPage} />
-              <Route exact={false} component={NotFoundPage} />
-            </Switch>
-          </main>
-        </ReactQueryCacheProvider>
+        <AppContainer>
+          <ReactQueryCacheProvider queryCache={queryCache}>
+            <ReactQueryDevtools />
+            <main>
+              <Switch>
+                <PublicRoute exact path="/" component={IndexPage} />
+                <PublicRoute exact path="/login" component={LoginPage} />
+                <PublicRoute exact path="/register" component={RegisterPage} />
+                <PrivateRoute
+                  exact
+                  path="/dashboard"
+                  component={DashboardPage}
+                />
+                <Route exact={false} component={NotFoundPage} />
+              </Switch>
+            </main>
+          </ReactQueryCacheProvider>
+        </AppContainer>
       </Router>
     </AuthContext.Provider>
   );

diff --git a/src/client/src/components/AppContainer.js b/src/client/src/components/AppContainer.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import Navbar from './Navbar';
+
+const FooterContainer = styled.div`
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  width: 100%;
+  background-color: #ecf0f1;
+  color: white;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  z-index: 99;
+`;
+
+const AppContainer = ({ children }) => {
+  return (
+    <div>
+      <Navbar />
+      {children}
+      <FooterContainer>
+        <h1 className="has-text-grey-light">
+          Made with{' '}
+          <i className="fas fa-heart" style={{ color: '#e74c3c' }}></i> by DT
+        </h1>
+      </FooterContainer>
+    </div>
+  );
+};
+
+export default AppContainer;