Enhance ui for doctrine

app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb

@@ -1,37 +1,30 @@
-<div class="modal fade" id="doctrineModal" tabindex="-1" aria-labelledby="doctrineModal" aria-hidden="true">
+<div class="modal fade modal-doctrine-body" id="doctrineModal" tabindex="-1" aria-labelledby="doctrineModal" aria-hidden="true">
   <%= form_tag(opts[:form_url], method: opts[:form_method]) do %>
     <div class="modal-dialog modal-lg modal-dialog-scrollable">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title"> <%= opts[:form_method].eql?(:post) ? "New Doctrine" : "Update Doctrine" %> </h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          <button type="button" class="btn-close-x" data-bs-dismiss="modal" aria-label="Close">x</button>
         </div>
 
         <div class="modal-body">
-          <div class="row">
-            <div class="col-sm-12 p-2">
-              <strong> <%= label_tag :subjects %> </strong>
-              <%= select_tag "subject_ids[]", options_from_collection_for_select(subjects.sort_by { |sub| sub.lineage_name }, :id, :lineage_name, doctrine.subject_ids), class: "form-select subject-ids-selectize", multiple: true, prompt: "Please select" %>
-            </div>
+            <div class="mb-3">
+              <label for="subject-name" class="col-form-label">Subjects</label>
+              <%= select_tag "subject_ids[]", options_from_collection_for_select(subjects.sort_by { |sub| sub.lineage_name }, :id, :lineage_name, doctrine.subject_ids), class: "form-control subject-ids-selectize  ps-0", multiple: true, prompt: "Please select" %>
             </div>  
 
           <% if doctrine.new_record? %>
-            <div class="row">
-              <div class="col-sm-12 p-2">
-                <strong> <%= label_tag :doctine_content_suggestions %> </strong>
-                <select id="doctine_content_suggestions" class="form-select"> </select>
-              </div>
+            <div class="mb-3">
+              <label for="subject-name" class="col-form-label">Doctine content suggestions</label>
+              <select id="doctine_content_suggestions" class="form-control ps-0"> </select>
             </div>
           <% end %>
 
-          <div class="row">
-            <div class="col-sm-12 p-2">
-              <strong> <%= label_tag :content %> </strong>
+          <div class="mb-3">
+            <label for="subject-name" class="col-form-label">Content</label>
             <%= rich_text_area_tag :content, doctrine.content, placeholder: "Doctrine Content" %>
           </div>
         </div>
-        </div>
-
         <div class="modal-footer">
           <button type="submit" class="btn btn-primary">Save</button>
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

app/components/document_doctrine_index_component/document_doctrine_index_component.html.erb

@@ -1,17 +1,17 @@
-<div class="card card-header row-flex m-3 clickable-link" href="<%= opts[:is_disable_clickable_link].present? ? '#' : document_doctrine_path(document_id, id)%>">
+<div class="row-flex m-3 mt-0 doctrine-content-body clickable-link" href="<%= opts[:is_disable_clickable_link].present? ? '#' : document_doctrine_path(document_id, id)%>">
   <% if opts[:is_subjects_index].blank? %>
     <% if opts[:is_doctrines_index].present? && opts[:subject_ids].reject(&:blank?).present? %>
-      <h4> <%= subjects.where(id: opts[:subject_ids].map(&:to_i)).map(&:lineage_name).join(" ") %> </h4>
+      <h5 style="color: darkred;"> <%= subjects.where(id: opts[:subject_ids].map(&:to_i)).map(&:lineage_name).join(" ") %> </h5>
     <% elsif subjects.present? %>
       <% subjects.each do |subject| %>
-        <h4> <%= subject.lineage_name %> </h4>
+        <h5 style="color: darkred;"> <%= subject.lineage_name %> </h5>
       <% end %>
     <% else %>
-      <h4> (No Subjects Provided) </h4>
+      <h5> (No Subjects Provided) </h5>
     <% end %>
   <% end %>
   
-  <div class="container-sm <%= opts[:is_subjects_index].present? ? 'm-0 ps-0' : 'ms-3' %>">
+  <div class="container-sm <%= opts[:is_subjects_index].present? ? 'm-0 ps-0' : '' %>">
     <p class="mb-0"> <%= raw content.html_safe %> </p>
    
     <div class="container-sm ms-3">
@@ -48,4 +48,6 @@
       <% end %>
     </div>
   </div>
+
+  <hr/>
 </div>

app/components/pagination_component/pagination_component.html.erb

@@ -1,9 +1,9 @@
 <div class="col col-md-12">
   <header class="header bg-white b-b clearfix">
     <div class="row m-t-sm align-items-end pagination-body">
-      <div class="col-md-6">
+      <div class="col-md-6 mb-0">
         <% if opts[:is_subject_breadcrums].present? && subjects.present? %>
-          <ol class="breadcrumb">
+          <ol class="breadcrumb mb-0">
             <% subjects.each do |subject| %>
               <% subject.ancestors.each do |ancestor| %>
                 <li class="breadcrumb-item d-inline-flex"> 
@@ -30,4 +30,5 @@
       </div>
     </div>
   </header>
+  <hr class="mt-0"/>
 </div>

app/views/doctrines/search.html.erb

@@ -1,5 +1,5 @@
-<div class="card container-sm mt-1 p-0"> 
-  <div class="container m-2"> <%= render PaginationComponent.new(data: @doctrines, opts: { is_subject_breadcrums: true, subject_ids: params[:subject_ids] }) %> </div>
+<div class="container-sm mt-1 p-0 doctrine-index-body"> 
+  <div class="container m-2 ps-0"> <%= render PaginationComponent.new(data: @doctrines, opts: { is_subject_breadcrums: true, subject_ids: params[:subject_ids] }) %> </div>
 
   <% if params[:is_index_table].to_s.eql?("true") %>
     <div class="card-body col-sm-12 tableFixHead p-0 mt-1">