Update UI

[SimonLab]

• "People in chat" doesn't display the names display names on refresh. Make sure Presence is working properly
  

• Centre horizontally the chat

• Make the times more readable human friendly, ex: "12mn ago"

• Better display the errors linked to the inputs:
  

• Add white space top, left and right for the header section to make a bit less sticky to the screen

• Center "login" and profile image; Make profile image round? Capitalise "login"
  

• Remove login button at the button of the page as it already exists on the header

• Add white space for footer

• Use textarea instead of input for message value

• Focus message input when the page load

[SimonLab]

The presence information is not "liveview" updated because the code is in the root layout:

phoenix-liveview-chat-example/lib/liveview_chat_web/templates/layout/root.html.heex

Lines 18 to 27 in f481219

	<div class="text-white width-[10%] float-left ml-3 -mt-5 align-middle">
	<b>People in Chat:</b>
	<ul>
	<%= for name <- @presence do %>
	<li>
	<%= name %>
	</li>
	<% end %>
	</ul>
	</div>

And from https://hexdocs.pm/phoenix_live_view/live-layouts.html

The "root" layout is rendered only on the initial

We need to review how the liveview layout are defined with Phoenix 1.7 and we might need to move this html code in another layout which can display liveview values