iron-cms 0.3.0 → 0.4.0

data/app/assets/tailwind/iron/application.css

@@ -53,7 +53,7 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--color-stone-200, currentColor);
   }
 }
 
@@ -64,3 +64,14 @@
     }
   }
 }
+
+@utility scrollbar-* {
+  scrollbar-color: --alpha(--value(--color-*) / calc(--modifier(integer) * 1%)) transparent;
+}
+
+@layer base {
+  /* Global overlay scrollbars */
+  * {
+    @apply scrollbar-stone-500/30 dark:scrollbar-stone-400/30;
+  }
+}

data/app/assets/tailwind/iron/components/button.css

@@ -1,74 +1,124 @@
-@utility btn {
-  /* ---------- base ------------------------------------------------------ */
-  @apply relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border font-semibold text-base/6;
-  /* sizing */
-  @apply px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/6;
-  /* focus ring */
-  @apply focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-stone-400;
-  /* disabled */
-  @apply disabled:opacity-50;
-
-  /* embedded icons ------------------------------------------------------- */
-  & > *[data-slot="icon"] {
-    @apply -mx-0.5 my-0.5 size-5 shrink-0 text-[--btn-icon] sm:my-1 sm:size-4;
+/* Base button styles */
+@utility button-base {
+  @layer components {
+    @apply font-semibold shadow-xs outline-none;
+    @apply transition-colors;
+    @apply focus-visible:outline-2 focus-visible:outline-offset-2;
+    @apply disabled:opacity-50 disabled:pointer-events-none;
+    @apply dark:shadow-none;
+
+    /* Default to button-md if no size variant specified */
+    &:not([class*='button-xs']):not([class*='button-sm']):not([class*='button-md']):not([class*='button-lg']):not([class*='button-xl']) {
+      @apply button-md;
+    }
   }
+}
 
-  /* “solid” -------------------------------------------------------------- */
-  &[data-variant="solid"],
-  &:not([data-variant]) {
-    /* implicit default */
-    @apply border-transparent bg-(--btn-bg)
-           before:absolute before:inset-0 before:-z-10
-           before:rounded-[calc(var(--radius-lg)-1px)]
-           before:bg-(--btn-bg) before:shadow-sm dark:before:hidden
-           dark:border-white/5
-           after:absolute after:inset-0 after:-z-10
-           after:rounded-[calc(var(--radius-lg)-1px)]
-           after:shadow-[inset_0_1px_var(--theme--color-white/15%)]
-           dark:after:-inset-px dark:after:rounded-lg
-           hover:after:bg-(--btn-hover-overlay)
-           active:after:bg-(--btn-hover-overlay)
-           disabled:before:shadow-none disabled:after:shadow-none;
+/* Variant styles */
+@utility button-primary {
+  @layer components {
+    @apply button-base;
+    @apply bg-sky-600 text-white;
+    @apply hover:bg-sky-500;
+    @apply focus-visible:outline-sky-600;
+    @apply dark:bg-sky-600 dark:hover:bg-sky-400 dark:focus-visible:outline-sky-500;
   }
+}
 
-  /* “outline” ------------------------------------------------------------ */
-  &[data-variant="outline"] {
-    @apply border-stone-950/10 text-stone-950
-           hover:bg-stone-950/[2.5%] active:bg-stone-950/[2.5%]
-           dark:border-white/15 dark:text-white
-           dark:hover:bg-white/5 dark:active:bg-white/5
-           [--btn-icon:var(--color-stone-500)]
-           hover:[--btn-icon:var(--color-stone-700)]
-           active:[--btn-icon:var(--color-stone-700)]
-           dark:hover:[--btn-icon:var(--color-stone-400)]
-           dark:active:[--btn-icon:var(--color-stone-400)];
+@utility button-secondary {
+  @layer components {
+    @apply button-base;
+    @apply bg-white text-stone-900 inset-ring inset-ring-stone-300;
+    @apply hover:bg-stone-50;
+    @apply focus-visible:outline-stone-600;
+    @apply dark:bg-white/10 dark:text-white dark:inset-ring-white/5 dark:hover:bg-white/20 dark:focus-visible:outline-stone-500;
   }
+}
 
-  /* “plain” -------------------------------------------------------------- */
-  &[data-variant="plain"] {
-    @apply border-transparent text-stone-950
-           hover:bg-stone-950/5 active:bg-stone-950/5
-           dark:text-white dark:hover:bg-white/10 dark:active:bg-white/10
-           [--btn-icon:var(--color-stone-500)]
-           hover:[--btn-icon:var(--color-stone-700)]
-           active:[--btn-icon:var(--color-stone-700)]
-           dark:hover:[--btn-icon:var(--color-stone-400)]
-           dark:active:[--btn-icon:var(--color-stone-400)];
+@utility button-soft {
+  @layer components {
+    @apply button-base;
+    @apply bg-indigo-50 text-indigo-600;
+    @apply hover:bg-indigo-100;
+    @apply focus-visible:outline-indigo-600;
+    @apply dark:bg-indigo-500/20 dark:text-indigo-400 dark:hover:bg-indigo-500/30 dark:focus-visible:outline-indigo-500;
   }
+}
 
-  /* ---------- semantic colors (primary, accent, destructive) ----------- */
-  &[data-color="primary"],
-  &:not([data-color]) {
-    @apply text-white [--btn-bg:var(--color-stone-600)] [--btn-border:var(--color-stone-700)]/90 [--btn-hover-overlay:var(--color-white)]/10 [--btn-icon:var(--color-stone-400)] hover:[--btn-icon:var(--color-stone-300)] active:[--btn-icon:var(--color-stone-300)];
+@utility button-ghost {
+  @layer components {
+    @apply button-base;
+    @apply text-stone-700;
+    @apply hover:bg-stone-100;
+    @apply focus-visible:outline-stone-600;
+    @apply dark:text-white dark:hover:bg-white/10 dark:focus-visible:outline-stone-500;
   }
-  &[data-color="accent"] {
-    @apply text-white [--btn-bg:var(--color-sky-500)] [--btn-border:var(--color-sky-600)]/80 [--btn-hover-overlay:var(--color-white)]/10 [--btn-icon:var(--color-white)]/60 hover:[--btn-icon:var(--color-white)]/80 active:[--btn-icon:var(--color-white)]/80;
+}
+
+@utility button-destructive {
+  @layer components {
+    @apply button-base;
+    @apply bg-red-600 text-white;
+    @apply hover:bg-red-500;
+    @apply focus-visible:outline-red-600;
+    @apply dark:bg-red-500 dark:hover:bg-red-400 dark:focus-visible:outline-red-500;
   }
-  &[data-color="destructive"] {
-    @apply text-white [--btn-bg:var(--color-red-600)] [--btn-border:var(--color-red-700)]/90 [--btn-hover-overlay:var(--color-white)]/10 [--btn-icon:var(--color-red-300)] hover:[--btn-icon:var(--color-red-200)] active:[--btn-icon:var(--color-red-200)];
+}
+
+/* Size variants */
+@utility button-xs {
+  @layer components {
+    @apply inline-flex items-center gap-x-1 rounded-sm px-2 py-1 text-xs;
+
+    & > svg {
+      @apply size-5 first:-ml-0.5 last:-mr-0.5;
+    }
+  }
+}
+
+@utility button-sm {
+  @layer components {
+    @apply inline-flex items-center gap-x-1 rounded-sm px-2 py-1 text-sm;
+
+    & > svg {
+      @apply size-5 first:-ml-0.5 last:-mr-0.5;
+    }
   }
 }
 
-@utility btn-touch-target {
-  @apply absolute left-1/2 top-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 [@media(pointer:fine)]:hidden;
+@utility button-md {
+  @layer components {
+    @apply inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1.5 text-sm;
+
+    & > svg {
+      @apply size-5 first:-ml-0.5 last:-mr-0.5;
+    }
+  }
+}
+
+@utility button-lg {
+  @layer components {
+    @apply inline-flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm;
+
+    & > svg {
+      @apply size-5 first:-ml-0.5 last:-mr-0.5;
+    }
+  }
+}
+
+@utility button-xl {
+  @layer components {
+    @apply inline-flex items-center gap-x-2 rounded-md px-3.5 py-2.5 text-sm;
+
+    & > svg {
+      @apply size-5 first:-ml-0.5 last:-mr-0.5;
+    }
+  }
+}
+
+/* Legacy support - map old btn class to button-primary button-md */
+@utility btn {
+  @layer components {
+    @apply button-primary button-md;
+  }
 }

data/app/assets/tailwind/iron/components/input.css

@@ -1,19 +1,21 @@
 @utility input {
-  @apply relative block w-full appearance-none rounded-lg;
-  @apply px-3 py-2 sm:px-2.5 sm:py-1.5;
-  @apply text-base/6 sm:text-sm/6;
-  @apply text-stone-100 placeholder:text-stone-500;
+  @apply relative block w-full appearance-none rounded-md;
+  @apply px-3 py-1.5;
+  @apply text-base sm:text-sm/6;
+  @apply text-stone-900 placeholder:text-stone-400;
 
   /* Border and background */
-  @apply border border-stone-950/10;
-  @apply dark:border-white/10;
-  @apply bg-transparent dark:bg-white/5;
+  @apply outline-1 -outline-offset-1 outline-stone-300;
+  @apply bg-white;
 
   /* Focus state */
-  @apply focus:outline focus:outline-2 focus:outline-stone-500;
+  @apply focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600;
+
+  /* Dark mode */
+  @apply dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-stone-500 dark:focus:outline-indigo-500;
 
   /* States */
-  @apply disabled:opacity-50 disabled:bg-stone-700 disabled:border-stone-600;
+  @apply disabled:opacity-50;
 
   /* Error state */
   &.is-invalid {

data/app/assets/tailwind/iron/components/sidebar.css

@@ -1,21 +1,17 @@
 @utility sidebar-item {
   /* Base */
-  @apply flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-stone-950 sm:py-2 sm:text-sm/5;
-  /* Leading icon/icon-only */
-  @apply *:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-5;
-  /* Trailing icon (down chevron or similar) */
-  @apply *:last:data-[slot=icon]:ml-auto *:last:data-[slot=icon]:size-5 sm:*:last:data-[slot=icon]:size-4;
-  /* Avatar */
-  @apply *:data-[slot=avatar]:-m-0.5 *:data-[slot=avatar]:size-7 *:data-[slot=avatar]:[--ring-opacity:10%] sm:*:data-[slot=avatar]:size-6;
-  /* Hover */
-  @apply hover:bg-stone-950/5;
-  /* Active */
-  @apply active:bg-stone-950/5 active:*:data-[slot=icon]:fill-stone-950;
-  /* Current */
-  @apply data-current:*:data-[slot=icon]:bg-transparent;
-  /* Dark mode */
-  @apply dark:text-white dark:*:data-[slot=icon]:text-stone-400;
-  @apply dark:hover:bg-white/5 dark:hover:*:data-[slot=icon]:text-white;
-  @apply dark:active:bg-white/5 dark:active:*:data-[slot=icon]:text-white;
+  @apply flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold;
+  /* Default state */
+  @apply text-stone-700 dark:text-stone-400;
+  /* Hover state */
+  @apply hover:bg-stone-50 hover:text-stone-600 dark:hover:bg-white/5 dark:hover:text-white;
+  /* Leading icon */
+  @apply *:data-[slot=icon]:size-6 *:data-[slot=icon]:shrink-0;
+  @apply *:data-[slot=icon]:text-stone-400;
+  @apply hover:*:data-[slot=icon]:text-stone-600 dark:hover:*:data-[slot=icon]:text-white;
+  /* Current state */
+  @apply data-current:bg-stone-50 data-current:text-stone-600;
+  @apply dark:data-current:bg-white/5 dark:data-current:text-white;
+  @apply data-current:*:data-[slot=icon]:text-stone-600;
   @apply dark:data-current:*:data-[slot=icon]:text-white;
 }

data/app/helpers/iron/application_helper.rb

@@ -2,7 +2,7 @@ require "tailwind_merge"
 module Iron
   module ApplicationHelper
     include IconsHelper, AvatarHelper, ButtonsHelper, EntriesHelper, ContentTypesHelper
-    include Components::DropdownHelper, Components::BadgeHelper
+    include Components::BadgeHelper
 
     def tw(*classes)
       TailwindMerge::Merger.new.merge(classes.reject(&:blank?).compact.join(" "))

data/app/helpers/iron/form_builder.rb

@@ -39,5 +39,51 @@ module Iron
       options[:class] = @template.tw("text-sm/6 font-medium", options[:class])
       super(method, text, options, &block)
     end
+
+    def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
+      selected_value = object.send(method) rescue nil
+
+      @template.render partial: "iron/shared/collection_select", locals: {
+        field_name: "#{object_name}[#{method}]",
+        select_id: html_options[:id] || "#{object_name}_#{method}",
+        selected_value: selected_value,
+        collection: collection,
+        value_method: value_method,
+        text_method: text_method,
+        options: options,
+        html_options: html_options
+      }
+    end
+
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      selected_value = object.send(method) rescue nil
+
+      # Convert choices to a uniform format
+      collection = case choices
+      when Hash
+        choices.map { |text, value| OpenStruct.new(text: text, value: value) }
+      when Array
+        choices.map do |item|
+          if item.is_a?(Array)
+            OpenStruct.new(text: item[0], value: item[1])
+          else
+            OpenStruct.new(text: item, value: item)
+          end
+        end
+      else
+        []
+      end
+
+      @template.render partial: "iron/shared/collection_select", locals: {
+        field_name: "#{object_name}[#{method}]",
+        select_id: html_options[:id] || "#{object_name}_#{method}",
+        selected_value: selected_value,
+        collection: collection,
+        value_method: :value,
+        text_method: :text,
+        options: options,
+        html_options: html_options
+      }
+    end
   end
 end

data/app/javascript/iron/application.js

@@ -4,3 +4,5 @@ import "controllers";
 
 import "trix"
 import "@rails/actiontext"
+
+import "@tailwindplus/elements"

data/app/models/iron/entry/web_publishable.rb

@@ -3,8 +3,8 @@ module Iron
     extend ActiveSupport::Concern
 
     included do
-      before_validation :generate_route, if: :should_generate_route?
       before_validation :normalize_route
+      before_validation :generate_route, if: :should_generate_route?
 
       validates :route, uniqueness: { scope: :content_type_id, allow_blank: true }, if: :route_required?
       validates :route, format: { with: /\A[a-z0-9\-\/]*\z/, message: "can only contain lowercase letters, numbers, hyphens and slashes" }, allow_blank: true
@@ -12,11 +12,7 @@ module Iron
     end
 
     def use_as_index=(value)
-      if ActiveModel::Type::Boolean.new.cast(value)
-        self.route = ""
-      elsif route.blank?
-        self.route = nil
-      end
+      @use_as_index_intent = ActiveModel::Type::Boolean.new.cast(value)
     end
 
     def use_as_index
@@ -67,12 +63,16 @@ module Iron
       end
 
       def normalize_route
-        return if route.blank?
-
-        self.route = route.downcase
-          .gsub(/[^a-z0-9\-\/]+/, "-")  # Replace non-allowed chars with hyphens
-          .gsub(/\-+/, "-")              # Replace multiple hyphens with single hyphen
-          .gsub(/\A[\-\/]+|[\-\/]+\z/, "")  # Remove leading/trailing hyphens and slashes
+        if @use_as_index_intent
+          self.route = ""
+        elsif route.present?
+          self.route = route.downcase
+            .gsub(/[^a-z0-9\-\/]+/, "-")  # Replace non-allowed chars with hyphens
+            .gsub(/\-+/, "-")              # Replace multiple hyphens with single hyphen
+            .gsub(/\A[\-\/]+|[\-\/]+\z/, "")  # Remove leading/trailing hyphens and slashes
+        elsif @use_as_index_intent == false
+          self.route = nil
+        end
       end
 
 

data/app/views/iron/block_definitions/_form.html.erb

@@ -41,6 +41,6 @@
   </div>
 
   <div class="mt-4">
-    <%= form.submit class: "btn" %>
+    <%= form.submit class: "button-primary" %>
   </div>
 <% end %>

data/app/views/iron/block_definitions/index.html.erb

@@ -3,7 +3,7 @@
 <div class="space-y-8">
   <div class="flex justify-between items-center">
     <h1 class="page-title">Block definitions</h1>
-    <%= link_to "New block definition", new_block_definition_path, class: "btn" %>
+    <%= link_to "New block definition", new_block_definition_path, class: "button-primary" %>
   </div>
 
   <div

data/app/views/iron/block_definitions/show.html.erb

@@ -5,9 +5,9 @@
   <div class="flex justify-between">
     <h1 class="page-title"><%= @block_definition.name %></h1>
     <div>
-      <%= link_to "Edit", edit_block_definition_path(@block_definition), class: "btn", data: { variant: "outline" } %>
+      <%= link_to "Edit", edit_block_definition_path(@block_definition), class: "button-secondary" %>
       <div class="mt-4 inline-block ml-2">
-        <%= button_to "Destroy", @block_definition, method: :delete, class: "btn", data: { color: "destructive" } %>
+        <%= button_to "Destroy", @block_definition, method: :delete, class: "button-destructive" %>
       </div>
     </div>
   </div>
@@ -29,6 +29,6 @@
   <div class="mt-4">
     <%= link_to "+ Add new field",
     new_block_definition_field_definition_path(@block_definition),
-    class: "btn" %>
+    class: "button-primary" %>
   </div>
 </div>

data/app/views/iron/content_types/_form.html.erb

@@ -132,6 +132,6 @@
   <% end %>
 
   <div class="mt-4">
-    <%= form.submit %>
+    <%= form.submit class: "button-primary" %>
   </div>
 <% end %>

data/app/views/iron/content_types/index.html.erb

@@ -6,13 +6,10 @@
     <div class="flex items-center gap-2">
       <%= link_to "Export",
       export_schema_path,
-      class: "btn",
-      data: {
-        variant: "outline",
-        turbo: false,
-      } %>
-      <%= link_to "Import", schema_path, class: "btn", data: { variant: "outline" } %>
-      <%= link_to "New Content Type", new_content_type_path, class: "btn" %>
+      class: "button-secondary",
+      data: { turbo: false } %>
+      <%= link_to "Import", schema_path, class: "button-secondary" %>
+      <%= link_to "New Content Type", new_content_type_path, class: "button-primary" %>
     </div>
   </div>
 

data/app/views/iron/content_types/show.html.erb

@@ -7,18 +7,12 @@
     <div>
       <%= link_to "Edit",
       edit_content_type_path(@content_type),
-      class: "btn",
-      data: {
-        variant: "outline",
-      } %>
+      class: "button-secondary" %>
       <div class="mt-4 inline-block ml-2">
         <%= button_to "Destroy",
         @content_type,
         method: :delete,
-        class: "btn",
-        data: {
-          color: "destructive",
-        } %>
+        class: "button-destructive" %>
       </div>
     </div>
   </div>
@@ -44,6 +38,6 @@
   <div class="mt-4">
     <%= link_to "+ Add new field",
     new_content_type_field_definition_path(@content_type),
-    class: "btn" %>
+    class: "button-primary" %>
   </div>
 </div>

data/app/views/iron/contents/new.html.erb

@@ -27,8 +27,8 @@
     </div>
 
     <div class="mt-6 flex items-center gap-x-3">
-      <%= form.submit "Import Content", class: "btn" %>
-      <%= link_to "Cancel", settings_path, class: "btn", data: { variant: "plain" } %>
+      <%= form.submit "Import Content", class: "button-primary" %>
+      <%= link_to "Cancel", settings_path, class: "button-secondary" %>
     </div>
   <% end %>
 </div>

data/app/views/iron/entries/_form.html.erb

@@ -15,49 +15,57 @@
   </div>
 
   <% if entry.content_type.web_publishing_enabled? %>
-    <fieldset class="mt-6">
-      <legend>Web Publishing</legend>
-
-      <div class="field">
-        <%= form.label :route, "Route" %>
-        <div>
-          <%= form.text_field :route,
-                          placeholder: "e.g., 'about' or 'company/team'",
-                          pattern: "[a-z0-9\\-\\/]*",
-                          title:
-                            "Only lowercase letters, numbers, hyphens and slashes allowed" %>
-          <% if entry.content_type.base_path.present? %>
-            <p class="text-sm text-stone-500 mt-1">
-              URL:
-              <%= entry.content_type.path_for(entry) || "/#{entry.content_type.base_path}/[route]" %>
-            </p>
-          <% else %>
-            <p class="text-sm text-stone-500 mt-1">
-              URL:
-              <%= entry.route.blank? ? "/" : "/#{entry.route}" %>
-            </p>
-          <% end %>
-          <%= form.error_for :route %>
+    <fieldset class="my-6 group">
+      <legend class="mb-4">Web Publishing</legend>
+
+      <div>
+
+        <div class="flex items-center justify-between">
+          <span class="flex grow flex-col">
+            <%= form.label :use_as_index, "Use as index page", class: "text-sm/6 font-medium text-stone-900 dark:text-white" %>
+            <span class="text-sm text-stone-500 dark:text-stone-400">
+              <% if entry.content_type.base_path.present? %>
+                Make this entry available at /<%= entry.content_type.base_path %>/
+              <% else %>
+                Make this entry the site home page at /
+              <% end %>
+            </span>
+          </span>
+          <div class="group relative inline-flex w-11 shrink-0 rounded-full bg-stone-200 p-0.5 inset-ring inset-ring-stone-900/5 outline-offset-2 outline-sky-600 transition-colors duration-200 ease-in-out has-checked:bg-sky-600 has-focus-visible:outline-2 dark:bg-white/5 dark:inset-ring-white/10 dark:outline-sky-500 dark:has-checked:bg-sky-500">
+            <span class="size-5 rounded-full bg-white shadow-xs ring-1 ring-stone-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-5"></span>
+            <%= form.check_box :use_as_index, class: "absolute inset-0 appearance-none focus:outline-hidden" %>
+          </div>
+        </div>
+
+        <div class="field group-has-checked:hidden">
+          <%= form.label :route, "Route" %>
+          <div>
+            <%= form.text_field :route,
+                            placeholder: "e.g., 'about' or 'company/team'",
+                            pattern: "[a-z0-9\\-\\/]*",
+                            title:
+                              "Only lowercase letters, numbers, hyphens and slashes allowed" %>
+            <% if entry.content_type.base_path.present? %>
+              <p class="text-sm text-stone-500 mt-1">
+                URL:
+                <%= entry.content_type.path_for(entry) || "/#{entry.content_type.base_path}/[route]" %>
+              </p>
+            <% else %>
+              <p class="text-sm text-stone-500 mt-1">
+                URL:
+                <%= entry.route.blank? ? "/" : "/#{entry.route}" %>
+              </p>
+            <% end %>
+            <%= form.error_for :route %>
+          </div>
         </div>
-      </div>
 
-      <div class="field">
-        <%= form.label :use_as_index do %>
-          <%= form.check_box :use_as_index %>
-          Use as index page
-        <% end %>
-        <p class="text-sm text-stone-500 mt-1">
-          <% if entry.content_type.base_path.present? %>
-            Check this to make this entry available at /<%= entry.content_type.base_path %>/
-          <% else %>
-            Check this to make this entry the site home page at /
-          <% end %>
-        </p>
       </div>
+
     </fieldset>
   <% end %>
 
   <div class="mt-4">
-    <%= form.submit %>
+    <%= form.submit class: "button-primary" %>
   </div>
 <% end %>

data/app/views/iron/entries/edit.html.erb

@@ -29,22 +29,12 @@
         <% end %>
       <% end %>
       <% if @entry.content_type.web_publishing_enabled? && !@entry.route.nil? %>
-        <%= link_to "View",
-        @entry.path,
-        target: "_blank",
-        rel: "noopener",
-        class: "btn",
-        data: {
-          color: "secondary",
-        } %>
+        <%= link_to "View", @entry.path, target: "_blank", rel: "noopener", class: "button-secondary" %>
       <% end %>
       <%= button_to "Destroy",
       entry_path(@entry),
       method: :delete,
-      class: "btn",
-      data: {
-        color: "destructive",
-      } %>
+      class: "button-destructive" %>
     </div>
   </div>