feat: Add Footer to every page with nav (#1009)

* Add Footer to AuthAndNav, rename

* Fix in preferences layout

* Remove double footer

site/src/components/AuthAndFrame/AuthAndFrame.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { Navbar } from "../Navbar"
+import { Footer } from "../Page/Footer"
+import { RequireAuth } from "../Page/RequireAuth"
+
+interface AuthAndFrameProps {
+  children: JSX.Element
+}
+
+/**
+ * Wraps page in RequireAuth and renders it between Navbar and Footer
+ */
+export const AuthAndFrame: React.FC<AuthAndFrameProps> = ({ children }) => (
+  <RequireAuth>
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  </RequireAuth>
+)

site/src/components/Page/AuthAndNav.tsx

@@ -1,12 +0,0 @@
-import React from "react"
-import { Navbar } from "../Navbar"
-import { RequireAuth, RequireAuthProps } from "./RequireAuth"
-
-export const AuthAndNav: React.FC<RequireAuthProps> = ({ children }) => (
-  <RequireAuth>
-    <>
-      <Navbar />
-      {children}
-    </>
-  </RequireAuth>
-)

site/src/components/Page/index.tsx

@@ -1,3 +1,2 @@
-export * from "./AuthAndNav"
 export * from "./Footer"
 export * from "./RequireAuth"

site/src/components/Preferences/Layout.tsx

@@ -1,7 +1,7 @@
 import Box from "@material-ui/core/Box"
 import React from "react"
 import { Outlet } from "react-router-dom"
-import { AuthAndNav } from "../Page"
+import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
 import { TabPanel } from "../TabPanel"
 
 export const Language = {
@@ -21,7 +21,7 @@ const menuItems = [
 
 export const PreferencesLayout: React.FC = () => {
   return (
-    <AuthAndNav>
+    <AuthAndFrame>
       <Box display="flex" flexDirection="column">
         <Box style={{ maxWidth: "1380px", margin: "1em auto" }}>
           <TabPanel title={Language.preferencesLabel} menuItems={menuItems}>
@@ -29,6 +29,6 @@ export const PreferencesLayout: React.FC = () => {
           </TabPanel>
         </Box>
       </Box>
-    </AuthAndNav>
+    </AuthAndFrame>
   )
 }