Icons added; miscellaneous improvements.

next.config.js

@@ -2,3 +2,7 @@ const withCSS = require('@zeit/next-css')
 module.exports = withCSS({
     cssModules: false
 })
+
+// Fixes npm packages that depend on `fs` module
+// Great many thank to Mohammed Alrefai for making this work https://spectrum.chat/next-js/general/how-to-properly-load-font-awesome-pro-into-a-next-js-application~56b0396d-8b7d-447d-9f46-24ba6192936e
+const nextConfig = { webpack: config => ({ ...config, node: { fs: 'empty' } }) }

package-lock.json

@@ -975,6 +975,35 @@
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.26",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.26.tgz",
+      "integrity": "sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.26",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.26.tgz",
+      "integrity": "sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.26"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.12.0.tgz",
+      "integrity": "sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.26"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.8.tgz",
+      "integrity": "sha512-I5h9YQg/ePA3Br9ISS18fcwOYmzQYDSM1ftH03/8nHkiqIVHtUyQBw482+60dnzvlr82gHt3mGm+nDUp159FCw==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",

package.json

@@ -15,6 +15,9 @@
   "author": "",
   "license": "GPL-3.0-or-later",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
     "@zeit/next-css": "^1.0.1",
     "next": "^9.1.7",
     "react": "^16.12.0",

pages/_app.js

@@ -0,0 +1,20 @@
+import '@fortawesome/fontawesome-svg-core/styles.css';
+// import App from 'next/app'
+
+function MyApp({ Component, pageProps }) {
+    return <Component {...pageProps} />
+  }
+  
+  // Only uncomment this method if you have blocking data requirements for
+  // every single page in your application. This disables the ability to
+  // perform automatic static optimization, causing every page in your app to
+  // be server-side rendered.
+  //
+  // MyApp.getInitialProps = async (appContext) => {
+  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
+  //   const appProps = await App.getInitialProps(appContext);
+  //
+  //   return { ...appProps }
+  // }
+  
+  export default MyApp

pages/components/Header.js

@@ -1,5 +1,6 @@
 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 => {
     return (
@@ -9,39 +10,39 @@ const Header = props => {
                     <div className="navbar-options">
                         <li>
                             <Link href="/">
-                                <a>Tasko-O!</a>
+                                <a><img src="/taskoala.png" /></a>
                             </Link>
                         </li>
                         <li>
                             <Link href="/">
-                                <a>Zadania</a>
+                                <a><FontAwesomeIcon icon={faTasks} /> Zadania</a>
                             </Link>
                         </li>
                         <li>
                             <Link href="/">
-                                <a>Pytania</a>
+                                <a><FontAwesomeIcon icon={faCommentDots} /> Pytania</a>
                             </Link>
                         </li>
                         <li>
                             <Link href="/">
-                                <a>Rozmowy</a>
+                                <a><FontAwesomeIcon icon={faComments} /> Rozmowy</a>
                             </Link>
                         </li>
                         <li>
                             <Link href="/">
-                                <a>Ustawienia</a>
+                                <a><FontAwesomeIcon icon={faCog} /> Ustawienia</a>
                             </Link>
                         </li>
                     </div>
                     <div className="navbar-auth">
                         <li>
                             <Link href="/">
-                                <a>Zaloguj się</a>
+                                <a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a>
                             </Link>
                         </li>
                         <li>
                             <Link href="/">
-                                <a>Zarejestruj się</a>
+                                <a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a>
                             </Link>
                         </li>
                     </div>

pages/components/LoginArea.js

@@ -1,5 +1,6 @@
 import Link from 'next/link';
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCheck, faBuilding } from '@fortawesome/free-solid-svg-icons';
 
 const LoginArea = props => {
     const isDeveloperAccount = props.accountType === "developer"
@@ -7,7 +8,7 @@ const LoginArea = props => {
         <Link href="/">
             <span className={isDeveloperAccount ? "login-area developer-account" : "login-area company-account"}>
                 <span>Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}</span>
-                {/* <span>Ikona</span> */}
+                <span className="account-icon">{isDeveloperAccount ? <FontAwesomeIcon icon={faUserCheck} /> : <FontAwesomeIcon icon={faBuilding} />}</span>
             </span>
         </Link>
     )

pages/index.js

@@ -5,9 +5,9 @@ import Footer from './components/Footer';
 
 const Index = props => (
     <div className="index">
-        <Header/>
+        <Header />
         <div className="index-content">
-            <h2>Rejestracja do systemu Task-O!</h2>
+            <h1>Rejestracja do systemu Task-O!</h1>
             <span className="login-areas">
                 <LoginArea accountType="developer"/>
                 <LoginArea accountType="company"/>

style.css

@@ -15,6 +15,12 @@ body {
     height: 100%;
 }
 
+body div:first-child {
+    height: 100%;
+}
+
+/* navbar */
+
 header {
     width: 100%;
     position: fixed;
@@ -28,37 +34,35 @@ nav ul {
     flex-wrap: wrap;
 }
 
-nav ul div {
+nav div {
     display: flex;
     flex-wrap: wrap;
 }
 
 .navbar-options {
-    width: 70%;
+    width: 65%;
 }
 
 .navbar-auth {
     justify-content: flex-end;
-    width: 30%;
+    width: 35%;
-    /* display: grid;
-    grid: 1fr / 1fr 1fr */
 }
 
-/* .navbar-auth li a {
+nav li {
-    width: 100%;
-} */
-
-nav ul div li {
     display: flex;
 }
 
-nav ul div li a {
+nav a {
     padding: 1em;
     text-decoration: none;
     color: var(--navbar-text-color);
     font-size: 90%;
 }
 
+nav img {
+    width: 1.1rem;
+}
+
 .navbar-auth li:first-of-type a {
     border: solid 1px rgba(255, 255, 255, .1);
 }
@@ -68,46 +72,7 @@ nav ul div li a {
     color: #FFF;
 }
 
-body div:first-child {
+/* footer */
-    height: 100%;
-}
-
-.index-content {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.login-areas {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin: 1em;
-}
-
-.login-area {
-    margin: 1em;
-}
-
-.login-areas span {
-    display: inline-block;
-    height: 10rem;
-    width: 18rem;
-    max-width: 300px;
-    color: #FFF;
-    border-radius: 2%;
-}
-
-.developer-account span {
-    background-color: #4457F3;
-}
-
-.company-account span {
-    background-color: #FF733F;
-}
 
 footer {
     position: fixed;
@@ -119,3 +84,55 @@ footer {
     text-align: center;
     font-size: 90%;
 }
+
+/* index page */
+
+.index-content {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    font-size: 1.4rem;
+}
+
+.login-areas {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 1em;
+}
+
+.login-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 1em;
+    height: 10rem;
+    width: 18rem;
+    max-width: 300px;
+    color: #FFF;
+    border-radius: 2%;
+}
+
+.developer-account {
+    background-color: #4457F3;
+}
+
+.company-account {
+    background-color: #FF733F;
+}
+
+.login-area span {
+    display: inline-block;
+    margin: 1em;
+}
+
+.account-icon {
+    align-self: flex-end;
+    font-size: 2rem;
+}