button and margin consitency

app/helpers/merged/merged_helper.rb

@@ -44,11 +44,8 @@ module Merged
     def blue_button( text, url)
       button( text , url , "bg-cyan-200" )
     end
-    def yellow_button( text, url)
-      button( text , url , "bg-yellow-200" )
-    end
     def red_button( text, url)
-      button( text , url , "bg-red-200" )
+      button( text , url , "bg-red-300" )
     end
     def green_button( text, url)
       button( text , url , "bg-green-200" )
@@ -98,7 +95,7 @@ module Merged
     end
 
     def button_classes
-      "mr-3 inline-block rounded-lg px-4 py-3 text-md font-medium border border-gray-400"
+      "mr-3 inline-block rounded-lg px-3 py-2 text-md font-medium border border-gray-500"
     end
     # section should be hash with at least 'template' key
     def find_template(section)

app/helpers/merged/sections_helper.rb

@@ -2,13 +2,6 @@ module Merged
   module SectionsHelper
     include ViewHelper #for previews
 
-    def section_form(options)
-      url = section_url( @section.id)
-      form_tag( url , {method: :patch}) do
-        yield
-      end
-    end
-
     #image tag for the preview, passing options through
     def section_preview(section , options)
       image_tag("merged/section_preview/#{section.template}" , options)

app/views/merged/cards/index.haml

@@ -9,23 +9,22 @@
 = render( template , section: @section)
 
 - @section.cards.each_with_index do |card , index|
-  .flex.gap-8.px-20.py-6.mb-2{class: (card.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "card_#{card.id}"}
+  .flex.gap-10.px-20.pt-4.pb-2.mb-2.border.border-2.bg-neutral-50.border-slate-400{ id: "card_#{card.id}"}
-    .basis-80
+    .basis-60
       %h3.mt-4.text-lg.font-bold Card #{index + 1}:#{card.header}
       .flex.flex-wrap
         = blue_button( "Up" , merged.card_move_path(card.id , dir: :up) )
         = blue_button( "Down" , merged.card_move_path(card.id , dir: :down) )
-        = form_tag( merged.card_path(card.id) , {method: :delete  } ) do
-          =submit_button( "Delete" , true)
       .mt-6
-        = yellow_button("Change Image" , merged.images_path(card_id: card.id) )
         .basis-full.mt-3
           Updated at:
           = distance_of_time_in_words_to_now(card.updated_at)
         .basis-full.mb-3
           Updated by:
           = card.updated_by
-        = red_button("Remove image", merged.card_set_image_path( card.id  , image: "") )
+        .basis-full.mb-3
+        = form_tag( merged.card_path(card.id) , {method: :delete  } ) do
+          =submit_button( "Delete Card" , true)
 
     .basis-80
       = link_to(merged.images_path(card_id: card.id)) do
@@ -34,29 +33,29 @@
           .flex.align-center.justify-between.mb-4
             .text-lg.font-bold.mt-2.mx-2
               = card.image.size.to_s + "k"
-            %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
+            %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
               = card.image.aspect_ratio
-          = image_for( card )
+          = image_for( card , "mb-4")
+          = green_button("Change Image" , merged.images_path(card_id: card.id) )
+          = red_button("Remove image", merged.card_set_image_path( card.id  , image: "") )
         -else
-          %h3.mt-4.text-lg.font-bold No image
+          %h3.text-lg.font-bold No image
     .basis-72.grow
-      %h3.mt-4.text-lg.font-bold Fields
+      = form_tag( merged.card_path(card.id) , {method: :patch  , class: "mx-auto mb-0 max-w space-y-4" } ) do
-      = form_tag( merged.card_path(card.id) , {method: :patch  , class: "mx-auto mt-8 mb-0 max-w space-y-4" } ) do
         %label.block
           .text-lg.font-bold Header
           = text_field_tag( :header , card.header, class: "block w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
         %label.block
           .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" )
-        =submit_button( "Update")
+        =submit_button( "Update Texts")
 
     .basis-72.grow
-      .mt-4.text-lg.font-bold Options
+      = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mb-0 max-w space-y-4" }) do
-      = form_tag( merged.card_path(card.id) , {method: :patch , class: "mx-auto mt-8 mb-0 max-w space-y-4" }) do
         - card.option_definitions.each do |option|
           .grid.grid-cols-3
             =render "merged/sections/option_form_#{option.type}" , section: card , option: option
         -if card.option_definitions.empty?
           %p No options
         -else
-          = submit_button("Update")
+          = submit_button("Update Options")

app/views/merged/images/index.haml

@@ -2,7 +2,7 @@
   .text-xl.font-bold.text-gray-900
     = text_for_index
 
-  = link_to( "New Image" , merged.new_image_path(new_link_params) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100")
+  = link_to( "New Image" , merged.new_image_path(new_link_params) , class: button_classes + " bg-green-200")
 
 - if Rails.env.development?
   = javascript_include_tag "merged/vue.js"
@@ -34,7 +34,7 @@
       .flex.align-center.justify-between.mb-4
         .text-lg.font-bold.mt-2.mx-2
           {{image.name}}
-        %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
+        %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
           {{image.aspect_ratio}}
       %a.w-full.object-contain.h-72{":href" => "image.link" }
         %img{ ":src": "image.url" , ":alt": "image.name" }

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")
+      .mt-4= submit_button("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")
+        .mt-4= submit_button("Update Options")

app/views/merged/sections/index.haml

@@ -4,15 +4,15 @@
     = 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: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100")
+  = link_to( "New Section" , merged.new_page_section_path(@page.id) , class: button_classes + " bg-cyan-200")
 
 -@page.sections.each do |section |
-  .flex.gap-10.mt-2{class: (section.index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' , id: "section_#{section.id}"}
+  .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.mt-4.text-lg.font-bold Section #{section.index} : #{section.header}
+      %h3.text-lg.font-bold Section #{section.index} : #{section.header}
       .flex.flex-wrap
-        = yellow_button("Edit" , merged.section_path(section.id) )
+        = green_button("Edit" , merged.section_path(section.id) )
-        = green_button( "Copy" , merged.new_page_section_path(@page.id, template: section.template) )
+        = blue_button( "Copy" , merged.new_page_section_path(@page.id, template: section.template) )
         .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"}
@@ -40,34 +40,35 @@
           =submit_button( "Delete" , true)
 
     .basis-72
-      %h3.mt-4.text-lg.font-bold Style
+      .flow.flow-cols
-      = link_to(merged.section_select_template_path(section.id)) do
+        %h3.text-lg.font-bold.border-bottom-2 Style
-        %p= section.template_style.header
+        = link_to(merged.section_select_template_path(section.id)) do
-        = section_preview(section , class: "object-contain")
+          %p= section.template_style.header
+          = section_preview(section , class: "object-contain")
     .basis-52.grow
-      %h3.mt-4.text-lg.font-bold Header
+      %h3.my-4.text-lg.font-bold Header
       %p= section.header
       %h3.mt-4.text-lg.font-bold Text
       %p= section.text[0..100] + " ..." if section.text
     .basis-72
       - if section.has_cards?
-        %h3.mt-4.text-lg.font-bold #{section.cards.length} Cards
+        %h3.text-lg.font-bold #{section.cards.length} Cards
         =link_to merged.section_cards_path(section.id) do
           =card_preview(section , class: "object-contain")
       - else
         = link_to(merged.images_path(section_id: section.id)) do
           -if section.image
-            %h3.mt-4.text-lg.font-bold Image #{section.image.name}
+            %h3.text-lg.font-bold Image #{section.image.name}
             .flex.align-center.justify-between.mb-4
               .text-lg.font-bold.mt-2.mx-2
                 = section.image.size.to_s + "k"
-              %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
+              %strong.inline-block.rounded.bg-gray-200.px-3.py-1.text-md.font-medium
                 = section.image.aspect_ratio
-            = image_for( section , "h-40")
+            = image_for( section , "h-40 mb-1")
           -else
-            %h3.mt-4.text-lg.font-bold No Image
+            %h3.mt-y.text-lg.font-bold No Image
     .basis-96
-      %h3.mt-4.text-lg.font-bold Options
+      %h3.text-lg.font-bold Options
       .grid.grid-cols-2.gap-3.mx-10
         - section.options.each do|name , value|
           -unless value.blank?
@@ -76,7 +77,7 @@
 .grid.grid-cols-2.gap-2.m-8
   .relative.block
     %p
-      = green_button( "New Section" , merged.new_page_section_path(@page.id) )
+      = blue_button( "New Section" , merged.new_page_section_path(@page.id) )
   .relative.block.delete_page
     %p
       = form_tag( merged.page_path(@page.id) , {method: :delete  } ) do

app/views/merged/sections/show.haml

@@ -1,16 +1,16 @@
 .mx-20.flex.h-16.items-center.gap-16
   = render "sections_pagination" , section: @section
-  = link_to( "New Section" , merged.new_page_section_path(@section.page.id) , class: "p-2 border border-gray-200 bg-cyan-100 font-bold rounded-lg hover:bg-sky-100")
+  = link_to( "New Section" , merged.new_page_section_path(@section.page.id) , class: button_classes + " bg-cyan-100")
 
 - template = find_template(@section)
 = render( template , section: @section)
 
-.flex.gap-8.my-10.flex-wrap
+.flex.gap-8.my-10.flex-wrap.mx-20
-  .basis-80.ml-20
+  .basis-80
-    %h3.mt-4.text-lg.font-bold= @section.template_style.header
+    %h3.text-lg.font-bold= @section.template_style.header
     = section_preview(@section , class: "w-full object-contain my-4")
-    = yellow_button( "Change Style" , merged.section_select_template_path(@section.id))
+    = green_button( "Change Style" , merged.section_select_template_path(@section.id))
-    = green_button( "New Section" , merged.new_page_section_path(@section.page.id , template: @section.template) )
+    = blue_button( "New Section" , merged.new_page_section_path(@section.page.id , template: @section.template) )
     .basis-full.mt-3
       Updated at:
       = distance_of_time_in_words_to_now(@section.updated_at)
@@ -21,28 +21,28 @@
   .basis-80.image
     = link_to(merged.images_path(section_id: @section.id)) do
       -if @section.image
-        %h3.mt-4.text-lg.font-bold Image #{@section.image.name}
+        %h3.text-lg.font-bold Image #{@section.image.name}
         .flex.align-center.justify-between.mb-4
           .text-lg.font-bold.mt-2.mx-2
             = @section.image.size.to_s + "k"
-          %strong.inline-block.rounded.bg-yellow-200.px-3.py-1.text-md.font-medium
+          %strong.inline-block.rounded.bg-slate-200.px-3.py-1.text-md.font-medium
             = @section.image.aspect_ratio
         = image_for( @section )
       -else
-        %h3.mt-4.text-lg.font-bold No Image
+        %h3.text-lg.font-bold No Image
     .flex
-      .mt-3= yellow_button("Change Image", merged.images_path(section_id: @section.id))
+      .mt-3= green_button("Change Image", merged.images_path(section_id: @section.id))
       .mt-3= red_button( "Remove image", merged.section_set_image_path( @section.id  , image: "")) if( @section.image )
 
   .basis-80.grow.content_update
-    = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
+    = form_tag( merged.section_path( @section.id) , method: :patch , class: "mx-auto mb-2 max-w space-y-4") do
       %label.block
         %h4.text-lg.font-bold Header
         = text_field_tag( :header , @section.header, class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
       %label.block
         %h4.mt-4.text-lg.font-bold Text
         = text_area_tag( :text , @section.text, rows: rows(@section) ,class: "w-full rounded-lg border-gray-200 p-4 pr-12 text-sm shadow-sm")
-      .mt-4= submit_button("Update")
+      .mt-4= submit_button("Update Texts")
 
   - if( @section.has_cards? )
     .basis-full.h-0
@@ -50,24 +50,23 @@
       .mx-3.text-lg.font-bold Card Style #{@section.card_template}
       =card_preview(@section , class: "my-3")
       %p.py-3
-        =yellow_button("Change Card Style", merged.section_select_card_template_path(@section.id))
+        =green_button("Change Card Style", merged.section_select_card_template_path(@section.id))
 
     .basis-96.grow
-      %h3.mt-4.text-lg.font-bold #{@section.cards.length} Cards
+      %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
-        = yellow_button( "View and Edit Cards" , merged.section_cards_path(@section.id))
+        = green_button( "View and Edit Cards" , merged.section_cards_path(@section.id))
-        = green_button( "New Card" , merged.new_section_card_path(@section.id) )
+        = blue_button( "New Card" , merged.new_section_card_path(@section.id) )
 
-  .basis-80.grow.mr-20
+  .basis-80.grow
-    %h3.mt-4.text-lg.font-bold Options
+    = form_tag( merged.section_path( @section.id) , method: :patch , class: "mx-auto mb-0 max-w space-y-4") do
-    = section_form( class: "mx-auto mt-8 mb-0 max-w space-y-4") do
       - @section.option_definitions.each do |option|
         .grid.grid-cols-3
           =render "option_form_#{option.type}" , section: @section , option: option
       -if @section.option_definitions.empty?
         %p No options
       -else
-        .mt-4= submit_button("Update")
+        .mt-4= submit_button("Update Options")

lib/merged/engine.rb

@@ -9,7 +9,8 @@ module Merged
   class Engine < ::Rails::Engine
     isolate_namespace Merged
     initializer "merged.assets.precompile" do |app|
-      app.config.assets.precompile += %w( merged/merged.css merged/vue.js merged/vue.min.js merged/merged_logo)
+      app.config.assets.precompile += %w( merged/merged.css merged/vue.js merged/vue.min.js
+                        merged/home merged/merged_logo)
       add_image_assets(app.config , "section_preview")
       add_image_assets(app.config , "card_preview")
     end