Enahnce ui for documents

app/javascript/src/application/table.scss

@@ -0,0 +1,8 @@
+
+.table > :not(:first-child) {
+  border-top: none !important;
+}
+
+thead tr {
+  border-bottom: 2px solid #782525
+}

app/views/documents/index.html.erb

@@ -1,15 +1,14 @@
-<div class="card mt-2 g-3">
-  <div class="card-header mt-1 col-sm-12">
+
+<div class="container">
   <%= form_tag(documents_path, method: :get) do %>
-      <div class="row">
-        <div class="col-sm-8 p-2">
-          <%= text_field_tag :q, params[:q], class: "form-control" %>
+    <div class="row justify-content-center">
+      <div class="col-sm-8 col-md-7 col-lg-8 col-xl-9 p-2 ps-1">
+        <%= text_field_tag :q, params[:q], placeholder:  'Full text search',  class: "form-control" %>
       </div>
 
-        <div class="col-sm-4 p-2">
-          <%= submit_tag "Search", class: "btn btn-primary text-dark" %>
-          <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#citationFinder"> Citation Finder </button>
-
+      <div class="col-sm-4 col-md-5 col-lg-4 col-xl-3 mt-2 d-flex justify-content-end align-items-baseline">
+        <%= submit_tag "Search", class: "btn btn-primary text-white me-3" %>
+        <button type="button" class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#citationFinder"> Citation Finder </button>
         <div class="modal fade" id="citationFinder" tabindex="-1" aria-labelledby="citationFinder" aria-hidden="true">
           <%= form_tag(documents_path, method: :get) do %>
             <div class="modal-dialog modal-lg modal-dialog-scrollable">
@@ -25,6 +24,7 @@
                         <%= text_field_tag :citation_finder, params[:citation_finder], class: "form-control", placeholder: "PHILREP/SCRA" %>
                       </div>
                     </div>
+                </div>
 
                 <div class="modal-footer">
                   <button type="submit" class="btn btn-primary">Search</button>
@@ -36,13 +36,17 @@
         </div>
       </div>
     </div>
+  
   <% end %>
 </div>
-
-  <div class="card-body col-sm-12 tableFixHead p-0 mt-1">
+</div>
 <% if @search_params.present? %>     
   <div class="container m-2"> <%= render PaginationComponent.new(data: @jurisprudences) %> </div>
-      <table class="table table-striped table-hover mb-0">
+  <hr style="margin: 0 18px;"/>
+  <div class="card-header mt-1 col-sm-12 bg-transparent">
+    <div class="card g-3 " style="border:none;">
+      <div class="card-body col-sm-12 tableFixHead p-0">
+        <table class="table table-hover mb-0">
           <thead>
             <th class="bg-light"> Reference No. </th>
             <th class="bg-light"> Title </th>
@@ -53,6 +57,7 @@
             <%= render(DocumentIndexTableComponent.with_collection(@jurisprudences, current_user: current_user, opts: {})) %>
           </tbody>
         </table>
-    <% end %>
       </div>
     </div>
+  </div>
+<% end %>

app/views/layouts/application.html.erb

@@ -20,7 +20,7 @@
         </div>
       <% end %>
 
-      <div class="<%= current_user.present? ? 'col py-3' : 'col-sm-3 login-body-box' %>">
+      <div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-3 login-body-box' %>">
         <div class="content-body">
           <%= yield %>
         </div>