submit button and unifed usage colors

app/controllers/merged/view_controller.rb

@@ -1,5 +1,6 @@
 module Merged
   class ViewController < ::ApplicationController
+    include MergedHelper
 
     def view
       @page = Page.find(params[:id])

app/helpers/merged/merged_helper.rb

@@ -12,15 +12,22 @@ module Merged
     def green_button( text, url)
       button( text , url , "bg-green-500" )
     end
-
+    def submit_button(text)
+      clazz = "bg-blue-500  " + button_classes
+      content_tag(:button , class: clazz , type: :submit) do
+        text
+      end
+    end
 
     def button(text , url , color)
-      claz = color + " ml-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white"
       link_to(url) do
-        content_tag(:button , class: claz ) do
+        content_tag(:button , class: color + " " + button_classes ) do
           text
         end
       end
     end
+    def button_classes
+      "ml-3 inline-block rounded-lg px-4 py-3 text-md font-medium text-white"
+    end
   end
 end

app/helpers/merged/view_helper.rb

@@ -1,5 +1,6 @@
 module Merged
   module ViewHelper
+    include MergedHelper
     # section should be hash with at least 'template' key
     def find_template(section)
       "merged/view/" + section.template

app/views/merged/cards/index.haml

@@ -18,13 +18,13 @@
     .relative.block.border.border-gray-100
       .p-4
         %h3.mt-4.text-lg.font-bold Card #{index + 1}
-        = yellow_button( "Up" , card_move_url(card.id , dir: :up) )
+        = blue_button( "Up" , card_move_url(card.id , dir: :up) )
-        = yellow_button( "Down" , card_move_url(card.id , dir: :down) )
+        = blue_button( "Down" , card_move_url(card.id , dir: :down) )
         = green_button( "New" , "/index" )
         = red_button("Delete" , "/index")
       .p-4
         %h3.mt-4.text-lg.font-bold Image
-        = blue_button("Change Image" , card_select_image_url(card.id) )
+        = yellow_button("Change Image" , card_select_image_url(card.id) )
         = red_button("Remove image", card_set_image_path( card.id  , image: "") )
 
 
@@ -42,8 +42,7 @@
         %label.block
           %h4.mt-4.text-lg.font-bold Text
           = text_area_tag( :text , card.text, rows: 5 , class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm" )
-        %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white{:type => "submit"}
+        =submit_button( "Update")
-          Update
 
     .relative.block.border.border-gray-100
       %h3.mt-4.text-lg.font-bold Options

app/views/merged/sections/index.html.haml

@@ -10,9 +10,9 @@
   .grid.grid-cols-5.gap-2.m-8{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' }
     .relative.block.border.border-gray-100.p-4
       %h3.mt-4.text-lg.font-bold Section #{section.index + 1}
-      = yellow_button( "Up" , section_move_url(section.id , dir: :up) )
+      = blue_button( "Up" , section_move_url(section.id , dir: :up) )
-      = yellow_button( "Down" , section_move_url(section.id , dir: :down) )
+      = blue_button( "Down" , section_move_url(section.id , dir: :down) )
-      = blue_button("Edit" , section_path(section.id) )
+      = yellow_button("Edit" , section_path(section.id) )
       = green_button( "New" , "/index" )
       = red_button(  "Delete" , "/index" )
     .relative.block.border.border-gray-100.p-4

app/views/merged/sections/show.html.haml

@@ -16,7 +16,7 @@
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Template  #{@section.template}
     = section_preview(@section , class: "w-full object-contain p-3")
-    = blue_button( "Change Template" , section_select_template_url(@section.id))
+    = yellow_button( "Change Template" , section_select_template_url(@section.id))
 
   .relative.block.border.border-gray-100
     = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
@@ -26,8 +26,7 @@
       %label.block
         %h4.mt-4.text-lg.font-bold Text
         = text_area_tag( :text , @section.text, rows: 5 ,class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-      %button.ml-3.inline-block.rounded-lg.bg-blue-500.px-5.py-3.text-sm.font-medium.text-white{:type => "submit"}
+      = submit_button("Update")
-        Update
 
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Image
@@ -52,7 +51,7 @@
         .mt-4.text-md.font-bold= card.header
         .text-sm "#{card.text[0..70]} ....."
       %p.p-3
-        = blue_button( "View and Edit Cards" , section_cards_url(@section.id))
+        = yellow_button( "View and Edit Cards" , section_cards_url(@section.id))
   .relative.block.border.border-gray-100
     %h3.mt-4.text-lg.font-bold Options
     To be done

app/views/merged/view/elements/_button.haml

@@ -1,2 +1 @@
-%a.inline-block.rounded.bg-emerald-600.px-12.py-3.text-sm.font-medium.text-white.transition.hover:bg-emerald-700.focus:outline-none.focus:ring.focus:ring-yellow-400{:href => section.button_link}
+= blue_button( section.button_text , section.button_link)
-  =section.button_text