Style help modal headings and improve UI across various tools pages (#497)

Author: nblasd

app/views/community/tool_help.html.erb

@@ -20,7 +20,7 @@
         <% docs[1..].each_with_index do |doc, i| %>
           <div class="section tw-mb-2">
             <% if doc[:type] == 'heading' %>
-              <h3>
+              <h3 class="tw-text-lg tw-font-semibold tw-mt-8 tw-mb-4 tw-text-gray-900 tw-border-b tw-pb-2">
                 <%= safe_html doc[:text] %>
               </h3>
             <% elsif doc[:type] == 'info' %>

app/views/mushaf_layouts/edit.html.erb

@@ -19,22 +19,24 @@
   more_action << link_to('Compare with', '#_', class: 'tw-block tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100', data: { controller: 'ajax-modal', url: mushaf_layout_path(@mushaf.id, page_number: page_number, view_type: 'select_compare_mushaf') })
   more_action << link_to('Jump to page', '#_', class: 'tw-block tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100', data: { controller: 'ajax-modal', url: mushaf_layout_path(@mushaf.id, page_number: page_number, view_type: 'select_page', previous_view_type: params[:view_type], compare: @compared_mushaf&.id, edit: true) })
 
-  actions << "<div class='tw-relative' data-controller='dropdown'>
-      <button class='tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
+  actions << %Q{
+    <div class='tw-relative' data-controller='dropdown'>
+      <button class='tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center tw-gap-2' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
         Actions
+        <svg class='tw-w-4 tw-h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+          <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
+        </svg>
       </button>
       <ul class='tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-50 tw-hidden' data-dropdown-target='menu'>
-       #{more_action.map do |action|
-    "<li>#{action}</li>"
-  end.join('')
+        #{more_action.map { |action| "<li>#{action}</li>" }.join('')}
+      </ul>
+    </div>
   }
-    </ul>
-    </div>"
 
-  actions << link_to('Previous Page', edit_mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number - 1, view_type: params[:view_type]), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors', data: turbo_mushaf_page_options)
-  actions << link_to('Next page', edit_mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number + 1, view_type: params[:view_type]), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors', data: turbo_mushaf_page_options)
+  actions << link_to('Previous Page', edit_mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number - 1, view_type: params[:view_type]), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center', data: turbo_mushaf_page_options)
+  actions << link_to('Next page', edit_mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number + 1, view_type: params[:view_type]), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center', data: turbo_mushaf_page_options)
 
-  actions << link_to('Back to mushaf list', mushaf_layouts_path, class: 'btn btn-info')
+  actions << link_to('Back to mushaf list', mushaf_layouts_path, class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
 %>
 
 <%= turbo_frame_tag :page do %>

app/views/mushaf_layouts/show_page.html.erb

@@ -26,22 +26,24 @@
   more_action << link_to('Compare with', '#_', class: 'tw-block tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100', data: { controller: 'ajax-modal', url: mushaf_layout_path(@mushaf.id, page_number: page_number + 1, view_type: 'select_compare') })
   more_action << link_to('Jump to page', '#_', class: 'tw-block tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100', data: { controller: 'ajax-modal', url: mushaf_layout_path(@mushaf.id, page_number: page_number, compare: @compared_mushaf&.id, view_type: 'select_page', previous_view_type: params[:view_type]) })
 
-  actions << "<div class='tw-relative' data-controller='dropdown'>
-      <button class='tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
+  actions << %Q{
+    <div class='tw-relative' data-controller='dropdown'>
+      <button class='tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center tw-gap-2' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
         Actions
+        <svg class='tw-w-4 tw-h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+          <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
+        </svg>
       </button>
       <ul class='tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-50 tw-hidden' data-dropdown-target='menu'>
-       #{more_action.map do |action|
-    "<li>#{action}</li>"
-  end.join('')
+        #{more_action.map { |action| "<li>#{action}</li>" }.join('')}
+      </ul>
+    </div>
   }
-    </ul>
-    </div>"
 
-  actions << link_to('Previous Page', mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number - 1, view_type: params[:view_type]), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors', data: turbo_mushaf_page_options)
-  actions << link_to('Next page', mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number + 1, view_type: params[:view_type]), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors', data: turbo_mushaf_page_options)
+  actions << link_to('Previous Page', mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number - 1, view_type: params[:view_type]), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center', data: turbo_mushaf_page_options)
+  actions << link_to('Next page', mushaf_layout_path(@mushaf.id, compare: @compared_mushaf&.id, page_number: page_number + 1, view_type: params[:view_type]), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center', data: turbo_mushaf_page_options)
 
-  actions << link_to('Back to all pages', mushaf_layout_path(@mushaf.id), class: 'btn btn-info', data: {turbo_frame: '_top'})
+  actions << link_to('Back to all pages', mushaf_layout_path(@mushaf.id), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center', data: {turbo_frame: '_top'})
 %>
 
 <%= turbo_frame_tag :page do %>

app/views/tafsir_proofreadings/show.html.erb

@@ -20,30 +20,32 @@
   more_action << link_to('Proofreading view(With pdf)', tafsir_proofreading_path(@tafisr.id, resource_id: @resource.id, view_type: 'page_with_pdf'), class: 'tw-block tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100')
 
   if @access
-    actions << link_to('Edit', edit_tafsir_proofreading_path(@tafisr.id, resource_id: @resource.id), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors')
+    actions << link_to('Edit', edit_tafsir_proofreading_path(@tafisr.id, resource_id: @resource.id), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
   end
 
-  actions << "<div class='tw-relative' data-controller='dropdown'>
-      <button class='tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
+  actions << %Q{
+    <div class='tw-relative' data-controller='dropdown'>
+      <button class='tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center tw-gap-2' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
         Change view
+        <svg class='tw-w-4 tw-h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+          <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
+        </svg>
       </button>
       <ul class='tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-50 tw-hidden' data-dropdown-target='menu'>
-       #{more_action.map do |action|
-    "<li>#{action}</li>"
-  end.join('')
+        #{more_action.map { |action| "<li>#{action}</li>" }.join('')}
+      </ul>
+    </div>
   }
-    </ul>
-    </div>"
 
   if previous_ayah
-    actions << link_to('Previous ayah', tafsir_proofreading_path(@tafisr.id, resource_id: @resource.id, draft: params[:draft], verse_key: previous_ayah.verse_key), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors')
+    actions << link_to('Previous ayah', tafsir_proofreading_path(@tafisr.id, resource_id: @resource.id, draft: params[:draft], verse_key: previous_ayah.verse_key), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
   end
 
   if next_ayah
-    actions << link_to('Next ayah', tafsir_proofreading_path(@tafisr.id, resource_id: @resource.id, draft: params[:draft], verse_key: next_ayah.verse_key), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors')
+    actions << link_to('Next ayah', tafsir_proofreading_path(@tafisr.id, resource_id: @resource.id, draft: params[:draft], verse_key: next_ayah.verse_key), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
   end
 
-  actions << link_to('Back to filter', tafsir_proofreadings_path(resource_id: @resource.id), class: 'btn btn-outline-info tw-text-sm')
+  actions << link_to('Back to filter', tafsir_proofreadings_path(resource_id: @resource.id), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-white tw-border tw-border-blue-600 tw-text-blue-600 hover:tw-bg-blue-600 hover:tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
 %>
 
 <%= render 'tools/header',

app/views/tools/_header.html.erb

@@ -30,9 +30,9 @@
       <h2 class="tw-text-2xl md:tw-text-3xl tw-leading-none tw-text-pretty">
         <%= safe_html title %>
       </h2>
-      <div class="tw-flex tw-gap-1 tw-mt-3 md:tw-mt-0">
+      <div class="tw-flex tw-items-center tw-gap-1 tw-mt-3 md:tw-mt-0">
         <% if local_assigns[:help] != false %>
-          <%= link_to '#', class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-white tw-border tw-border-blue-500 tw-text-blue-500 hover:tw-bg-blue-500 hover:tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center group', data: { controller: 'ajax-modal', url: tools_help_path(help_key), css_class: 'modal-lg tools-help' } do %>
+          <%= link_to '#', class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-white tw-border tw-border-blue-500 tw-text-blue-500 hover:tw-bg-blue-500 hover:tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center group', data: { controller: 'ajax-modal', url: tools_help_path(help_key), css_class: 'modal-lg tools-help' } do %>
             <span class="tw-w-5 tw-h-5 tw-rounded-full tw-bg-blue-500 tw-text-white tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-normal tw-leading-none tw-mr-2 group-hover:tw-bg-white group-hover:tw-text-blue-500 tw-transition-colors">i</span> Help
           <% end %>
         <% end %>

app/views/translation_proofreadings/show.html.erb

@@ -17,43 +17,45 @@
   more_action << link_to('Page with arabic view', translation_proofreading_path(verse.id, resource_id: @resource.id, view_type: 'page_with_arabic'), class: 'tw-block tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100')
   more_action << link_to('Proofreading view(With pdf)', translation_proofreading_path(verse.id, resource_id: @resource.id, view_type: 'page_with_pdf'), class: 'tw-block tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100')
 
-  actions << "<div class='tw-relative' data-controller='dropdown'>
-      <button class='tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
+  actions << %Q{
+    <div class='tw-relative' data-controller='dropdown'>
+      <button class='tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-green-600 hover:tw-bg-green-700 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center tw-gap-2' type='button' data-action='click->dropdown#toggle' aria-expanded='false'>
         Change view
+        <svg class='tw-w-4 tw-h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+          <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
+        </svg>
       </button>
       <ul class='tw-absolute tw-right-0 tw-mt-2 tw-w-56 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-z-50 tw-hidden' data-dropdown-target='menu'>
-       #{more_action.map do |action|
-    "<li>#{action}</li>"
-  end.join('')
+        #{more_action.map { |action| "<li>#{action}</li>" }.join('')}
+      </ul>
+    </div>
   }
-    </ul>
-    </div>"
 
   if view_type == 'ayah'
     previous_ayah = verse.previous_ayah
     next_ayah = verse.next_ayah
     if previous_ayah
-      actions << link_to('Previous ayah', translation_proofreading_path(previous_ayah.id, resource_id: @resource.id), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors')
+      actions << link_to('Previous ayah', translation_proofreading_path(previous_ayah.id, resource_id: @resource.id), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
     end
     if next_ayah
-      actions << link_to('Next ayah', translation_proofreading_path(next_ayah.id, resource_id: @resource.id), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors')
+      actions << link_to('Next ayah', translation_proofreading_path(next_ayah.id, resource_id: @resource.id), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
     end
   else
     page = verse.page_number
 
     if page > 1
       previous_ayah = Verse.where(page_number: page - 1).order('verse_index ASC').first
-      actions << link_to('Previous page', translation_proofreading_path(previous_ayah.id, resource_id: @resource.id, view_type: params[:view_type]), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors')
+      actions << link_to('Previous page', translation_proofreading_path(previous_ayah.id, resource_id: @resource.id, view_type: params[:view_type]), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
     end
 
     if page < 604
       next_ayah = Verse.where(page_number: page + 1).order('verse_index ASC').first
 
-      actions << link_to('Next page', translation_proofreading_path(next_ayah.id, resource_id: @resource.id, view_type: params[:view_type]), class: 'tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors')
+      actions << link_to('Next page', translation_proofreading_path(next_ayah.id, resource_id: @resource.id, view_type: params[:view_type]), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-gray-800 hover:tw-bg-gray-900 tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
     end
   end
 
-  actions << link_to('Back to filter', translation_proofreadings_path(resource_id: @resource.id), class: 'btn btn-outline-info tw-text-sm')
+  actions << link_to('Back to filter', translation_proofreadings_path(resource_id: @resource.id), class: 'tw-h-10 tw-px-4 tw-py-2 tw-text-sm tw-font-medium tw-bg-white tw-border tw-border-blue-600 tw-text-blue-600 hover:tw-bg-blue-600 hover:tw-text-white tw-rounded tw-transition-colors tw-flex tw-items-center')
 %>
 
 <%= render 'tools/header',

yarn.lock

@@ -975,11 +975,6 @@ boolbase@^1.0.0:
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bootstrap@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz"
-  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"