fix: improved some inconsitent UI

UI changes includes following
- instead of too many boxes i.e borders on the all thread page, with the
  help of just right side border to side panel. it is much more readable
- previously link of the thread was title now, I improved it to have
  thread card as link since there was no other clickable items in the
  card
- in the forum_post template, now meta data of forum post like post
  author and edit, delete action buttons are now visually separated from
  the post using just background color

app/assets/stylesheets/simple_discussion.scss

@@ -4,11 +4,8 @@
 @import "simple_discussion_variables";
 
 .community-heading {
-  margin-top: 10px;
-  width: 95%;
   color: #212529;
-  margin-left: 4rem;
-  margin-bottom: 24px;
+  padding-block: 12px;
 }
 
 // Primary button for Forum
@@ -236,32 +233,30 @@
   border: 1px solid #80808029;
   border-radius: 3px;
   padding: 20px;
+
+  &:hover {
+    text-decoration: none;
+    background-color: $forum-thread-filter-btn-link-hover-background;
+
+  }
 }
 
 // Formatting forum post
 .simple_discussion .forum-post {
-  padding: 10px;
   border-radius: $post-body-border-radius;
   margin-bottom: 10px;
   border: 1px solid #80808029;
 
-  &:hover {
-    background-color: #f4f3f3;
-  }
-
   .card-body {
-    padding: 10px;
-
-    p {
-      font-size: 14px;
-    }
+    margin-top: 16px;
   }
 }
 
 // Formatting the listtile for user details
 .simple_discussion .forum-post .forum-post-header,
 .form-user-details {
-  padding: 0 10px;
+  padding: 10px;
+  background-color: $forum-thread-filter-btn-link-hover-background;
 
   p {
     padding: 0;
@@ -295,10 +290,9 @@
 
 .sidebar-sticky {
   position: sticky;
-  top: 120px;
+  top: 60px;
 }
 
 .thread-page-container {
-  border: 1px solid #80808029;
-  padding: 15px;
+  padding: 24px;
 }

app/views/layouts/simple_discussion.html.erb

@@ -1,8 +1,8 @@
 <div>
-  <h1 class="community-heading"><%= t('community') %></h1>
   <div class="row simple_discussion mt-2">
-    <div class="col-md-2 mb-3">
+    <div class="col-lg-2 mb-3 border-right">
       <div class="col sidebar-sticky">
+        <h2 class="community-heading"><%= t('community') %></h2>
         <%= link_to t('ask_a_question'), simple_discussion.new_forum_thread_path, class: "btn forum-primary-btn btn-block mb-4" %>
 
         <div class="forum-thread-filters">
@@ -60,7 +60,7 @@
 
     </div>
 
-    <div class="col-md-10 mb-3 thread-page-container">
+    <div class="col-lg-10 mb-3 thread-page-container">
       <%= yield %>
     </div>
   </div>

app/views/simple_discussion/forum_posts/_forum_post.html.erb

@@ -27,7 +27,7 @@
     </div>
   </div>
 
-  <div class="card-body pb-0">
+  <div class="card-body p-3">
     <%= formatted_content forum_post.body %>
   </div>
 

app/views/simple_discussion/forum_threads/_forum_thread.html.erb

@@ -1,13 +1,13 @@
 <%= cache forum_thread do %>
-  <div class="forum-thread d-flex flex-row mb-4">
+  <%= link_to simple_discussion.forum_thread_path(forum_thread), class: "forum-thread d-flex flex-row mb-4" do %>
     <div class="mr-3 d-none d-md-block">
       <img class="avatar" src="<%= gravatar_url_for(forum_thread.user.email,size: 30) %>" alt="user avatar">
     </div>
     <div class="thread-container">
       <div class="thread-header d-flex flex-row justify-content-between mb-1">
-        <%= link_to simple_discussion.forum_thread_path(forum_thread), class: "thread-header-title" do %>
+        <div class="thread-header-title">
           <%= icon "fas", "thumb-tack", class: "text-muted" if forum_thread.pinned? %> <%= forum_thread.title %>
-        <% end %>
+        </div>
         <div class="thread-header-icons d-flex flex-row">
           <div class="chat-icon mr-3">
             <%= icon "fas", "comments" %>
@@ -39,5 +39,5 @@
         </div>
       </div>
     </div>
-  </div>
+  <% end %>
 <% end %>