avo 3.17.0 → 3.17.1.tw4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: da3558bff0a658de12bc1a7ec571b77c58839c40b88cece4a69cc4e59d364cb8
-  data.tar.gz: 4fc93d0ca13911d0f48f49daeba4f0b718215e7b497473864354cd90a3d805c1
+  metadata.gz: 739659797d530c1acdb0ec8bed1c2f86bc2b35eff7955aaeecac6926b82313d3
+  data.tar.gz: 5885212b7582e4dfe6e181a4e42040dfe5ea8bf11656b121f377b95209ab0a23
 SHA512:
-  metadata.gz: 2705fa675413db57896ca1f4699d2b94cc6e938a2ead459fcb776288303d7cafc75737229f9aa321dd6180137aaa061b221f16afe75401b9b550e44cb3794b41
-  data.tar.gz: 61c331786efacb63b8a965905cdbd5f7e9bafb5f37eed21b9fe6bc1676d7167c1d0a3fea8ad54966068a0ba902d3da30b08d0aac0e0be912348d16c77ea99cce
+  metadata.gz: 0b6b20a4d328b54edbb9b6c22c8e73454f3d2015f73646020f8428134b85000823340a5b77cc214238343c60485f9b6bdfa249e3588545b69ef1a32e66590b96
+  data.tar.gz: 49e9aab89f78ebf948d85a39ce1fe536f7fadbfe650b69f5952cbdd7f97277ca7e691b8c016b24371477fc8174e3731e70e6ca57bf828cb1c48f869df9b3d231

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (3.17.0)
+    avo (3.17.1.tw4)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/README.md

@@ -125,5 +125,6 @@ Please read the [RELEASE.MD](./RELEASE.MD)
 
  - [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage
  - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
+ - [`marksmith`](https://github.com/avo-hq/marksmith) - GitHub-style markdown editor for Ruby on Rails with ActiveStorage support.
  - [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes.
  - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app

data/app/assets/stylesheets/avo.base.css

@@ -1,3 +1,9 @@
+@import "tailwindcss";
+
+@config "../../../tailwind.config.js";
+
+
+
 @import './../../../node_modules/easymde/dist/easymde.min.css';
 @import './../../../node_modules/tippy.js/dist/tippy.css';
 @import './../../../node_modules/tippy.js/themes/light.css';
@@ -5,8 +11,6 @@
 @import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
 @import './../../../node_modules/@yaireo/tagify/dist/tagify.css';
 
-@import 'tailwindcss/base';
-
 @import './css/fonts.css';
 @import './css/buttons.css';
 @import './css/typography.css';
@@ -27,10 +31,6 @@
 @import './css/fields/tags.css';
 @import './css/fields/tiptap.css';
 
-@import 'tailwindcss/components';
-
-@import 'tailwindcss/utilities';
-
 html,
 body {
   @apply antialiased relative h-full;
@@ -105,14 +105,6 @@ dl {
   }
 }
 
-/* TODO: make content like tailwindcss */
-.floating-row-controls {
-  &:before {
-    content: "";
-    @apply absolute z-10 inset-auto left-0 top-0 mt-0 -translate-x-full w-3 h-full bg-gradient-to-l from-white to-transparent group-hover:from-gray-50;
-  }
-}
-
 .shift-pressed {
   & .highlighted-row {
     @apply !bg-neutral-200;

data/app/assets/stylesheets/css/fields/progress.css

@@ -1,13 +1,13 @@
 progress {
-  @apply h-2 bg-white border border-slate-400 rounded shadow-inner;
+  @apply h-2 bg-white border border-slate-400 rounded-sm shadow-inner;
 }
 progress[value]::-webkit-progress-bar {
-  @apply bg-white border border-gray-500 rounded shadow-inner;
+  @apply bg-white border border-gray-500 rounded-sm shadow-inner;
 }
 progress[value]::-webkit-progress-value{
-  @apply bg-primary-500 rounded;
+  @apply bg-primary-500 rounded-sm;
 
 }
 progress[value]::-moz-progress-bar {
-  @apply bg-primary-500 rounded appearance-none;
+  @apply bg-primary-500 rounded-sm appearance-none;
 }

data/app/assets/stylesheets/css/fields/tiptap.css

@@ -1,7 +1,7 @@
 /* EDIT STYLES */
 
 .tiptap {
-  @apply m-0 p-4 outline-none min-h-44;
+  @apply m-0 p-4 outline-hidden min-h-44;
 
   >*+* {
     @apply mt-4;
@@ -22,7 +22,7 @@
 }
 
 .tiptap__field {
-  @apply w-full mb-4 border border-gray-200 rounded;
+  @apply w-full mb-4 border border-gray-200 rounded-sm;
 }
 
 .tiptap__editor {
@@ -54,7 +54,7 @@
 }
 
 .tiptap__button {
-  @apply p-1 text-gray-500 rounded cursor-pointer;
+  @apply p-1 text-gray-500 rounded-sm cursor-pointer;
 
   &:hover:enabled {
     @apply bg-gray-100;
@@ -94,7 +94,7 @@
 }
 
 .tiptap__link-field {
-  @apply text-sm mr-2 py-1 border border-gray-200 rounded;
+  @apply text-sm mr-2 py-1 border border-gray-200 rounded-sm;
 }
 
 /* SHOW STYLES */

data/app/assets/stylesheets/css/pagination.css

@@ -22,7 +22,7 @@
   .pagy-nav-js .page a,
   .pagy-combo-nav-js .page a,
   .pagy-combo-nav-js .pagy-combo-input a {
-    @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+    @apply rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
 
     &:hover{
       @apply bg-gray-150;
@@ -73,7 +73,7 @@
     }
 
     & a:not(.gap) {
-      @apply block rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+      @apply block rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
 
       &:hover{
         @apply bg-gray-150;

data/app/assets/stylesheets/css/search.css

@@ -22,7 +22,7 @@
   }
 
   .aa-DetachedSearchButton {
-    @apply rounded border-gray-300 h-[34px];
+    @apply rounded-sm border-gray-300 h-[34px];
   }
 }
 
@@ -37,11 +37,11 @@
 
 .aa-Form {
   &:focus-within {
-    @apply ring-0 !important;
+    @apply ring-0;
   }
 
   input {
-    @apply focus:ring-0 !important;
+    @apply focus:ring-0;
   }
   &:focus-within {
     .aa-InputWrapperPrefix{
@@ -71,7 +71,7 @@ button.aa-DetachedCancelButton {
       @apply space-y-2;
 
       .aa-Item {
-        @apply bg-white rounded px-3 py-4 shadow font-medium;
+        @apply bg-white rounded-sm px-3 py-4 shadow font-medium;
 
         .aa-ItemDescription {
           @apply text-gray-500 text-sm font-normal mt-1;

data/app/assets/stylesheets/css/tooltips.css

@@ -7,7 +7,7 @@
   display: block;
   filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
 
-  @apply bg-white text-gray-700 px-3 py-0 rounded text-xs;
+  @apply bg-white text-gray-700 px-3 py-0 rounded-sm text-xs;
 }
 
 .tooltip .tooltip-arrow {

data/app/components/avo/actions_component.html.erb

@@ -10,7 +10,7 @@
     type: :button,
     color: @color,
     size: @size,
-    class: "focus:outline-none",
+    class: "focus:outline-hidden",
     icon: @icon,
     data: {
       action: "click->toggle#togglePanel",
@@ -21,7 +21,7 @@
     <%= @label %>
   <% end %>
   <div
-    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded overflow-hidden hidden"
+    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded-sm overflow-hidden hidden"
     data-toggle-target="panel"
     data-controller="actions-overflow"
     data-actions-overflow-panel-list-value="<%= !@as_row_control %>"
@@ -33,7 +33,7 @@
     data-transition-leave-start="transform opacity-100 translate-y-0"
     data-transition-leave-end="transform opacity-0 -translate-y-1"
   >
-    <div data-target="actions-list" class="w-full space divide-y">
+    <div data-target="actions-list" class="w-full space divide-y divide-gray-200">
       <% @actions.each do |action| %>
         <%= render_item(action)%>
       <% end %>

data/app/components/avo/alert_component.html.erb

@@ -13,8 +13,8 @@
           <%= sanitize @message.to_s %>
         </p>
       </div>
-      <div class="ml-4 flex-shrink-0 flex items-center">
-        <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
+      <div class="ml-4 shrink-0 flex items-center">
+        <button data-action="alert#close" class="inline-flex text-white focus:outline-hidden focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
           </svg>

data/app/components/avo/alert_component.rb

@@ -18,7 +18,7 @@ class Avo::AlertComponent < Avo::BaseComponent
   def classes
     return "hidden" if is_empty?
 
-    result = "max-w-lg w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
+    result = "max-w-lg w-full shadow-lg px-4 py-3 rounded-sm relative border text-white pointer-events-auto"
 
     result += if is_error?
       " bg-red-400 border-red-600"

data/app/components/avo/backtrace_alert_component.html.erb

@@ -1,7 +1,7 @@
 <div data-controller="alert"
   data-alert-dismiss-after-value="<%= Avo.configuration.alert_dismiss_time %>"
   data-alert-remove-delay-value="0"
-  class="w-full shadow-lg px-4 py-3 rounded relative border text-white pointer-events-auto bg-red-400 border-red-600"
+  class="w-full shadow-lg px-4 py-3 rounded-sm relative border text-white pointer-events-auto bg-red-400 border-red-600"
 >
   <div class="px-2">
     <div class="flex h-full">
@@ -14,8 +14,8 @@
           <pre class='overflow-y-scroll max-h-64 whitespace-pre-wrap text-xs'><%= @backtrace.join("\n") %></pre>
         </p>
       </div>
-      <div class="ml-4 flex-shrink-0 flex items-center">
-        <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
+      <div class="ml-4 shrink-0 flex items-center">
+        <button data-action="alert#close" class="inline-flex text-white focus:outline-hidden focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
           </svg>

data/app/components/avo/button_component.rb

@@ -34,12 +34,12 @@ class Avo::ButtonComponent < Avo::BaseComponent
   end
 
   def button_classes
-    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 data-[disabled='true']:opacity-60 justify-center #{@class}"
+    classes = "button-component inline-flex grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 data-[disabled='true']:opacity-60 justify-center #{@class}"
 
     # For non-icon-styled buttons we should not add borders.
-    classes += " border active:outline active:outline-1" unless is_icon?
+    classes += " border border-gray-200 active:outline active:outline-1" unless is_icon?
 
-    classes += " rounded" if @rounded.present?
+    classes += " rounded-sm" if @rounded.present?
     classes += style_classes
     classes += horizontal_padding_classes
     classes += vertical_padding_classes

data/app/components/avo/divider_component.html.erb

@@ -1,6 +1,6 @@
-<div class="relative flex justify-center items-center w-full !border-b-2 border-gray-200 border-solid" data-component-name="<%= self.class.to_s.underscore %>">
+<div class="relative flex justify-center items-center w-full !border-b border-gray-200 border-solid" data-component-name="<%= self.class.to_s.underscore %>">
   <% if @label.present? %>
-    <div class="absolute inset-auto z-20 text-xs font-semibold uppercase leading-none text-gray-500 bg-white px-2 border py-1 rounded">
+    <div class="absolute inset-auto z-20 text-[11px] font-semibold uppercase leading-none text-gray-500 bg-white border border-gray-200 px-2 py-1 rounded-sm">
       <%= @label %>
     </div>
   <% end %>

data/app/components/avo/empty_state_component.html.erb

@@ -1,5 +1,5 @@
 <% if @add_background %>
-  <div class="bg-white rounded shadow-panel">
+  <div class="bg-white rounded-sm shadow-panel">
 <% end %>
 <div class="relative flex-1 flex flex-col items-center justify-center space-y-12 py-24">
   <%= helpers.svg view_type_svg, class: 'h-[250px]' %>

data/app/components/avo/field_wrapper_component.html.erb

@@ -2,7 +2,7 @@
   class: classes,
   style: style,
   data: data do %>
-  <%= content_tag :div, class: class_names("pt-4 flex self-start items-center flex-shrink-0 w-48 px-6 uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: @view, element: :label), {
+  <%= content_tag :div, class: class_names("pt-4 flex self-start items-center shrink-0 w-48 px-6 uppercase font-semibold text-gray-500 text-sm", @field.get_html(:classes, view: @view, element: :label), {
     "md:pt-4 md:w-full": stacked?,
     "h-full md:pt-0": !stacked?,
     "md:h-10 ": !stacked? && short?,

data/app/components/avo/fields/belongs_to_field/edit_component.html.erb

@@ -1,5 +1,5 @@
 <% if is_polymorphic? %>
-  <div class="divide-y"
+  <div class="divide-y divide-gray-200"
       data-controller="belongs-to-field"
       data-searchable="<%= @field.is_searchable? %>"
       data-association="<%= @field.id %>"

data/app/components/avo/fields/boolean_field/edit_component.html.erb

@@ -3,7 +3,7 @@
     <%= @form.check_box @field.id,
       value: @field.value,
       checked: @field.value,
-      class: "text-lg h-4 w-4 checked:bg-primary-400 focus:checked:!bg-primary-400 rounded #{@field.get_html(:classes, view: view, element: :input)}",
+      class: "text-lg h-4 w-4 checked:bg-primary-400 focus:checked:!bg-primary-400 rounded-sm #{@field.get_html(:classes, view: view, element: :input)}",
       data: @field.get_html(:data, view: view, element: :input),
       disabled: disabled?,
       autofocus: @autofocus,

data/app/components/avo/fields/boolean_group_field/edit_component.rb

@@ -5,7 +5,7 @@ class Avo::Fields::BooleanGroupField::EditComponent < Avo::Fields::EditComponent
     super(...)
 
     # Initialize here to avoid multiple calls to @field.get_html for each option.
-    @classes = "w-4 h-4 rounded checked:bg-primary-400 focus:checked:!bg-primary-400" \
+    @classes = "w-4 h-4 rounded-sm checked:bg-primary-400 focus:checked:!bg-primary-400" \
       "#{@field.get_html(:classes, view: view, element: :input)}"
     @data = @field.get_html(:data, view: view, element: :input)
     @style = @field.get_html(:style, view: view, element: :input)

data/app/components/avo/fields/common/files/view_type/list_item_component.html.erb

@@ -5,14 +5,14 @@
         <div class="rounded-full bg-slate-100 border border-gray-500 p-1.5 flex items-center justify-center">
           <%= helpers.svg icon_for_file, class: "h-5 text-gray-600" %>
         </div>
-        <p class="items-center h-full p-2 flex-shrink-0">
+        <p class="items-center h-full p-2 shrink-0">
           <%= file.filename %>
         </p>
       </div>
-      <div class="text-gray-700 flex-shrink-0 text-sm">
+      <div class="text-gray-700 shrink-0 text-sm">
         <%= helpers.number_to_human_size(file.byte_size) %>
       </div>
-      <div class="flex space-x-2 justify-end col-span-1 flex-shrink-0">
+      <div class="flex space-x-2 justify-end col-span-1 shrink-0">
         <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: @field, file: file, resource: @resource) %>
       </div>
     </div>

data/app/components/avo/fields/common/key_value_component.html.erb

@@ -1,4 +1,4 @@
-<div class="w-full shadow-lg rounded overflow-hidden"
+<div class="w-full shadow-lg rounded-sm overflow-hidden"
   data-controller="key-value"
   data-key-value-target="controller"
   data-options="<%= @field.options.to_json %>"
@@ -7,8 +7,8 @@
 >
   <div class="w-full flex flex-col">
     <div class="flex w-full">
-      <div class="flex w-full bg-gray-700 shadow overflow-hidden">
-        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
+      <div class="flex w-full bg-gray-700 shadow-sm overflow-hidden">
+        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r border-gray-200">
           <%= @field.key_label %>
         </div>
         <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white">

data/app/components/avo/fields/common/status_viewer_component.html.erb

@@ -1,10 +1,11 @@
 <%
-  classes = "inline-block"
-  classes += " text-red-600" if @status == 'failed'
-  classes += " text-green-600" if @status == 'success'
-  classes += " text-gray-600" if @status == 'neutral'
+  classes = class_names(
+    "text-red-600": @status == 'failed',
+    "text-green-600": @status == 'success',
+    "text-gray-600": @status == 'neutral'
+  )
 %>
-<div class="flex flex-shrink-0 <%= classes %> items-center">
+<div class="flex shrink-0 <%= classes %> items-center">
   <% if @status == 'success' %>
     <%= helpers.svg 'heroicons/solid/check-circle', class: 'h-4' %>
   <% elsif @status == 'failed' %>

data/app/components/avo/fields/date_field/edit_component.html.erb

@@ -12,7 +12,7 @@
   } do %>
     <%= @form.text_field @field.id,
       value: @field.edit_formatted_value,
-      class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
+      class: classes("w-full #{"!hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
         'date-field-target': 'input',
         placeholder: @field.placeholder,

data/app/components/avo/fields/date_time_field/edit_component.html.erb

@@ -14,7 +14,7 @@
   } do %>
     <%= @form.text_field @field.id,
       value: @field.edit_formatted_value,
-      class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
+      class: classes("w-full #{"!hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
         date_field_target: :input,
         placeholder: @field.placeholder,

data/app/components/avo/fields/tags_field/edit_component.html.erb

@@ -23,7 +23,7 @@
     %>
     <%# real field %>
     <%= @form.text_field @field.id,
-      class: classes("hidden w-full !py-0 min-h-10 items-center border-primary-500 focus-within:border-primary-500"),
+      class: classes("!hidden w-full !py-0 min-h-10 items-center border-primary-500 focus-within:border-primary-500"),
       data: {
         tags_field_target: :input,
       },

data/app/components/avo/fields/tags_field/tag_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex px-2 py-1 rounded bg-gray-100 text-sm text-gray-800 font-normal flex-shrink-0"
+<div class="flex px-2 py-1 rounded-sm bg-gray-100 text-sm text-gray-800 font-normal shrink-0"
   <% if @title.present? %>
     data-tippy="tooltip"
     title="<%= @title %>"

data/app/components/avo/fields/tiptap_field/edit_component.html.erb

@@ -67,7 +67,7 @@
 
     <%= @form.text_area @field.id,
       value: @field.value,
-      class: classes("w-full hidden"),
+      class: classes("w-full !hidden"),
       data: {
         tiptap_field_target: "input",
         **@field.get_html(:data, view: view, element: :input)

data/app/components/avo/fields/trix_field/edit_component.html.erb

@@ -14,7 +14,7 @@
     <% end %>
     <%= @form.text_area @field.id,
       value: @field.value.try(:to_trix_html) || @field.value,
-      class: classes("w-full hidden"),
+      class: classes("w-full !hidden"),
       data: @field.get_html(:data, view: view, element: :input),
       disabled: disabled?,
       id: @input_id,

data/app/components/avo/filters_component.html.erb

@@ -1,6 +1,6 @@
 <div data-controller="toggle" data-component-name="<%= self.class.to_s.underscore %>">
   <div class="relative w-full flex justify-between">
-    <%= a_button class: 'focus:outline-none',
+    <%= a_button class: 'focus:outline-hidden',
       color: :primary,
       size: :sm,
       icon: "avo/filter",
@@ -14,7 +14,7 @@
       <% end %>
     <% end %>
     <div
-      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-40 shadow-modal rounded divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] == '1' %>"
+      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-40 shadow-modal rounded-sm divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] == '1' %>"
       data-toggle-target="panel"
       data-transition-enter="transition ease-out duration-100"
       data-transition-enter-start="transform opacity-0 -translate-y-1"
@@ -26,7 +26,7 @@
       <% @filters.each do |filter| %>
         <%= render partial: filter.class.template, locals: {filter: filter} %>
       <% end %>
-      <div class="p-4 border-gray-300 border-t">
+      <div class="p-4 border-gray-200 border-t">
         <% if @applied_filters.present? %>
           <%= a_link reset_path, data: {turbo_frame: params[:turbo_frame]}, color: :gray, size: :sm, class: 'w-full justify-center' do %>
             <%= t('avo.reset_filters') %>

data/app/components/avo/index/grid_item_component.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag :div,
-  class: "relative bg-white rounded shadow-modal flex flex-col group",
+  class: "relative bg-white rounded-sm shadow-modal flex flex-col group",
   data: {
     component_name: self.class.to_s.underscore,
     resource_name: @resource.class.to_s,
@@ -8,7 +8,7 @@
     **(try(:drag_reorder_item_data_attributes) || {}),
   } do %>
   <%= content_tag :div,
-    class: class_names("relative w-full pb-3/4 rounded-t overflow-hidden", html(:cover, :classes)),
+    class: class_names("relative w-full pb-3/4 rounded-t-sm overflow-hidden", html(:cover, :classes)),
     style: html(:cover, :style) do %>
     <%= render Avo::RowSelectorComponent.new(floating: true, size: :lg) if @resource.record_selector%>
     <%= render_cover %>

data/app/components/avo/index/grid_item_component.rb

@@ -70,7 +70,7 @@ class Avo::Index::GridItemComponent < Avo::BaseComponent
     return if @card[:badge_label].blank?
 
     content_tag :div,
-      class: class_names("absolute block inset-auto top-0 right-0 mt-2 mr-2 text-sm font-semibold bg-#{badge_color}-50 border border-#{badge_color}-300 text-#{badge_color}-700 rounded shadow-lg px-2 py-px z-10", html(:badge, :classes)),
+      class: class_names("absolute block inset-auto top-0 right-0 mt-2 mr-2 text-sm font-semibold bg-#{badge_color}-50 border border-#{badge_color}-300 text-#{badge_color}-700 rounded-sm shadow-lg px-2 py-px z-10", html(:badge, :classes)),
       title: @card[:badge_title],
       style: html(:badge, :style),
       data: {target: :badge, tippy: :tooltip, **(html(:badge, :data).presence || {})} do

data/app/components/avo/index/resource_grid_component.html.erb

@@ -16,7 +16,7 @@
     <% end %>
   </turbo-frame>
 <% else %>
-  <div class="bg-white rounded shadow-panel"
+  <div class="bg-white rounded-sm shadow-panel"
     data-component-name="<%= self.class.to_s.underscore %>">
     <%= helpers.empty_state by_association: params[:related_name].present?, view_type: :grid %>
   </div>

data/app/components/avo/index/resource_map_component.html.erb

@@ -10,7 +10,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="bg-white rounded shadow-panel">
+  <div class="bg-white rounded-sm shadow-panel">
     <%= helpers.empty_state by_association: params[:related_name].present?, view_type: :map %>
   </div>
 <% end %>

data/app/components/avo/index/resource_table_component.html.erb

@@ -39,7 +39,7 @@
     <% end %>
     <table class="w-full px-4 bg-white">
       <%= render partial: 'avo/partials/table_header', locals: {fields: @header_fields} %>
-      <%= content_tag :tbody, class: "divide-y",
+      <%= content_tag :tbody, class: "divide-y divide-gray-200",
         data: {
           **(try(:drag_reorder_data_attributes) || {}),
         } do %>

data/app/components/avo/index/table_row_component.html.erb

@@ -2,7 +2,7 @@
 
 <%= content_tag :tr,
   id: "#{self.class.to_s.underscore}_#{@resource.record.to_param}",
-  class: class_names("group bg-white hover:bg-gray-50 z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
+  class: class_names("group bg-white hover:bg-gray-50 z-21 border-b border-gray-200", {"cursor-pointer": click_row_to_view_record}),
   data: {
     index: @index,
     component_name: self.class.to_s.underscore,
@@ -24,7 +24,7 @@
   <% end %>
   <% if @resource.render_row_controls_on_the_left? %>
     <td class="<%= @resource.row_controls_classes %>" data-control="resource-controls">
-      <div class="flex items-center justify-end flex-grow-0 h-full">
+      <div class="flex items-center justify-end grow-0 h-full">
         <%= render resource_controls_component %>
       </div>
     </td>
@@ -46,7 +46,7 @@
   <% end %>
   <% if @resource.render_row_controls_on_the_right? %>
     <td class="<%= @resource.row_controls_classes %>" data-control="resource-controls">
-      <div class="flex items-center justify-end flex-grow-0 h-full">
+      <div class="flex items-center justify-end grow-0 h-full">
         <%= render resource_controls_component %>
       </div>
     </td>

data/app/components/avo/items/panel_component.html.erb

@@ -7,7 +7,7 @@
     <% end %>
   <% end %>
    <% c.with_body do %>
-    <% content_tag :div, class: "divide-y overflow-auto" do %>
+    <% content_tag :div, class: "divide-y divide-gray-200 overflow-auto" do %>
       <%= render Avo::Items::VisibleItemsComponent.new resource: @resource, item: @item, view: @view, form: @form %>
     <% end %>
   <% end %>

data/app/components/avo/media_library/item_details_component.html.erb

@@ -24,7 +24,7 @@
         <%= link_to "Delete", helpers.avo.media_library_path(@blob), class: "text-red-500", data: {turbo_confirm: "Are you sure you want to destroy this attachment?", turbo_method: :delete} %>
       </div>
     </div>
-    <div class="flex flex-col w-1/2 @3xl/details:w-1/3 border-l">
+    <div class="flex flex-col w-1/2 @3xl/details:w-1/3 border-l border-gray-200">
       <%= render partial: "avo/media_library/information", locals: {blob: @blob} %>
       <%= render partial: "avo/media_library/form", locals: {blob: @blob} %>
     </div>

data/app/components/avo/modal_component.html.erb

@@ -3,7 +3,7 @@
   data-modal-target="modal"
   data-modal-close-modal-on-backdrop-click-value="<%= close_modal_on_backdrop_click %>"
 >
-  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-modal-target="backdrop" data-action="click->modal#close" ></div>
+  <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-gray-800/25 flex justify-center items-center" data-modal-target="backdrop" data-action="click->modal#close"></div>
   <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg inset-auto bg-white flex z-50 relative shadow-modal <%= overflow_classes %> <%= width_classes %> <%= height_classes %>">
     <div class="flex-1 flex flex-col justify-between">
       <div>

data/app/components/avo/paginator_component.html.erb

@@ -7,7 +7,7 @@
             <%= content_tag :label, name: t('avo.per_page').downcase do %>
               <%= select_tag 'per_page',
                 options_for_select(per_page_options, @index_params[:per_page]),
-                class: 'appearance-none inline-flex bg-white-100 disabled:bg-white-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-none focus:border-slate-400 outline w-16 mr-1 text-sm',
+                class: 'appearance-none inline-flex bg-white-100 disabled:bg-white-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-hidden focus:border-slate-400 w-16 mr-1 text-sm',
                 data: {
                   'turbo-frame': @turbo_frame,
                   'per-page-target': 'selector',
@@ -30,7 +30,6 @@
       <% end %>
 
       <% if @pagy.pages > 1 %>
-        <%# @todo: add first & last page. make the first and last buttons rounded %>
         <%== helpers.pagy_nav @pagy, anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"" %>
       <% end %>
     </div>

data/app/components/avo/panel_component.html.erb

@@ -27,12 +27,12 @@
         </div>
       </div>
       <% if sidebar? %>
-        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full">
+        <div class="max-w-full sm:w-1/3 shrink-0 h-full">
           <%= sidebar %>
         </div>
       <% end %>
       <% if bare_sidebar? %>
-        <div class="max-w-full sm:w-1/3 flex-shrink-0 h-full">
+        <div class="max-w-full sm:w-1/3 shrink-0 h-full">
           <%= bare_sidebar %>
         </div>
       <% end %>