More links added.

pages/components/ActiveTask.js

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTasks, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 
@@ -32,7 +33,9 @@ const ActiveTask = props => {
             }
             <div>
                 <span>1 godzinę temu</span>
-                <span>Zobacz <FontAwesomeIcon icon={faTasks} /> </span>
+                <Link href="/tasks">
+                    <span className="task-link">Zobacz <FontAwesomeIcon icon={faTasks} /> </span>
+                </Link>
             </div>
         </div>
     )

pages/components/Header.js

@@ -2,7 +2,9 @@ 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 = () => {
+const Header = props => {
+    const isLogged = props.isLogged === "logged";
+
     return (
         <header>
             <nav>
@@ -35,12 +37,19 @@ const Header = () => {
                         </li>
                     </div>
                     <div className="navbar-auth">
+                        {isLogged ?
+                        <li>
+                            <Link href="/profile">
+                                <a>User name</a>
+                            </Link>
+                        </li>:
                         <li>
                             <Link href="/login">
                                 <a><FontAwesomeIcon icon={faUser} /> Zaloguj się</a>
                             </Link>
                         </li>
-                        <li>
+                        }
+                        <li className={isLogged ? "hidden" : ""}>
                             <Link href="/register">
                                 <a><FontAwesomeIcon icon={faUserPlus} /> Zarejestruj się</a>
                             </Link>

pages/components/Profile.js

@@ -1,15 +1,30 @@
+import Link from 'next/link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTasks, faCloud, faSearch } from '@fortawesome/free-solid-svg-icons';
 
 const Profile = props => {
+    const isDeveloperAccount = props.accountType === "developer"
+
     return (
         <section className="task-description">
             <div className="task-description">
                 <div className="task-area">
-                    <div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Przeglądaj zadania</span></div>
-                    <div className="profile-action"><span><FontAwesomeIcon icon={faTasks} /></span><span>Dodaj zadanie</span></div>
-                    <div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz rozwiązania</span></div>
-                    <div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz wstawione zadania</span></div>
+                    <Link href="/active-tasks">
+                        <div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Przeglądaj zadania</span></div>
+                    </Link>
+                    {!isDeveloperAccount &&
+                    <Link href="/new-task-add">
+                        <div className="profile-action"><span><FontAwesomeIcon icon={faTasks} /></span><span>Dodaj zadanie</span></div>
+                    </Link>
+                    }
+                    <Link href="/added-tasks">
+                        <div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz rozwiązania</span></div>
+                    </Link>
+                    {!isDeveloperAccount && 
+                    <Link href="/added-tasks">
+                        <div className="profile-action"><span><FontAwesomeIcon icon={faSearch} /></span><span>Zobacz wstawione zadania</span></div>
+                    </Link>
+                    }
                 </div>
             </div>
         </section>

pages/profile.js

@@ -5,7 +5,7 @@ const ProfilePage = () => {
     return (
         <main>
             <Sidebar/>
-            <Profile/>
+            <Profile accountType=""/>
         </main>
     )
 };

style.css

@@ -30,6 +30,10 @@ body {
     height: 100%;
 }
 
+.hidden {
+    display: none;
+}
+
 /* navbar */
 
 header {
@@ -72,6 +76,11 @@ nav a {
     font-size: 80%;
 }
 
+nav a:hover {
+    background-color: #5D6CED;
+    color: #FFF;
+}
+
 @media (min-width: 400px) {
     nav a {
         font-size: 90%;
@@ -86,11 +95,6 @@ nav img {
     border: solid 1px rgba(255, 255, 255, .1);
 }
 
-.navbar-auth li:last-of-type a:last-of-type {
-    background-color: #5D6CED;
-    color: #FFF;
-}
-
 /* footer */
 
 footer {
@@ -541,7 +545,12 @@ div.task-description {
 .active-task > div:last-of-type span:last-of-type {
     border-radius: 4px;
     color: #FFF;
+    background: var(--button-blue-hover);
+}
+
+.active-task > div:last-of-type span:last-of-type:hover {
     background: var(--button-blue);
+    cursor: pointer;
 }
 
 /* active tasks */
@@ -601,6 +610,12 @@ div.solution-add-area {
     border-radius: 4px;
     background: #212844;
     color: #838DAC;
+    transition: .4s;
+}
+
+.solution-add-message-bottom button:hover {
+    background: #838DAC;
+    color: #212844;
 }
 
 .solution-add-status {