Solution added page prepared.

pages/components/ActiveTask.js

@@ -1,6 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTasks } from '@fortawesome/free-solid-svg-icons';
-import ActiveTasks from './ActiveTasks';
 
 const ActiveTask = () => {
     return (

pages/components/SolutionAdded.js

@@ -0,0 +1,46 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLightbulb, faCheck, faLongArrowAltRight, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
+
+const SolutionAdd = () => {
+    return (
+        <section className="task-description">
+            <div className="task-description">
+                <div className="task-general-info">
+                    <div>
+                        <h2>Implementacja algorytmu sortowania</h2>
+                        <h2>Uniwersytet im. Adama Mickiewicza</h2>
+                    </div>
+                    <div>
+                        <img src="/UAM-logo-siw-amu.jpg" alt="" />
+                    </div>
+                </div>
+                <div className="task-border">
+                    <div className="task-description-heading">
+                        <FontAwesomeIcon icon={faLightbulb} />
+                        <span>Zgłaszanie rozwiązania</span>
+                    </div>
+                    <div className="solution-add-area">
+                        <div className="solution-add-message">
+                            <div className="solution-add-message-top">
+                                <div><FontAwesomeIcon icon={faLightbulb} /></div>
+                                <div>
+                                    <span>Twoje rozwiązanie trafiło do skrzynki Microsoft Polska Inc.</span>
+                                    <span><FontAwesomeIcon icon={faLongArrowAltRight} /> Wysłanych rozwiązań: 1</span>
+                                </div>
+                            </div>
+                            <div className="solution-add-message-bottom">
+                                <button><FontAwesomeIcon icon={faPaperPlane} /> Wyślij wiadomość</button>
+                            </div>
+                        </div>
+                        <div className="solution-add-status">
+                            <FontAwesomeIcon icon={faCheck} />
+                            <span> Rozwiązanie wysłano pomyślnie</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+};
+
+export default SolutionAdd;

pages/solution-added.js

@@ -0,0 +1,14 @@
+import Sidebar from "./components/Sidebar";
+import SolutionAdd from "./components/SolutionAdded";
+
+
+const SolutionAddedPage = () => {
+    return(
+        <main className="solution-add">
+            <Sidebar />
+            <SolutionAdd />
+        </main>
+    )
+};
+
+export default SolutionAddedPage;

style.css

@@ -514,3 +514,63 @@ div.task-description {
     grid: auto / 1fr 1fr;
     grid-gap: 2em;
 }
+
+/* solution add */
+
+main.solution-add .task-description {
+    width: 90%;
+    height: 100%;
+}
+
+.solution-add-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 400px;
+}
+
+.solution-add-message {
+    margin: 2rem 4rem;
+}
+
+.solution-add-message-top {
+    display: flex;
+    background: #4457F3;
+    color: #FFF;
+}
+
+.solution-add-message-top div {
+    padding: .6rem;
+}
+
+.solution-add-message-top > div:last-of-type {
+    display: flex;
+    flex-direction: column;
+}
+
+.solution-add-message-top > div:last-of-type span {
+    padding: .3rem;
+}
+
+.solution-add-message-bottom {
+    background: #212844;
+}
+
+.solution-add-message-bottom button {
+    padding: .2rem;
+    margin: .5rem 1.5rem;
+    border: 1px solid #838DAC;
+    border-radius: 4px;
+    background: #212844;
+    color: #838DAC;
+}
+
+.solution-add-status {
+    align-self: center;
+    padding: .6rem;
+    margin: 1.5rem;
+    border-radius: 4px;
+    background: #4457F3;
+    color: #FFF;
+    text-align: center;
+}