Add comment UI forum

src/app/tabs/courses/details/details.component.html

@@ -246,7 +246,10 @@
                     </div>
 
                     <ul class="comment-list">
-                        <button class="add-comment-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon> ADD A COMMENT </button>
+                        <button class="add-comment-button" (click)="showAddCommentToPost = true">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                            ADD A COMMENT
+                        </button>
                         <li class="comment">
                             <div class="author">
                                 <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
@@ -337,7 +340,10 @@
                     </div>
 
                     <ul class="comment-list">
-                        <button class="add-comment-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon> ADD A COMMENT </button>
+                        <button class="add-comment-button" (click)="showAddCommentToPost = true">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                            ADD A COMMENT
+                        </button>
                         <li class="comment">
                             <div class="author">
                                 <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
@@ -410,6 +416,18 @@
                     </li>
                 </ul>
             </section>
+
+
+            <section class="more-options-slideup" [ngClass]="{'active' : showAddCommentToPost }">
+                <header>
+                    <h4> Add Comment </h4>
+                    <button class="close-button" (click)="showAddCommentToPost = false">
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                    </button>
+                </header>
+                <textarea placeholder="Type your comment..."></textarea>
+                <button class="post-comment-button"> Submit </button>
+            </section>
         </section>
     </div>
 

src/app/tabs/courses/details/details.component.scss

@@ -436,6 +436,35 @@
             font-weight: 400;
         }
 
+        textarea {
+            display: block;
+            height: 150px;
+            resize: none;
+            background-color: var(--black);
+            font-size: 14px;
+            color: var(--light-grey);
+            padding: 15px;
+            border-radius: 7px;
+            width: 90%;
+            margin: 20px auto;
+            border: 0px;
+        }
+
+        .post-comment-button {
+            width: 90%;
+            margin: 20px auto;
+            height: 40px;
+            background-color: var(--dark-grey);
+            box-shadow: 1px 1px 5px var(--black);
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--light-grey);
+            font-size: 14px;
+            border: 0px;
+        }
+
         ul {
             position: relative;
             list-style: none;

src/app/tabs/courses/details/details.component.ts

@@ -15,6 +15,7 @@ export class DetailsComponent implements OnInit {
     selectedChapter: number = 1;
     showMorePostOptions: boolean = false;
     selectedPost: number;
+    showAddCommentToPost: boolean = false;
 
 	constructor(
         private route: ActivatedRoute,