Update templates and dark mode styles (#8187)

* Update main navigation layout

This is a work in progress.

* Inline body styles

* Update comments admin resource index table

This adds some min widths and truncates the comment body.

* Update users test data template

* Update pagination styles for dark mode

We were setting default background color but its not needed since we prefer to take on the inherited background color and just apply an explicit background color on hover.

* Delete pagination first/last page partials

Since these are not used by the paginator we can safely delete these. Forgot to do so when combining the two original themes we had (active_admin and active_admin_countless) for a simpler, modern pagination layout.

* Refactor breadcrumbs with link_to html_options

This way we can style the default breadcrumbs from the view with Tailwind classes. If providing custom breadcrumb, since full links are given, caller should provide any classes for styling. This improves colors for light and dark modes.

* Update dark mode styles

Still some elements to update with better dark mode styles but this gets most of the contents on the page.

Updated the main navigation layout and hover/selected states.

Updated the data-table and attributes-table styles, not just dark mode but spacing, borders and other styles.

Imrpoved the empty-value style for all modes too.

* Fix main navigation positioning

The content was going off screen due to h-screen usage. This was fine originally since we had the menu always be full screen vertically but we've changed that now so have to adjust the top offset based on breakpoint.

* Use add_class for default so Tailwind finds it

Otherwise these styles are purged which we don't want.

* Update status tag styles

Use whitespace nowrap so multi word status tags don't wrap in a table. Use pill shaped badges instead. No need to duplicate styles here since the second selector is just for updating the color based on the data attribute.

* Use NPM package for Tailwind plugin

This will be required for now with cssbundling-rails. Another option is to copy and paste the plugin.js file to the host app and run it and it will work. That could be an option for tailwindcss-rails users. At the moment there isn't another alternative. I've tried requiring the plugin from the gem path but it doens't seem that Tailwind can find its own modules if required that way. It has to be local.

* Consolidate html head partials to one partial

Originally, we needed this as we didn't extract other views in the layout to partials. No need for specific partials now since chances are if someone wants to edit this, they will want to edit most of the HTML head anyway so easier to extract a single partial with everything already there as its not that many lines.

Since we've improved many of the layout helpers, we'll just inline the title tag now and not sanitize since this is commonly extracted, its much easier now for users to add that in if they want it. We added sanitized due to testing the site title with a link but we've since changed that so the site title really should just be plain text for situations like this. The link was used because often it doubled as the site title in the site header HTML but that is expected to be fully customized and branded now.

app/views/active_admin/html_head/_javascripts.html.erb → app/views/active_admin/_html_head.html.erb

@@ -1,5 +1,9 @@
+<%= stylesheet_link_tag "active_admin" %>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<%= csrf_meta_tags %>
+<%= csp_meta_tag %>
+<% # On page load or when changing themes, best to add inline in `head` to avoid FOUC %>
 <%= javascript_tag nonce: true do %>
-  // On page load or when changing themes, best to add inline in `head` to avoid FOUC
   if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
     document.documentElement.classList.add('dark')
   } else {

app/views/active_admin/_main_navigation.html.erb

@@ -0,0 +1,28 @@
+<div id="main-menu" class="fixed top-0 xl:top-16 bottom-0 left-0 z-40 w-72 xl:w-60 p-4 overflow-y-auto transition-transform duration-200 -translate-x-full xl:translate-x-0 bg-white dark:bg-gray-950 xl:border-r xl:border-gray-200 xl:dark:border-white/10" tabindex="-1" aria-labelledby="drawer-navigation-label">
+  <ul role="list" class="flex flex-1 flex-col space-y-1.5">
+    <% current_menu.items(self).each do |item| %>
+      <% children = item.items(self).presence %>
+      <li <%= current_menu_item?(item) && "data-open" %> data-item-id="<%= item.id %>">
+        <% if children %>
+          <button data-menu-button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full text-left rounded-md p-2 gap-x-2 text-sm">
+            <%= item.label(self) %>
+            <svg data-menu-icon class="ms-auto h-5 w-5 shrink-0 <%= current_menu_item?(item) && "rotate-90" %>" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
+            </svg>
+          </button>
+          <ul data-menu-list role="list" class="mt-1 space-y-1 <%= current_menu_item?(item) ? "" : "hidden" %>">
+            <% children.each do |j| %>
+              <li data-item-id="<%= j.id %>">
+                <%= link_to j.label(self), j.url(self), j.html_options.merge(class: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white block rounded-md py-1.5 px-2 text-sm #{(current_menu_item?(j) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+              </li>
+            <% end %>
+          </ul>
+        <% elsif url = item.url(self) %>
+          <%= link_to item.label(self), url, item.html_options.merge(class: "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white flex items-center w-full text-left rounded-md p-2 gap-x-2 text-sm #{(current_menu_item?(item) ? "bg-gray-100 dark:bg-white/5 text-gray-900 dark:text-white selected" : "")}") %>
+        <% else %>
+          <%= item.label(self) %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>

app/views/active_admin/_page_header.html.erb

@@ -1,12 +1,13 @@
-<div data-test-page-header class="bg-gray-50 border-b p-4 mb-8 flex flex-col gap-4 md:flex-row md:items-center justify-between dark:border-gray-700 dark:bg-gray-800">
+<div data-test-page-header class="bg-gray-50 border-b p-4 mb-8 flex flex-col gap-4 md:flex-row md:items-center justify-between dark:border-gray-800/50 dark:bg-inherit">
   <div class="flex flex-col gap-3 pt-1">
+    <% breadcrumb_links = build_breadcrumb_links(request.path, class: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200") %>
     <% if breadcrumb_links.present? %>
       <nav aria-label="breadcrumb">
-        <ol class="breadcrumbs flex flex-wrap text-xs">
+        <ol class="flex flex-wrap gap-1 text-sm">
           <% breadcrumb_links.each_with_index do |link, index| %>
-            <li class="inline-flex items-center h-5" data-test-breadcrumb>
+            <li class="inline-flex items-center h-5 gap-1">
               <% if index > 0 %>
-                <svg class="h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <svg class="h-5 w-5 text-gray-300 dark:text-gray-700 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                   <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
                 </svg>
               <% end %>

app/views/active_admin/_site_footer.html.erb

@@ -1,4 +1,4 @@
-<div class="text-sm text-center mt-16 mx-8 pt-9 pb-12 text-gray-500 border-t dark:border-gray-700">
+<div class="text-sm text-center mt-16 mx-8 pt-9 pb-12 text-gray-500 border-t dark:border-gray-800">
   <%= I18n.t(
         "active_admin.powered_by",
         active_admin: link_to("Active Admin", "https://activeadmin.info", class: "hover:text-gray-900 dark:hover:text-gray-400"),

app/views/active_admin/_site_header.html.erb

@@ -1,6 +1,5 @@
-<div data-test-site-header id="header" class="border-b border-gray-200 dark:border-gray-700 dark:bg-gray-800 px-4 py-2 flex items-center">
-
-  <button class="xl:hidden me-3 inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" data-drawer-target="main-menu" data-drawer-show="main-menu" aria-controls="drawer-navigation">
+<div class="border-b border-gray-200 dark:border-white/10 dark:bg-gray-950/75 px-4 py-2 flex items-center sticky top-0 z-20 h-16 w-full backdrop-blur-md">
+  <button class="xl:hidden pe-3 inline-flex items-center w-8 h-8 justify-center text-sm text-gray-500 dark:text-gray-400 focus-visible:outline-none focus-visible:ring-ring focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0" data-drawer-target="main-menu" data-drawer-show="main-menu" aria-controls="drawer-navigation">
     <svg class="w-5 h-5 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/></svg>
   </button>
 
@@ -10,45 +9,16 @@
     </h1>
   </div>
 
-  <button type="button" class="dark-mode-toggle flex items-center me-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
+  <button type="button" class="dark-mode-toggle flex items-center w-9 h-9 justify-center me-1 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 focus:outline-none text-sm">
     <svg class="hidden dark:block w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.509 5.75c0-1.493.394-2.96 1.144-4.25h-.081a8.5 8.5 0 1 0 7.356 12.746A8.5 8.5 0 0 1 8.509 5.75Z"/></svg>
     <svg class="dark:hidden w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 3V1m0 18v-2M5.05 5.05 3.636 3.636m12.728 12.728L14.95 14.95M3 10H1m18 0h-2M5.05 14.95l-1.414 1.414M16.364 3.636 14.95 5.05M14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/></svg>
   </button>
 
-  <button id="user-menu-button" class="flex items-center w-8 h-8 justify-center text-sm text-gray-500 focus:outline-none dark:text-gray-200" data-dropdown-toggle="user-menu" data-dropdown-offset-distance="3" data-dropdown-placement="bottom-end">
+  <button id="user-menu-button" class="flex items-center w-9 h-9 justify-center text-sm text-gray-500 focus:outline-none dark:text-gray-200" data-dropdown-toggle="user-menu" data-dropdown-offset-distance="3" data-dropdown-placement="bottom-end">
     <svg class="w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/></svg>
   </button>
 
-  <div id="main-menu" class="fixed top-0 left-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform duration-200 -translate-x-full xl:translate-x-0 xl:border-r xl:border-gray-200 xl:dark:border-gray-700 bg-white dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-navigation-label">
-    <ul role="list" class="flex flex-1 flex-col space-y-1.5">
-      <% current_menu.items(self).each do |item| %>
-        <% children = item.items(self).presence %>
-        <li <%= current_menu_item?(item) && "data-open" %> data-item-id="<%= item.id %>">
-          <% if children %>
-            <button data-menu-button class="hover:bg-gray-50 flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700">
-              <%= item.label(self) %>
-              <svg data-menu-icon class="ms-auto text-gray-500 h-5 w-5 shrink-0 <%= current_menu_item?(item) && "rotate-90" %>" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
-              </svg>
-            </button>
-            <ul data-menu-list role="list" class="mt-1 space-y-1.5 <%= current_menu_item?(item) ? "" : "hidden" %>">
-              <% children.each do |j| %>
-                <li data-item-id="<%= j.id %>">
-                  <%= link_to j.label(self), j.url(self), j.html_options.merge(class: "hover:bg-gray-50 block rounded-md p-2 text-sm leading-6 text-gray-700 #{(current_menu_item?(j) ? "bg-gray-50 selected" : "")}") %>
-                </li>
-              <% end %>
-            </ul>
-          <% elsif url = item.url(self) %>
-            <%= link_to item.label(self), url, item.html_options.merge(class: "hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-700 #{(current_menu_item?(item) ? "bg-gray-50 selected" : "")}") %>
-          <% else %>
-            <%= item.label(self) %>
-          <% end %>
-        </li>
-      <% end %>
-    </ul>
-  </div>
-
-  <div id="user-menu" class="z-10 hidden min-w-max bg-white rounded shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="user-menu-button">
+  <div id="user-menu" class="z-50 hidden min-w-max bg-white rounded shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-700 py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="user-menu-button">
     <ul>
       <% if current_active_admin_user? %>
         <li><%= auto_link current_active_admin_user, class: "block px-2.5 py-2 no-underline text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white" %></li>

app/views/kaminari/active_admin/_gap.html.erb

@@ -5,6 +5,6 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<span class="flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 bg-white dark:bg-gray-800 dark:text-gray-400">
+<span class="flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400">
   <%= t('views.pagination.truncate').html_safe %>
 </span>

app/views/kaminari/active_admin/_next_page.html.erb

@@ -7,7 +7,7 @@
     remote:        data-remote
 -%>
 <% unless current_page.last? %>
-  <%= link_to url, rel: 'next', remote: remote, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 bg-white dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white rounded no-underline" do %>
+  <%= link_to url, rel: 'next', remote: remote, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-white rounded no-underline" do %>
     <span class="sr-only"><%= t('views.pagination.next').html_safe %></span>
     <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>

app/views/kaminari/active_admin/_page.html.erb

@@ -8,7 +8,7 @@
     remote:        data-remote
 -%>
 <% if page.current? %>
-  <%= link_to page, url, { remote: remote, rel: page.rel, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-white bg-blue-500 dark:text-white dark:bg-blue-500 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-500 dark:hover:text-white rounded no-underline" } %>
+  <%= link_to page, url, { remote: remote, rel: page.rel, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-white bg-blue-500 dark:text-white dark:bg-blue-600 hover:bg-blue-500 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white rounded no-underline" } %>
 <% else %>
-  <%= link_to page, url, { remote: remote, rel: page.rel, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 bg-white dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white rounded no-underline" } %>
+  <%= link_to page, url, { remote: remote, rel: page.rel, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-white rounded no-underline" } %>
 <% end %>

app/views/kaminari/active_admin/_prev_page.html.erb

@@ -7,7 +7,7 @@
     remote:        data-remote
 -%>
 <% unless current_page.first? %>
-  <%= link_to url, rel: 'prev', remote: remote, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 bg-white dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white rounded no-underline" do %>
+  <%= link_to url, rel: 'prev', remote: remote, class: "flex items-center justify-center px-2.5 py-3 h-8 leading-tight text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-white rounded no-underline" do %>
     <span class="sr-only"><%= t('views.pagination.previous').html_safe %></span>
     <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>

app/views/layouts/active_admin.html.erb

@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="<%= I18n.locale %>">
 <head>
-  <%= render "active_admin/html_head/title", title: html_head_site_title %>
-  <%= render "active_admin/html_head/defaults" %>
+  <title><%= html_head_site_title %></title>
+  <%= render "active_admin/html_head" %>
 </head>
-<body>
-  <div class="inner-body-container">
-    <%= render "active_admin/site_header", title: site_title %>
+<body class="bg-white dark:bg-gray-950/95 text-gray-950 dark:text-gray-100 antialiased">
+  <%= render "active_admin/site_header", title: site_title %>
+  <div class="xl:ms-60">
+    <%= render "active_admin/main_navigation" %>
     <%= render "active_admin/page_header", title: @page_title || page_title %>
     <%= render "active_admin/flash_messages" %>
     <div data-test-page-content class="link-default px-2.5 lg:px-5 grid grid-cols-1 gap-4 lg:gap-6 lg:grid-flow-col lg:auto-cols-[minmax(0,250px)]">

app/views/layouts/active_admin_logged_out.html.erb

@@ -1,10 +1,10 @@
 <!doctype html>
 <html lang="<%= I18n.locale %>">
 <head>
-  <%= render "active_admin/html_head/title", title: html_head_site_title %>
-  <%= render "active_admin/html_head/defaults" %>
+  <title><%= html_head_site_title %></title>
+  <%= render "active_admin/html_head" %>
 </head>
-<body class="bg-gray-50 dark:bg-gray-900">
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-950 dark:text-gray-100 antialiased">
   <div class="flex flex-col items-center justify-center min-h-screen py-4 sm:px-6 sm:py-8 mx-auto">
     <%= render "active_admin/flash_messages" %>
     <%= yield %>

config/locales/en.yml

@@ -1,8 +1,6 @@
 en:
   views:
     pagination:
-      first: "First"
-      last: "Last"
       previous: "Previous"
       next: "Next"
   activerecord:

features/step_definitions/breadcrumb_steps.rb

@@ -10,5 +10,5 @@
 end
 
 Then /^I should see a link to "([^"]*)" in the breadcrumb$/ do |text|
-  expect(page).to have_css "[data-test-breadcrumb] > a", text: text
+  expect(page).to have_css "nav[aria-label=breadcrumb] a", text: text
 end

lib/active_admin/component.rb

@@ -1,12 +1,5 @@
 # frozen_string_literal: true
 module ActiveAdmin
   class Component < Arbre::Component
-    def initialize(*)
-      super
-      add_class default_class_name
-    end
-
-    def default_class_name
-    end
   end
 end

lib/active_admin/orm/active_record/comments.rb

@@ -88,11 +88,13 @@ def destroy
 
       index do
         column I18n.t("active_admin.comments.resource_type"), :resource_type
+        column I18n.t("active_admin.comments.resource"), :resource, class: "min-w-[7rem]"
         column I18n.t("active_admin.comments.author_type"), :author_type
-        column I18n.t("active_admin.comments.resource"), :resource
         column I18n.t("active_admin.comments.author"), :author
-        column I18n.t("active_admin.comments.body"), :body
-        column I18n.t("active_admin.comments.created_at"), :created_at
+        column I18n.t("active_admin.comments.body"), :body, class: "min-w-[16rem]" do |comment|
+          truncate(comment.body, length: 60, separator: " ")
+        end
+        column I18n.t("active_admin.comments.created_at"), :created_at, class: "min-w-[13rem]"
         actions
       end
     end