From a13e691e442865f85dae07221d55ff98c60967f4 Mon Sep 17 00:00:00 2001
From: Jean Carlos <jeaanca.santos@gmail.com>
Date: Sun, 10 Oct 2021 07:15:15 -0300
Subject: [PATCH] Improvement users connected display (#591)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Improve users connected display

* Update lib/livebook_web/live/session_live.ex

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

* Update lib/livebook_web/live/session_live.ex

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

* Adjust elements

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>
---
 lib/livebook_web/live/session_live.ex | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/lib/livebook_web/live/session_live.ex b/lib/livebook_web/live/session_live.ex
index d305c443f..c134e0643 100644
--- a/lib/livebook_web/live/session_live.ex
+++ b/lib/livebook_web/live/session_live.ex
@@ -142,12 +142,15 @@ defmodule LivebookWeb.SessionLive do
         </div>
         <div data-element="clients-list">
           <div class="flex-grow flex flex-col">
-            <h3 class="font-semibold text-gray-800 text-lg">
-              Users
-            </h3>
-            <h4 class="font text-gray-500 text-sm my-1">
-              <%= length(@data_view.clients) %> connected
-            </h4>
+            <div class="flex space-x-4 items-center justify-between">
+              <h3 class="font-semibold text-gray-800 text-lg flex-lg">
+                Users
+              </h3>
+              <span class="flex items-center space-x-2 bg-gray-200 p-2 rounded-lg text-sm">
+                <span class="bg-green-600 inline-flex rounded-full h-3 w-3"></span>
+                <span><%= length(@data_view.clients) %> connected</span>
+              </span>
+            </div>
             <div class="mt-4 flex flex-col space-y-4">
               <%= for {client_pid, user} <- @data_view.clients do %>
                 <div class="flex items-center justify-between space-x-2"