Classes updated

Author: michaelroudnitski

app/components/sn_filterable/category_component.html.erb

@@ -2,7 +2,7 @@
                 class: "w-full text-xs lg:text-sm app-word-break dark:bg-gray-800",
                 "x-data": { open: @open }.to_json, 
                 "aria-label": @title do %>
-  <button class="flex border-b dark:border-gray-700 justify-between w-full px-4 py-3 font-medium text-left text-gray-900 dark:text-white transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 focus-visible:ring-opacity-75"
+  <button class="flex border-b dark:border-gray-700 justify-between w-full px-4 py-3 font-medium text-left text-gray-900 dark:text-white transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-sm focus:outline-hidden focus-visible:ring focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 focus-visible:ring-opacity-75"
           type="button"
           @click="open = !open">
     <span><%= @title %></span>

app/components/sn_filterable/chips_component.html.erb

@@ -15,7 +15,7 @@
               <span><%= filter[:name] %></span>
               <%= content_tag :a,
                               href: filter[:multi] ? remove_sub_filter_url(@filtered, filter[:parent], filter[:value], url: @url) : remove_filter_url(@filtered, filter[:parent], url: @url),
-                              class: "flex-shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500 dark:hover:bg-gray-600 dark:hover:text-gray-300",
+                              class: "shrink-0 ml-1 h-4 w-4 p-1 rounded-full inline-flex text-gray-400 hover:bg-gray-200 hover:text-gray-500 dark:hover:bg-gray-600 dark:hover:text-gray-300",
                               "x-data": "filteringChip(#{filter.to_json})",
                               "@click": "$event.preventDefault(); onClick()" do %>
                 <span class="sr-only">Remove filter for Objects</span>

app/components/sn_filterable/main_component.html.erb

@@ -27,10 +27,10 @@
       <% if @show_sidebar %>
         <div class="mt-16 h-full pointer-events-auto">
           <div class="h-full" x-init="sidebarGapTarget = $el">
-            <div x-show="filtersPopupOpen" class="fixed top-0 left-0 right-0 bottom-0 z-10 sm:z-0 bg-gray-600 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 sm:hidden" @click="filtersPopupOpen = false" x-cloak></div>
+            <div x-show="filtersPopupOpen" class="fixed top-0 left-0 right-0 bottom-0 z-10 sm:z-0 bg-gray-600/75 dark:bg-gray-900/75 sm:hidden" @click="filtersPopupOpen = false" x-cloak></div>
             <div x-show="filtersPopupOpen" class="fixed bottom-0 h-2/3 z-10 sm:z-0 left-0 w-full bg-white dark:bg-gray-800 pt-4 sm:sticky sm:!block row-span-2 shrink-0 mr-4 self-start sm:top-16 lg:w-64 sm:w-52 sm:pt-2 sm:pb-6 sm:overflow-y-auto sm:h-[70vh] sm:max-h-[calc(100vh_-_5rem)]" x-cloak>
             <div class="absolute top-0 right-0 -mt-12 mb-2 mr-2" x-show="filtersPopupOpen">
-              <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-gray-600" @click="filtersPopupOpen = false">
+              <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-hidden focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-gray-600" @click="filtersPopupOpen = false">
                 <span class="sr-only">Close filters</span>
                 <%= heroicon "x-mark", variant: :outline, options: { class: "h-6 w-6 text-grey-500 dark:text-gray-400" } %>
               </button>

app/components/sn_filterable/search_component.html.erb

@@ -1,4 +1,4 @@
-<div class="mt-1 relative rounded-md shadow-sm">
+<div class="mt-1 relative rounded-md shadow-xs">
   <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
     <%= heroicon "magnifying-glass", options: { class: "h-5 w-5 text-gray-400 dark:text-gray-500" } %>
   </div>