From 2bc3b6f3d95f6e654ff93f0d72a678c1ee5e0a92 Mon Sep 17 00:00:00 2001
From: FilipHalon <halon.filip@gmail.com>
Date: Mon, 20 Jan 2020 12:33:29 +0100
Subject: [PATCH] Profile page ready.

---
 pages/components/Profile.js | 19 +++++++++++++++++++
 pages/profile.js            | 13 +++++++++++++
 style.css                   | 30 ++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 pages/components/Profile.js
 create mode 100644 pages/profile.js

diff --git a/pages/components/Profile.js b/pages/components/Profile.js
new file mode 100644
index 0000000..fd64cbc
--- /dev/null
+++ b/pages/components/Profile.js
@@ -0,0 +1,19 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTasks, faCloud, faSearch } from '@fortawesome/free-solid-svg-icons';
+
+const Profile = props => {
+    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>
+                </div>
+            </div>
+        </section>
+    )
+};
+
+export default Profile;
diff --git a/pages/profile.js b/pages/profile.js
new file mode 100644
index 0000000..7165b18
--- /dev/null
+++ b/pages/profile.js
@@ -0,0 +1,13 @@
+import Sidebar from "./components/Sidebar";
+import Profile from "./components/Profile";
+
+const ProfilePage = () => {
+    return (
+        <main>
+            <Sidebar/>
+            <Profile/>
+        </main>
+    )
+};
+
+export default ProfilePage;
diff --git a/style.css b/style.css
index e836093..1630e35 100644
--- a/style.css
+++ b/style.css
@@ -656,3 +656,33 @@ form.solution-add-area > div:last-of-type button {
 form.solution-add-area > div:last-of-type button:hover {
     background-color: var(--button-green-hover);
 }
+
+/* profile */
+
+.profile-action {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    border-radius: 4px;
+    box-shadow: 0px 7px 14px #32325D1A;
+    background: #FFF;
+    font-size: 130%;
+    cursor: pointer;
+    transition: .4s;
+}
+
+.profile-action:hover {
+    background: #838DAC;
+    color: #FFF;
+}
+
+.profile-action span {
+    padding-right: .5rem;
+    padding-bottom: .5rem;
+}
+
+.profile-action svg {
+    font-size: 140%;
+    color: var(--button-orange)
+}