move submit button from code to tailwind

app/assets/stylesheets/merged.tailwind.css

@@ -1,2 +1,19 @@
 @import "./tailwind_base.css";
 @import "./merged/tailwind_styles.css";
+
+
+
+@layer components {
+  .button {
+    @apply mr-3 inline-block rounded-lg px-3 py-2 text-base font-medium border border-gray-500;
+  }
+  .change {
+    @apply bg-cyan-200;
+  }
+  .remove {
+    @apply bg-red-200;
+  }
+  .action {
+    @apply bg-green-200;
+  }
+}

app/assets/stylesheets/merged/merged.css

@@ -1282,6 +1282,37 @@ select {
   margin-bottom: 0;
 }
 
+.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));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+
+.change {
+  --tw-bg-opacity: 1;
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
+}
+
+.remove {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
+.action {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

app/helpers/merged/merged_helper.rb

@@ -23,14 +23,6 @@ module Merged
     def green_button( text, url)
       button( text , url , "bg-green-200" )
     end
-    def submit_button(text , danger = false )
-      clazz = "bg-cyan-200 " #full names, no tricks for tailwind
-      clazz = "bg-red-300 " if danger
-      clazz += button_classes
-      content_tag(:button , class: clazz  , type: :submit) do
-        text
-      end
-    end
     def button(text , url , color)
       link_to(url) do
         content_tag(:button , class: color + " " + button_classes ) do

app/views/merged/cards/index.haml

@@ -30,11 +30,11 @@
           = card.updated_by
         .basis-full.mb-3
         = form_for( card , {method: :delete  } ) do
-          =submit_button( "Delete Card" , true)
+          %button.button.remove.mt-4{type: :submit} Delete Card
       = simple_form_for(  card ,  method: :patch ) do |f|
         = f.input :section_id , label: "move to section" , include_blank: false ,
                   collection: card_section_select
-        =submit_button( "Move")
+        %button.button.change.mt-4{type: :submit} Move
 
     .basis-80
       = link_to(merged.images_path(card_id: card.id)) do
@@ -58,7 +58,7 @@
       = simple_form_for( card , method: :patch) do |f|
         = f.input :header
         = f.input :text , as: :text , input_html: {rows: rows(card)}
-        .mt-4= submit_button("Update Texts")
+      %button.button.change.mt-4{type: :submit} Update Texts
 
     .basis-72.grow
       = form_for( card , {method: :patch }) do
@@ -68,4 +68,4 @@
         -if card.option_definitions.empty?
           %p No options
         -else
-          = submit_button("Update Options")
+          %button.button.change{type: :submit} Update Options

app/views/merged/changes/index.haml

@@ -37,10 +37,10 @@
           %label.block
             %h4.text-lg.font-bold Message (short summary of changes)
             = text_field_tag( :message , "", class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-        =submit_button( "Commit")
+        %button.button.change{type: :submit} Commit Changes
 
   .max-w-xl.px-4.py-8.mx-auto.text-center.reset_changes
     = form_tag( merged.changes_reset_path() , {method: :post  } ) do
       %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
         Reset changes
-      =submit_button( "Reset" ,true)
+      %button.button.remove{type: :submit} Reset

app/views/merged/images/new.haml

@@ -9,4 +9,4 @@
       %p.my-4 Tags describe the size or format
       = hidden_for_select_image
       = file_field_tag 'image_file' , class: "mb-8 w-full px-2 text-xl bg-clip-padding border border-solid border-gray-300  rounded"
-      = submit_button 'Submit'
+      %button.button.change{type: :submit} Submit

app/views/merged/images/show.haml

@@ -60,4 +60,4 @@
     %p.align-center Not used, you may delete
     %p
       = form_tag( merged.image_path(@image.id) , {method: :delete  } ) do
-        =submit_button( "Delete" , true)
+        %button.button.remove{type: :submit} Delete

app/views/merged/pages/show.haml

@@ -21,7 +21,7 @@
       %label.block
         %h4.text-lg.font-bold Name
         = text_field_tag( :name , @page.name, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-      .mt-4= submit_button("Update name")
+      %button.button.change.mt-4{type: :submit} Update name
       -unless @page.redirects.blank?
         .mt-4
           Page redirects from
@@ -35,4 +35,4 @@
       -if @page.option_definitions.empty?
         %p No options
       -else
-        .mt-4= submit_button("Update Options")
+        %button.button.change.mt-4{type: :submit} Update Options

app/views/merged/sections/index.haml

@@ -37,7 +37,7 @@
               = card.updated_by
         .basis-full.mb-3
         = form_tag( merged.section_path(section.id) , {method: :delete  } ) do
-          =submit_button( "Delete" , true)
+          %button.button.remove{type: :submit} Delete
 
     .basis-72
       .flow.flow-cols
@@ -81,4 +81,4 @@
   .relative.block.delete_page
     %p
       = form_tag( merged.page_path(@page.id) , {method: :delete  } ) do
-        =submit_button( "Delete Page" , true)
+        %button.button.remove{type: :submit} Delete Page

app/views/merged/sections/show.haml

@@ -1,6 +1,7 @@
 .mx-20.flex.h-16.items-center.gap-16.w-full
   = render "sections_pagination" , section: @section
-  = link_to( "New Section" , merged.new_page_section_path(@section.page.id) , class: button_classes + " bg-cyan-100")
+  = link_to( merged.new_page_section_path(@section.page.id) ) do
+    .button.change New Section
 
 = render_section( @section )
 
@@ -8,8 +9,10 @@
   .basis-80
     %h3.text-lg.font-bold= @section.template_style.header
     = section_preview(@section , class: "w-full object-contain my-4")
-    = green_button( "Change Style" , merged.section_select_template_path(@section.id))
+    = link_to merged.section_select_template_path(@section.id) do
-    = blue_button( "New Section" , merged.new_page_section_path(@section.page.id , template: @section.template) )
+      .button.action Change Style
+    = link_to merged.new_page_section_path(@section.page.id , template: @section.template) do
+      .button.change New Section
     .basis-full.mt-3
       Updated at:
       = distance_of_time_in_words_to_now(@section.updated_at)
@@ -19,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]}
-      =submit_button( "Move")
+      %button.button.change{type: :submit} Move
 
   .basis-80.image
     = link_to(merged.images_path(section_id: @section.id)) do
@@ -34,9 +37,13 @@
       -else
         %h3.text-lg.font-bold No Image
     .flex
-      .mt-3= green_button("Change Image", merged.images_path(section_id: @section.id))
+      =link_to merged.images_path(section_id: @section.id) do
-      .mt-3= blue_button("Edit Image" , merged.image_path(@section.image.id) ) if( @section.image )
+        .button.action.mt-4 Change Image
-      .mt-3= red_button( "Remove image", merged.section_set_image_path( @section.id  , image: "")) if( @section.image )
+      - if( @section.image )
+        =link_to merged.image_path(@section.image.id) do
+          .button.change.mt-4 Edit Image
+        =link_to  merged.section_set_image_path( @section.id  , image: "") do
+          .button.remove.mt-4 Remove image
 
   .basis-80.grow.content_update
     %label.block
@@ -44,7 +51,7 @@
     = simple_form_for( @section , method: :patch) do |f|
       = f.input :header
       = f.input :text , as: :text , input_html: {rows: rows(@section)}
-      .mt-4= submit_button("Update Texts")
+      %button.button.change.mt-4{type: :submit} Update Texts
 
   - if( @section.has_cards? )
     .basis-full.h-0
@@ -71,4 +78,4 @@
       -if @section.option_definitions.empty?
         %p No options
       -else
-        .mt-4= submit_button("Update Options")
+        %button.button.change.mt-4{type: :submit} Update Options