diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index 664aa7941..80bde798a 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -29,6 +29,7 @@ } .reactions__trigger { + --btn-border-color: var(--color-ink-lightest); background-color: var(--color-ink-lightest); &:not(:hover) { @@ -38,10 +39,23 @@ } } + .reactions__trigger { + --btn-border-color: var(--reaction-border-color); + + img { + block-size: 65%; + inline-size: 65%; + } + } + .reactions__list { display: inline-flex; flex-wrap: wrap; gap: var(--inline-space-half); + + &:not(:has(.reaction)) { + display: none; + } } /* Single reaction diff --git a/app/views/cards/comments/reactions/_reactions.html.erb b/app/views/cards/comments/reactions/_reactions.html.erb index bf3ff746a..6de217842 100644 --- a/app/views/cards/comments/reactions/_reactions.html.erb +++ b/app/views/cards/comments/reactions/_reactions.html.erb @@ -6,7 +6,7 @@ <%= turbo_frame_tag comment, :new_reaction do %> <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button", - class: "reactions__trigger btn btn--circle borderless", action: "soft-keyboard#open", + class: "reactions__trigger btn btn--circle", action: "soft-keyboard#open", data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close" } do %> <%= image_tag "boost-color.svg", aria: { hidden: true } %> Add your own reaction