Partial commit forum UI

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

@@ -20,8 +20,8 @@
         [ngClass]="{'active': selectedSegment === 'resources' }"> Resources </button>
         <button (click)="selectedSegment='grades'"
         [ngClass]="{'active': selectedSegment === 'grades' }"> Grades </button>
-        <button (click)="selectedSegment='forums'"
-        [ngClass]="{'active': selectedSegment === 'forums' }"> Forums </button>
+        <button (click)="selectedSegment='forum'"
+        [ngClass]="{'active': selectedSegment === 'forum' }"> Forum </button>
     </header>
 
     <section class="test-prompt">
@@ -183,6 +183,21 @@
                 </li>
             </a>
         </ul>
+
+
+        <!-- <section class="forum-details">
+            <section class="add-post">
+                <textarea placeholder="Start a discussion"></textarea>
+                <div class="input-holder">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/hashtag.svg"></svg-icon>
+                    <input type="text" placeholder="Tags">
+                </div>
+                <div class="input-holder">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add-person.svg"></svg-icon>
+                    <input type="text" placeholder="Tags">
+                </div>
+            </section>
+        </section> -->
     </div>
 
 </div>

src/assets/custom-icons/add-person.svg

@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="User_Male_Add" data-name="User Male Add"><g id="Glyph"><path d="m162.229 85.855a68.116 68.116 0 0 1 34.571 9.439l12.175 7.179.367.245a55.267 55.267 0 0 0 61.313 0l.367-.245 12.178-7.179a68.113 68.113 0 0 1 34.572-9.439 66.083 66.083 0 0 1 45.887 18.168 125.954 125.954 0 0 0 -31-63.169 125.491 125.491 0 0 0 -185.306 0 125.964 125.964 0 0 0 -31.006 63.169 66.087 66.087 0 0 1 45.882-18.168z"/><path d="m258.416 417.542a18.421 18.421 0 0 0 -18.248-14.915h-.168a79.745 79.745 0 0 1 -79.92-76.788 5.837 5.837 0 0 0 -6.88-5.739l-87.51 15.911a80 80 0 0 0 -65.69 78.705v89.284a8 8 0 0 0 8 8h48a8 8 0 0 0 8-8v-69.1a8.183 8.183 0 0 1 7.468-8.257 8 8 0 0 1 8.532 7.984v69.373a8 8 0 0 0 8 8h213.6c7.5 0 10.926-9.457 5.089-14.172a136.116 136.116 0 0 1 -48.273-80.286z"/><path d="m392 272a120 120 0 1 0 120 120 120.136 120.136 0 0 0 -120-120zm72 144h-48v48h-48v-48h-48v-48h48v-48h48v48h48z"/><path d="m242.475 312a110.188 110.188 0 0 1 -103.517-72.475 36.628 36.628 0 0 1 -29.676-27.31l-4.4-17.6a28.093 28.093 0 0 1 5.04-24.387 27.205 27.205 0 0 1 12.038-8.623l-3.3-23.945a16.074 16.074 0 0 1 1.822-9.9 49.494 49.494 0 0 1 4.218-6.46c15.649-20.338 44.34-25.267 66.443-12.23l11.8 6.961a71.283 71.283 0 0 0 79.064 0l11.8-6.962c22.1-13.037 50.793-8.107 66.441 12.231a49.4 49.4 0 0 1 4.22 6.462 16.081 16.081 0 0 1 1.822 9.9l-3.3 23.945a27.386 27.386 0 0 1 17.237 32.368l-4.559 18.24a36.625 36.625 0 0 1 -29.675 27.31 110.19 110.19 0 0 1 -103.518 72.475z"/></g></g></svg>

src/assets/custom-icons/hashtag.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="-31 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m30 316c-16.570312 0-30 13.429688-30 30 0 16.566406 13.429688 30 30 30h59l-14 106c0 16.566406 13.429688 30 30 30s30-13.433594 30-30l14-106h120l-14 106c0 16.566406 13.429688 30 30 30s30-13.433594 30-30l14-106h61c16.570312 0 30-13.433594 30-30 0-16.570312-13.429688-30-30-30h-53l16-120h67c16.570312 0 30-13.433594 30-30 0-16.570312-13.429688-30-30-30h-59l14-106c0-16.570312-13.429688-30-30-30s-30 13.429688-30 30l-14 106h-120l14-106c0-16.570312-13.429688-30-30-30s-30 13.429688-30 30l-14 106h-61c-16.570312 0-30 13.429688-30 30 0 16.566406 13.429688 30 30 30h53l-16 120zm143-120h120l-16 120h-120zm0 0"/></svg>