diff --git a/next.config.js b/next.config.js
index 824a412..71b4f84 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,8 @@
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssModules: false
-})
\ No newline at end of file
+})
+
+// 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' } }) }
diff --git a/package-lock.json b/package-lock.json
index 6b70b8f..e5e6f56 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 94afd0f..b4c6981 100644
--- a/package.json
+++ b/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",
diff --git a/pages/_app.js b/pages/_app.js
new file mode 100644
index 0000000..3c88249
--- /dev/null
+++ b/pages/_app.js
@@ -0,0 +1,20 @@
+import '@fortawesome/fontawesome-svg-core/styles.css';
+// import App from 'next/app'
+
+function MyApp({ Component, pageProps }) {
+ return
+ }
+
+ // 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
\ No newline at end of file
diff --git a/pages/components/Header.js b/pages/components/Header.js
index 3f969f4..246b197 100644
--- a/pages/components/Header.js
+++ b/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 => {
diff --git a/pages/components/LoginArea.js b/pages/components/LoginArea.js
index 5221b04..682436c 100644
--- a/pages/components/LoginArea.js
+++ b/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 => {
Utwórz kontro {isDeveloperAccount ? 'programisty' : 'firmy'}
- {/* Ikona */}
+ {isDeveloperAccount ? : }
)
diff --git a/pages/index.js b/pages/index.js
index 2810cc8..b327c47 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,9 +5,9 @@ import Footer from './components/Footer';
const Index = props => (
-
+
-
Rejestracja do systemu Task-O!
+ Rejestracja do systemu Task-O!
diff --git a/public/taskoala.png b/public/taskoala.png
new file mode 100644
index 0000000..9b2817c
Binary files /dev/null and b/public/taskoala.png differ
diff --git a/style.css b/style.css
index 5991808..338a68f 100644
--- a/style.css
+++ b/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%;
- /* display: grid;
- grid: 1fr / 1fr 1fr */
+ width: 35%;
}
-/* .navbar-auth li a {
- width: 100%;
-} */
-
-nav ul div li {
+nav 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 {
- 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 */
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;
+}