From a6cd26202a22640c3d6a0f7447fe400ef830ff58 Mon Sep 17 00:00:00 2001
From: kj1352 <nikhilkj24@gmail.com>
Date: Tue, 23 Jun 2020 14:03:58 +0530
Subject: [PATCH] Partial commit --- Forum UI changes

---
 .../forum/forum.component.html                |  8 ++---
 .../forum/forum.component.scss                | 33 +++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/app/reusable-components/forum/forum.component.html b/src/app/reusable-components/forum/forum.component.html
index e13140a..bc97114 100644
--- a/src/app/reusable-components/forum/forum.component.html
+++ b/src/app/reusable-components/forum/forum.component.html
@@ -1,18 +1,18 @@
 <section class="forum-details">
     <section class="add-post" *ngIf="!isSubSegment">
         <div *ngIf="showAddPostInputs">
-            <textarea placeholder="Start a discussion"></textarea>
+            <textarea class="post-input" placeholder="Type your question here (ex: How one can determine planks constant?"></textarea>
             <div class="input-holder">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/hashtag.svg"></svg-icon>
-                <input type="text" placeholder="Hashtag">
+                <textarea type="text" placeholder="Write hashtags separated by comma here (ex: plank, h, Max Plank)"></textarea>
             </div>
             <div class="input-holder">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add-person.svg"></svg-icon>
-                <input type="text" placeholder="Tag person">
+                <input type="text" placeholder="Tag person ">
             </div>
             <div class="input-holder">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
-                <input type="text" placeholder="URL">
+                <textarea type="text" placeholder="Concerned URL link (ex: https://en.wikipedia.org/wiki/Planck_constant)"></textarea>
             </div>
             <div class="input-holder">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
diff --git a/src/app/reusable-components/forum/forum.component.scss b/src/app/reusable-components/forum/forum.component.scss
index 1f7dd00..51eee60 100644
--- a/src/app/reusable-components/forum/forum.component.scss
+++ b/src/app/reusable-components/forum/forum.component.scss
@@ -2,18 +2,24 @@
     .add-post {
         width: 90%;
         margin: 10px auto 20px;
-        textarea {
+        .post-input {
             border: 0px;
-            height: 70px;
+            height: 150px;
             display: block;
             width: 100%;
             font-size: 16px;
-            color: var(--light-grey);
+            color: white;
             padding: 10px;
             background-color: transparent;
-            border-bottom: 2px solid var(--dark-grey);
+            border: 2px solid var(--dark-grey);
+            border-radius: 7px;
             resize: none;
-            margin-bottom: 20px;
+            margin: 20px auto;
+
+            &::placeholder {
+                opacity: 0.8;
+                font-weight: 400;
+            }
         }
     }
 
@@ -26,7 +32,7 @@
         background-color: var(--ash-black);
         border-radius: 5px;
         padding: 10px;
-        height: 50px;
+        height: 55px;
 
         .icon {
             width: 20px;
@@ -34,19 +40,26 @@
             fill: var(--light-grey);
         }
 
-        input {
+        textarea, input {
             font-size: 14px;
             border: 0px;
             background-color: transparent;
             padding: 0 10px;
-            color: var(--light-grey);
+            color: white;
             display: block;
             flex-grow: 1;
+            resize: none;
 
-            &[type="file"] {
-                height: auto;
+            &::placeholder {
+                opacity: 0.8;
+                font-weight: 400;
             }
         }
+
+        input[type="file"] {
+            height: auto;
+            color: vaR(--light-grey);
+        }
     }
 
     .action-buttons {