also remove all button_classes usage

app/assets/stylesheets/merged.tailwind.css

@@ -5,7 +5,7 @@
 
 @layer components {
   .button {
-    @apply inline-block rounded-lg px-3 py-2 text-base font-medium border border-gray-600 hover:border-2;
+    @apply inline-block rounded-lg px-3 py-2 text-base font-medium border border-gray-500 hover:border-black;
   }
   .change {
     @apply bg-cyan-200;

app/assets/stylesheets/merged/merged.css

@@ -1287,7 +1287,7 @@ select {
   border-radius: 0.5rem;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1298,7 +1298,8 @@ select {
 }
 
 .button:hover {
-  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
 .change {
@@ -1608,10 +1609,6 @@ select {
   margin-top: 5rem;
 }
 
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .block {
   display: block;
 }
@@ -2206,18 +2203,13 @@ select {
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
-.bg-cyan-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
 .bg-transparent {
   background-color: transparent;
 }
 
-.bg-green-200 {
+.bg-cyan-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
 }
 
 .bg-blue-200 {
@@ -2315,10 +2307,6 @@ select {
   padding: 0.5rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-6 {
   padding: 1.5rem;
 }
@@ -2706,11 +2694,6 @@ select {
   background-color: rgb(224 242 254 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-cyan-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-blue-800:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));

app/helpers/merged/merged_helper.rb

@@ -26,7 +26,7 @@ module Merged
 
     def last_change_class
       digit = last_change_digit
-      return button_classes if digit > 9
+      return "" if digit > 9
       digit = 9 - digit
       reds = { "1" => "bg-red-100","2" => "bg-red-200","3" => "bg-red-100",
                "4" => "bg-red-400","5" => "bg-red-500","6" => "bg-red-600",
@@ -34,7 +34,7 @@ module Merged
 
       clazz = reds[digit.to_s].to_s
       clazz += " " + "text-white" if digit > 7
-      button_classes + " " + clazz
+      clazz
     end
 
     def last_change_text
@@ -43,9 +43,5 @@ module Merged
       "#{digit} min. by #{ChangeSet.current.last_editor}"
     end
 
-    def button_classes
-      "mr-3 inline-block rounded-lg px-3 py-2 text-md font-medium border border-gray-500"
-    end
-
   end
 end

app/views/layouts/merged/_header.haml

@@ -23,7 +23,7 @@
 
   .flex.items-center.gap-16
     = link_to merged.changes_index_path do
-      %button.my-3{class: last_change_class}= last_change_text
+      %button.my-3.button{class: last_change_class}= last_change_text
 
     = form_tag( main_app.destroy_member_session_path , {method: :delete  } ) do
       %button.flex.w-full.items-center.gap-2.rounded-lg.px-4.py-2.text-sm.text-blue-700.hover:bg-red-50{:role => "menuitem", :type => "submit"}

app/views/merged/cards/index.haml

@@ -37,8 +37,8 @@
         %button.button.change.mt-4{type: :submit} Move
 
     .basis-80
-      = link_to(merged.images_path(card_id: card.id)) do
-        -if card.image
+      -if card.image
+        = link_to(merged.images_path(card_id: card.id)) do
           %h3.mt-4.text-lg.font-bold Image #{card.image.name}
           .flex.align-center.justify-between.mb-4
             .text-lg.font-bold.mt-2.mx-2
@@ -46,14 +46,17 @@
             %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
               = card.image.aspect_ratio
           = image_for( card , "mb-4")
-          = link_to Change Image" , merged.images_path(card_id: card.id) )
+        .flex.gap-3
+          = link_to merged.images_path(card_id: card.id) do
+            %button.button.action Change Image
           = link_to merged.image_path(card.image.id)  do
             %button.button.change Edit Image
-          = link_to merged.card_set_image_path( card.id  , image: "")
+          = link_to merged.card_set_image_path( card.id  , image: "") do
             %button.button.remove Remove image
-        -else
-          %h3.mt-4.text-lg.font-bold No image
-          %button.my-3.bg-cyan-200{class: button_classes} Add Image
+      -else
+        %h3.mt-4.text-lg.font-bold No image
+        = link_to(merged.images_path(card_id: card.id)) do
+          %button.button.my-3.change Add Image
     .basis-72.grow
       %label.block
         %h4.text-lg.font-bold Texts

app/views/merged/images/_editor.haml

@@ -10,7 +10,7 @@
 
       = form_tag( merged.image_scale_path(image_id: image.id) ) do
         %input{ hidden: true ,  id: :scale_id , name: :scale , "v-bind:value": "scale" }
-        %button.my-3.bg-cyan-200{class: button_classes} Scale  {{scale}} %
+        %button.my-3.button.change Scale  {{scale}} %
 
     %div.mt-2
       %b.pr-2 Ratio
@@ -22,7 +22,7 @@
       %input{ hidden: true ,  id: :height_id , name: :size_y , "v-bind:value": "size_y" }
       %input{ hidden: true ,  id: :off_x_id , name: :off_x , "v-bind:value": "off_x" }
       %input{ hidden: true ,  id: :off_y_id , name: :off_y , "v-bind:value": "off_y" }
-      %button.my-3.bg-cyan-200{class: button_classes } Crop
+      %button.my-3.button.change Crop
 
     %div.mt-2.ml-32
       %b.pr-2 Fix ratio to

app/views/merged/images/index.haml

@@ -2,8 +2,8 @@
   .text-xl.font-bold.text-gray-900
     = text_for_index
 
-  = link_to( "New Image" , merged.new_image_path(new_link_params) , class: button_classes + " bg-green-200")
-
+  = link_to(merged.new_image_path(new_link_params) ) do
+    .button.action New Image
 - if Rails.env.development?
   = javascript_include_tag "merged/vue.js"
 -else

app/views/merged/images/show.haml

@@ -2,8 +2,8 @@
   .text-xl.font-bold.text-gray-900
     Image: #{@image.name}
 
-  %button.mx-40.hover:bg-cyan-200{class: button_classes }
-    =link_to "Copy" , merged.image_copy_path(@image.id)
+  =link_to merged.image_copy_path(@image.id) do
+    %button.mx-40.button.change Copy
 
 - if Rails.env.development?
   = javascript_include_tag "merged/vue.js"
@@ -27,7 +27,7 @@
     = text_field_tag( "name" , @image.name, class: "rounded border-gray-200 text-sm shadow-sm")
     .font-bold.mt-3.mx-4 Tags:
     = text_field_tag( "tags" , @image.tags, class: "rounded border-gray-200 text-sm shadow-sm")
-    %button.bg-cyan-200.mx-4{class: button_classes } Update
+    %button.mx-4.button.change Update
 
 
 

app/views/merged/sections/index.haml

@@ -4,7 +4,8 @@
     = link_to @page.name , merged.page_path(@page)
   .text-xl.text-gray-900
     =link_to "View live" , "/#{@page.name}" , target: @page.name
-  = link_to( "New Section" , merged.new_page_section_path(@page.id) , class: button_classes + " bg-cyan-200")
+  = link_to( merged.new_page_section_path(@page.id) ) do
+    %button.button.change New Section
 
 -@page.sections.each do |section |
   .flex.gap-10.mt-2.pt-4.pb-2.border-2.bg-neutral-50.border-slate-400{ id: "section_#{section.id}"}