Merge branch 'jonathan' into 'master'

Jonathan

See merge request !35

src/components/Search.jsx

@@ -42,7 +42,7 @@ export default function Search(props) {
       </h1>
       <ThreadList thread={threads} />
       {totalItems == 0 && (
-        <p>Can't find any thread with your keyword.</p>
+        <p>No threads with keyword "{searchParam}" found.</p>
       )}
       {totalItems != 0 && (
         <div className="paginationContainer">

src/components/thread/Thread.jsx

@@ -112,20 +112,22 @@ export default function Thread(props) {
         <div id="addCommentSection">
           <h3>Write a Comment</h3>
           <form onSubmit={handleSubmit}>
-            <textarea
-              className="commentBox"
-              placeholder="Write your comment here"
-              required="false"
-              {...bindInput}
-            />
-            <div>
-              <button
-                className="submitComment"
-                id="addCommentButton"
-                type="submit"
-              >
-                Post Comment
-              </button>
+            <div className="commentFormContainer">
+              <textarea
+                className="commentBox"
+                placeholder="Write your comment here"
+                required="false"
+                {...bindInput}
+              />
+              <div>
+                <button
+                  className="submitComment"
+                  id="addCommentButton"
+                  type="submit"
+                >
+                  Post Comment
+                </button>
+              </div>
             </div>
           </form>
         </div>

src/components/utility/Navbar.jsx

@@ -49,7 +49,7 @@ const Navbar = (props) => {
             className="form-control mr-sm-2"
             placeholder="Search thread"
             aria-label="Search"
-            required={false}
+            required="false"
             {...bindSearch}
           />
           <button className="btn my-2 my-sm-0 search" type="submit">

src/styles/App.css

+body {
+    min-height: 100vh;
+}
+
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     p {
         font-size: 14px;

src/styles/LoginForm.css

@@ -7,7 +7,8 @@
     align-items: center;
     color: #003F5A;
     font-family: "DM Sans";
-    margin-bottom: 184px;
+    min-height: 100vh;
+    margin-bottom: 72px;
 }
 
 .loginFormContainer h1{

src/styles/Search.css

 .searchresultContainer {
-    margin: 36px 72px
+    margin: 36px 72px;
+    min-height: 100vh;
+    margin-bottom: 72px;
 }
 
 .searchresultContainer h1{

src/styles/profile/Profile.css

@@ -2,6 +2,8 @@
     margin-top: 36px;
     margin-left: 72px;
     margin-right: 72px;
+    min-height: 100vh;
+    margin-bottom: 72px;
 }
 
 .profile_section {

src/styles/thread/Form.css

 .formContainer {
     margin: 36px 72px!important;
+    min-height: 100vh;
+    margin-bottom: 72px;
 }
 
 .back {

src/styles/thread/ListThreads.css

@@ -37,7 +37,9 @@
 .listThreadsContainer {
     margin-top: 36px;
     margin-left: 72px;
-    margin-right:72px;
+    margin-right: 72px;
+    min-height: 100vh;
+    margin-bottom: 72px;
 }
 
 .header h1 {

src/styles/thread/Thread.css

@@ -3,10 +3,11 @@
     justify-content: center;
     flex-direction: column;
     margin-top: 36px;
-    margin-bottom: 36px;
     font-family: "DM Sans";
     margin-left: 72px;
     margin-right: 72px;
+    min-height: 100vh;
+    margin-bottom: 72px;
 }
 
 .back {
@@ -53,7 +54,7 @@
 }
 
 .commentBox {
-    min-width: 1120px;
+    min-width: 1056px;
     max-width: 1776px;
     font-family: "DM Sans";
     height: 120px;
@@ -83,6 +84,11 @@ textarea:focus {
     margin-bottom: 0px!important;
 }
 
+.commentFormContainer {
+    display: flex;
+    flex-direction: column;
+}
+
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     .threadContainer {
         margin-top: 24px;

src/styles/topic/Topic.css

@@ -2,6 +2,8 @@
     margin-top: 36px;
     margin-left: 72px;
     margin-right: 72px;
+    min-height: 100vh;
+    margin-bottom: 72px;
 }
 
 .header h1 {

src/styles/topic/TopicList.css

@@ -7,7 +7,6 @@
 
 .topics {
     display: flex;
-    justify-content: center;
 }
 
 .topicCards {
@@ -51,6 +50,11 @@
         font-size: 16px;
     }
 
+    .topicCard {
+        width: 200px;
+        min-height: 108px;
+    }
+
     .topicContainer h1{
         font-family: "DM Sans";
         font-size: 28px;

src/styles/utility/Footer.css

@@ -4,7 +4,6 @@
     justify-content: space-between;
     font-family: "DM Sans";
     padding: 36px 72px;
-    margin-top: 72px;
 }
 
 #fasilkomLogo p {