Replace adhoc docs "Notes" with admonition blocks (#4287)

See https://ex-doc.hexdocs.pm/readme.html#admonition-blocks.

Author: rhcarvalho

guides/server/security-model.md

@@ -290,7 +290,8 @@ the topic:
 
     MyAppWeb.Endpoint.broadcast("users_socket:#{user.id}", "disconnect", %{})
 
-> Note: If you use `mix phx.gen.auth` to generate your authentication system,
+> ### Note {: .info}
+> If you used `mix phx.gen.auth` to generate your authentication system,
 > lines to that effect are already present in the generated code. The generated
 > code uses a `user_token` instead of referring to the `user_id`.
 

lib/phoenix_component.ex

@@ -2617,8 +2617,9 @@ defmodule Phoenix.Component do
 
   Here we see the `:sort_param` and `:drop_param` options in action.
 
-  > Note: `on_replace: :delete` on the `has_many` and `embeds_many` is required
-  > when using these options.
+  > ### Note {: .info}
+  > When using these options, `on_replace: :delete` on the `has_many` and
+  > `embeds_many` is required.
 
   When Ecto sees the specified sort or drop parameter from the form, it will sort
   the children based on the order they appear in the form, add new children it hasn't

lib/phoenix_live_view.ex

@@ -1604,7 +1604,8 @@ defmodule Phoenix.LiveView do
   @doc """
   Attaches the given `fun` by `name` for the lifecycle `stage` into `socket`.
 
-  > Note: This function is for server-side lifecycle callbacks.
+  > ### Note {: .info}
+  > This function is for server-side lifecycle callbacks.
   > For client-side hooks, see the
   > [JS Interop guide](js-interop.md#client-hooks-via-phx-hook).
 
@@ -1615,8 +1616,9 @@ defmodule Phoenix.LiveView do
   lifecycle stages: `:handle_params`, `:handle_event`, `:handle_info`, `:handle_async`, and
   `:after_render`. To attach a hook to the `:mount` stage, use `on_mount/1`.
 
-  > Note: only `:after_render`, `:handle_event` and `:handle_async` hooks are currently supported in
-  > LiveComponents.
+  > ### LiveComponents support {: .warning}
+  > In LiveComponents, only `:after_render`, `:handle_event` and `:handle_async`
+  > hooks are currently supported.
 
   ## Return Values
 
@@ -1785,7 +1787,8 @@ defmodule Phoenix.LiveView do
   @doc """
   Detaches a hook with the given `name` from the lifecycle `stage`.
 
-  > Note: This function is for server-side lifecycle callbacks.
+  > ### Note {: .info}
+  > This function is for server-side lifecycle callbacks.
   > For client-side hooks, see the
   > [JS Interop guide](js-interop.md#client-hooks-via-phx-hook).
 

lib/phoenix_live_view/js.ex

@@ -932,8 +932,8 @@ defmodule Phoenix.LiveView.JS do
   > <.button phx-click={JS.dispatch("input:clear", to: "#my_input")}>...</.button>
   > ```
   >
-  > Note: this uses `Phoenix.LiveView.ColocatedJS`, but you can also define the event listener directly inside
-  > your `app.js` instead.
+  > While the example above uses `Phoenix.LiveView.ColocatedJS`, you can also
+  > define the event listener directly inside your `app.js` instead.
   """
   def set_attribute({attr, val}), do: set_attribute(%JS{}, {attr, val}, [])