1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-21 22:29:38 +02:00
Maybe/app/views/shared/_notification.html.erb
Zach Gollwitzer c3248cd796
Some checks failed
Publish Docker image / ci (push) Has been cancelled
Publish Docker image / Build docker image (push) Has been cancelled
Improve account transaction, trade, and valuation editing and sync experience (#1506)
* Consolidate entry controller logic

* Transaction builder

* Update trades controller to use new params

* Load account charts in turbo frames, fix PG overflow

* Consolidate tests

* Tests passing

* Remove unused code

* Add client side trade form validations
2024-11-27 16:01:50 -05:00

42 lines
2.1 KiB
Text

<%# locals: (message:, type: "notice", **_opts) %>
<% type = type.to_sym %>
<% action = "animationend->element-removal#remove" if type == :notice %>
<%= tag.div class: "flex gap-3 rounded-lg border bg-white p-4 group max-w-80 shadow-xs border-alpha-black-25",
data: {
controller: "element-removal",
action: action
} do %>
<div class="h-5 w-5 shrink-0 p-px text-white">
<% case type %>
<% when :notice %>
<div class="flex h-full items-center justify-center rounded-full bg-success">
<%= lucide_icon "check", class: "w-3 h-3" %>
</div>
<% when :alert %>
<div class="flex h-full items-center justify-center rounded-full bg-error">
<%= lucide_icon "x", class: "w-3 h-3" %>
</div>
<% end %>
</div>
<%= tag.p message, class: "text-gray-900 text-sm font-medium" %>
<div class="ml-auto">
<% if type.to_sym == :notice %>
<div class="h-5 shrink-0">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
<path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
<circle class="origin-center -rotate-90 animate-[stroke-fill_2.2s_300ms_forwards]" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
</svg>
<div class="absolute -top-2 -right-2">
<%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-gray-400 cursor-pointer", data: { action: "click->element-removal#remove" } %>
</div>
</div>
<% elsif type.to_sym == :alert %>
<%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-gray-500 hover:text-gray-600 cursor-pointer" %>
<% end %>
</div>
<% end %>