Customizing the "scary red flash" (reconnecting flash) at the client

Phoenix Forum Questions / Help
1

Wondering if anyone has looked into customizing the “scary red flash” customers periodically get on their device/client side – the one that pops up whenever there’s a disconnect, with a “reconnecting ↺” animation.

While informative and harmless, it’s also bright red and scary to some users.

I’d be happy to turn it say, pale blue (for “info” versus “danger! danger!”), although ideally I’d also change the wording in this particular flash to make it a little bit less scary sounding.

Hints, tips, pointers appreciated if anyone has gone down this path…

2

Maybe I’m misunderstanding your question.

That’s just regular code in your core_components.ex file:

      <.flash
        id="client-error"
        kind={:error}
        title={gettext("We can't find the internet")}
        phx-disconnected={show(".phx-client-error #client-error")}
        phx-connected={hide("#client-error")}
        hidden
      >
        <%= gettext("Attempting to reconnect") %>
        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
      </.flash>

You can put in there whatever you like.

1 Like