diff --git a/app/assets/stylesheets/merged.tailwind.css b/app/assets/stylesheets/merged.tailwind.css index 8c7592a..2e1e6db 100644 --- a/app/assets/stylesheets/merged.tailwind.css +++ b/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; diff --git a/app/assets/stylesheets/merged/merged.css b/app/assets/stylesheets/merged/merged.css index 6d28414..14fec61 100644 --- a/app/assets/stylesheets/merged/merged.css +++ b/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)); diff --git a/app/helpers/merged/merged_helper.rb b/app/helpers/merged/merged_helper.rb index 8dc74f1..c2ef1da 100644 --- a/app/helpers/merged/merged_helper.rb +++ b/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 diff --git a/app/views/layouts/merged/_header.haml b/app/views/layouts/merged/_header.haml index 5b1f76f..3fba22a 100644 --- a/app/views/layouts/merged/_header.haml +++ b/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"} diff --git a/app/views/merged/cards/index.haml b/app/views/merged/cards/index.haml index 17d9ea2..be84748 100644 --- a/app/views/merged/cards/index.haml +++ b/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 diff --git a/app/views/merged/images/_editor.haml b/app/views/merged/images/_editor.haml index 42bea6d..6063ee6 100644 --- a/app/views/merged/images/_editor.haml +++ b/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 diff --git a/app/views/merged/images/index.haml b/app/views/merged/images/index.haml index 8e1d099..4c15bfd 100644 --- a/app/views/merged/images/index.haml +++ b/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 diff --git a/app/views/merged/images/show.haml b/app/views/merged/images/show.haml index 6c43ff1..4e1d3fd 100644 --- a/app/views/merged/images/show.haml +++ b/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 diff --git a/app/views/merged/sections/index.haml b/app/views/merged/sections/index.haml index 144834f..4d869f5 100644 --- a/app/views/merged/sections/index.haml +++ b/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}"}