Header and Footer moved to _app.

pages/_app.js

@@ -1,8 +1,17 @@
 import '@fortawesome/fontawesome-svg-core/styles.css';
+import "../style.css";
+import Header from './components/Header';
+import Footer from './components/Footer';
 // import App from 'next/app'
 
 function MyApp({ Component, pageProps }) {
-    return <Component {...pageProps} />
+    return (
+      <div className="root-container">
+        <Header />
+        <Component {...pageProps} />
+        <Footer />
+      </div>
+    )
   }
   
   // Only uncomment this method if you have blocking data requirements for

pages/components/Header.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCog, faTasks, faComments, faCommentDots, faUserPlus, faUser } from '@fortawesome/free-solid-svg-icons';
 
-const Header = props => {
+const Header = () => {
     return (
         <header>
             <nav>

pages/components/RegisterForm.js

@@ -8,7 +8,7 @@ const RegisterForm = props => {
     const lockIcon = <span><FontAwesomeIcon icon={faLock} /></span>
 
     return (
-        <div>
+        <div className="page-content-center">
             <h1>Rejestracja konta programisty do systemy Task-O!</h1>
             <form>
                 <ul>

pages/index.js

@@ -1,11 +1,6 @@
-import "../style.css";
-import Header from './components/Header';
 import LoginArea from './components/LoginArea';
-import Footer from './components/Footer';
 
-const Index = props => (
-    <div className="index">
-        <Header />
+const Index = () => (        
         <div className="page-content-center">
             <h1>Rejestracja do systemu Task-O!</h1>
             <span className="login-areas">
@@ -13,8 +8,6 @@ const Index = props => (
                 <LoginArea accountType="company"/>
             </span>
         </div>
-        <Footer />
-    </div>
   );
   
   export default Index;

style.css

@@ -15,7 +15,12 @@ body {
     height: 100%;
 }
 
-body div:first-child {
+/* body div:first-child {
+    height: 100%;
+} */
+
+#__next,
+.root-container {
     height: 100%;
 }