Update templates and dark mode styles

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