move colored buttons from ruby to tailwind/html

app/assets/stylesheets/merged.tailwind.css

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

app/assets/stylesheets/merged/merged.css

@@ -1283,12 +1283,11 @@ select {
 }
 
 .button {
-  margin-right: 0.75rem;
   display: inline-block;
   border-radius: 0.5rem;
   border-width: 1px;
   --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1298,6 +1297,10 @@ select {
   font-weight: 500;
 }
 
+.button:hover {
+  border-width: 2px;
+}
+
 .change {
   --tw-bg-opacity: 1;
   background-color: rgb(165 243 252 / var(--tw-bg-opacity));
@@ -1605,6 +1608,10 @@ select {
   margin-top: 5rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -2075,21 +2082,6 @@ select {
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
-.bg-cyan-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
-.bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
-.bg-green-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-}
-
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -2214,10 +2206,20 @@ 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 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
 .bg-blue-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@@ -2694,14 +2696,6 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:border-2:hover {
-  border-width: 2px;
-}
-
-.hover\:border-4:hover {
-  border-width: 4px;
-}
-
 .hover\:bg-red-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));

app/helpers/merged/merged_helper.rb

@@ -14,22 +14,6 @@ module Merged
       name += "*" unless card.option("compulsory") == "no"
       name
     end
-    def blue_button( text, url)
-      button( text , url , "bg-cyan-200" )
-    end
-    def red_button( text, url)
-      button( text , url , "bg-red-300" )
-    end
-    def green_button( text, url)
-      button( text , url , "bg-green-200" )
-    end
-    def button(text , url , color)
-      link_to(url) do
-        content_tag(:button , class: color + " " + button_classes ) do
-          text
-        end
-      end
-    end
 
     def last_change_digit
       last = ChangeSet.current.last

app/helpers/merged/view_helper.rb

@@ -42,16 +42,13 @@ module Merged
 
     def view_button(element , extra_classes = "")
       return "" unless element.has_option?("button_link")
-      ["<button class='#{button_classes} ",
+      ["<button class='button ",
         extra_classes,
-        " hover:border-2'>" ,
+        " >" ,
         "<a href='#{element.option("button_link")}'>" ,
         element.option("button_text") ,
         "</a>",
       " </button>"].join.html_safe
     end
-    def view_button_classes(element)
-      button_classes + " hover:border-4"
-    end
   end
 end

app/views/merged/cards/index.haml

@@ -46,9 +46,11 @@
             %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
               = card.image.aspect_ratio
           = image_for( card , "mb-4")
-          = green_button("Change Image" , merged.images_path(card_id: card.id) )
-          = blue_button("Edit Image" , merged.image_path(card.image.id) )
-          = red_button("Remove image", merged.card_set_image_path( card.id  , image: "") )
+          = link_to Change Image" , merged.images_path(card_id: card.id) )
+          = link_to merged.image_path(card.image.id)  do
+            %button.button.change Edit Image
+          = link_to merged.card_set_image_path( card.id  , image: "")
+            %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

app/views/merged/pages/index.haml

@@ -42,5 +42,6 @@
     %label.block
       %h4.text-lg.font-bold Name
       = text_field_tag( :name , params[:name], class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-    - @page_styles.each do |page|
-      %button.mt-3.bg-cyan-200{class: button_classes , name: :type , value: page.type}= "New #{page.type.capitalize}"
+    .flex.gap-3.mt-3.justify-between
+      - @page_styles.each do |page|
+        %button.button.change{name: :type , value: page.type}= "New #{page.type.capitalize}"

app/views/merged/sections/index.haml

@@ -10,9 +10,11 @@
   .flex.gap-10.mt-2.pt-4.pb-2.border-2.bg-neutral-50.border-slate-400{ id: "section_#{section.id}"}
     .basis-72.ml-20
       %h3.text-lg.font-bold Section #{section.index} : #{section.header}
-      .flex.flex-wrap
-        = green_button("Edit" , merged.section_path(section.id) )
-        = blue_button( "Copy" , merged.new_page_section_path(@page.id, template: section.template) )
+      .flex.flex-wrap.gap-3
+        = link_to merged.section_path(section.id) do
+          %button.button.action Edit
+        = link_to merged.new_page_section_path(@page.id, template: section.template) do
+          %button.button.change Copy
         .p-2
           =link_to(merged.section_move_path(section.id , dir: :down)) do
             %svg.w-6.h-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
@@ -76,9 +78,8 @@
             .font-xl= value
 .grid.grid-cols-2.gap-2.m-8
   .relative.block
-    %p
-      = blue_button( "New Section" , merged.new_page_section_path(@page.id) )
+    = link_to merged.new_page_section_path(@page.id) do
+      %button.button.change New Section
   .relative.block.delete_page
-    %p
-      = form_tag( merged.page_path(@page.id) , {method: :delete  } ) do
-        %button.button.remove{type: :submit} Delete Page
+    = form_tag( merged.page_path(@page.id) , {method: :delete  } ) do
+      %button.button.remove{type: :submit} Delete Page

app/views/merged/sections/show.haml

@@ -10,7 +10,7 @@
     %h3.text-lg.font-bold= @section.template_style.header
     = section_preview(@section , class: "w-full object-contain my-4")
     = link_to merged.section_select_template_path(@section.id) do
-      .button.action Change Style
+      .button.action.mr-3 Change Style
     = link_to merged.new_page_section_path(@section.page.id , template: @section.template) do
       .button.change New Section
     .basis-full.mt-3
@@ -22,7 +22,7 @@
     = simple_form_for(  @section ,  method: :patch ) do |f|
       = f.input :page_id , label: "move to page" , include_blank: false ,
                 collection: Merged::Page.all.collect{|p| [p.name , p.id]}
-      %button.button.change{type: :submit} Move
+      %button.button.change.mt-3{type: :submit} Move
 
   .basis-80.image
     = link_to(merged.images_path(section_id: @section.id)) do
@@ -38,10 +38,10 @@
         %h3.text-lg.font-bold No Image
     .flex
       =link_to merged.images_path(section_id: @section.id) do
-        .button.action.mt-4 Change Image
+        .button.action.mt-4.mr-3 Change Image
       - if( @section.image )
         =link_to merged.image_path(@section.image.id) do
-          .button.change.mt-4 Edit Image
+          .button.change.mt-4.mr-3 Edit Image
         =link_to  merged.section_set_image_path( @section.id  , image: "") do
           .button.remove.mt-4 Remove image
 
@@ -59,16 +59,18 @@
       .mx-3.text-lg.font-bold Card Style #{@section.card_template}
       =card_preview(@section , class: "my-3")
       %p.py-3
-        =green_button("Change Card Style", merged.section_select_card_template_path(@section.id))
-
+        = link_to merged.section_select_card_template_path(@section.id) do
+          %button.button.action Change Card Style
     .basis-96.grow
       %h3.text-lg.font-bold #{@section.cards.length} Cards
       -@section.cards.each do |card|
         .mt-4.text-md.font-bold= card.header
         .text-sm #{card.text[0..70]} .....
-      %p.p-3
-        = green_button( "View and Edit Cards" , merged.section_cards_path(@section.id))
-        = blue_button( "New Card" , merged.new_section_card_path(@section.id) )
+      .flex.mt-3.gap-3
+        = link_to merged.section_cards_path(@section.id) do
+          %button.button.action View and Edit Cards
+        = link_to merged.new_section_card_path(@section.id) do
+          %button.button.change New Card
 
   .basis-80.grow
     = simple_form_for( @section , method: :patch , class: "mx-auto mb-0 max-w space-y-4") do