style(portal): Update portal UI polish/consistency (#4367)

Why:

* This commit was not intended to be a sweeping UI change, but rather a
quick pass over the portal to make sure things were consistent and also
to update small UI elements that were discussed offline.

elixir/apps/web/lib/web/components/core_components.ex

@@ -226,7 +226,7 @@ defmodule Web.CoreComponents do
           </div>
         </div>
       </div>
-      <p :for={help <- @help} class="pt-3">
+      <p :for={help <- @help} class="font-light pt-3 text-neutral-500">
         <%= render_slot(help) %>
       </p>
     </div>
@@ -714,7 +714,11 @@ defmodule Web.CoreComponents do
     assigns = assign_new(assigns, :relative_to, fn -> DateTime.utc_now() end)
 
     ~H"""
-    <span :if={not is_nil(@datetime)} title={@datetime}>
+    <span
+      :if={not is_nil(@datetime)}
+      class="underline underline-offset-2 decoration-dotted"
+      title={@datetime}
+    >
       <%= Cldr.DateTime.Relative.to_string!(@datetime, Web.CLDR, relative_to: @relative_to) %>
     </span>
     <span :if={is_nil(@datetime)}>
@@ -737,7 +741,7 @@ defmodule Web.CoreComponents do
       title={
         if @schema.last_seen_at,
           do:
-            "Last seen #{Cldr.DateTime.Relative.to_string!(@schema.last_seen_at, Web.CLDR, relative_to: @relative_to)}",
+            "Last connected #{Cldr.DateTime.Relative.to_string!(@schema.last_seen_at, Web.CLDR, relative_to: @relative_to)}",
           else: "Never connected"
       }
     >

elixir/apps/web/lib/web/live/actors/index.ex

@@ -54,7 +54,7 @@ defmodule Web.Actors.Index do
         </.add_button>
       </:action>
       <:help>
-        Actors are the people and services that can access your resources.
+        Actors are the people and services that can access your Resources.
       </:help>
       <:content>
         <.flash_group flash={@flash} />

elixir/apps/web/lib/web/live/clients/index.ex

@@ -47,6 +47,9 @@ defmodule Web.Clients.Index do
       <:title>
         Clients
       </:title>
+      <:help>
+        Clients are end-user devices and servers that access your protected Resources.
+      </:help>
       <:content>
         <.flash_group flash={@flash} />
         <.live_table

elixir/apps/web/lib/web/live/clients/show.ex

@@ -133,13 +133,13 @@ defmodule Web.Clients.Show do
             </:value>
           </.vertical_table_row>
           <.vertical_table_row>
-            <:label>Last Seen</:label>
+            <:label>Last Connected</:label>
             <:value>
               <.relative_datetime datetime={@client.last_seen_at} />
             </:value>
           </.vertical_table_row>
           <.vertical_table_row>
-            <:label>Last Seen Remote IP</:label>
+            <:label>Last Remote IP</:label>
             <:value>
               <.last_seen schema={@client} />
             </:value>

elixir/apps/web/lib/web/live/gateways/show.ex

@@ -66,14 +66,14 @@ defmodule Web.Gateways.Show do
           </.vertical_table_row>
           <.vertical_table_row>
             <:label>
-              Last seen
+              Last Connected
             </:label>
             <:value>
               <.relative_datetime datetime={@gateway.last_seen_at} />
             </:value>
           </.vertical_table_row>
           <.vertical_table_row>
-            <:label>Last Seen Remote IP</:label>
+            <:label>Last Remote IP</:label>
             <:value>
               <.last_seen schema={@gateway} />
             </:value>

elixir/apps/web/lib/web/live/groups/index.ex

@@ -52,6 +52,9 @@ defmodule Web.Groups.Index do
           Add Group
         </.add_button>
       </:action>
+      <:help>
+        Groups organize Actors and form the basis of the Firezone access control model.
+      </:help>
       <:content>
         <.flash_group flash={@flash} />
         <.live_table
@@ -95,8 +98,8 @@ defmodule Web.Groups.Index do
               </:tail>
             </.peek>
           </:col>
-          <:col :let={group} field={{:groups, :inserted_at}} label="SOURCE">
-            <.created_by account={@account} schema={group} />
+          <:col :let={group} field={{:groups, :inserted_at}} label="Created">
+            <.relative_datetime datetime={group.inserted_at} />
           </:col>
           <:empty>
             <div class="flex justify-center text-center text-neutral-500 p-4">

elixir/apps/web/lib/web/live/policies/index.ex

@@ -50,6 +50,9 @@ defmodule Web.Policies.Index do
           Add Policy
         </.add_button>
       </:action>
+      <:help>
+        Policies grant access to Resources.
+      </:help>
       <:content>
         <.flash_group flash={@flash} />
         <.live_table

elixir/apps/web/lib/web/live/relays/show.ex

@@ -83,7 +83,7 @@ defmodule Web.Relays.Show do
             </.vertical_table_row>
             <.vertical_table_row>
               <:label>
-                Last seen
+                Last Connected
               </:label>
               <:value>
                 <.relative_datetime datetime={@relay.last_seen_at} />

elixir/apps/web/lib/web/live/resources/index.ex

@@ -54,8 +54,8 @@ defmodule Web.Resources.Index do
         Resources
       </:title>
       <:help>
-        Resources define the subnets, hosts, and applications for which you want to manage access. You can manage resources per site
-        in the <.link navigate={~p"/#{@account}/sites"} class={link_style()}>sites</.link> section.
+        Resources define the subnets, hosts, and applications for which you want to manage access. You can manage Resources per Site
+        in the <.link navigate={~p"/#{@account}/sites"} class={link_style()}>Sites</.link> section.
       </:help>
       <:action>
         <.add_button
@@ -100,12 +100,12 @@ defmodule Web.Resources.Index do
           <:col :let={resource} label="Authorized groups">
             <.peek peek={Map.fetch!(@resource_actor_groups_peek, resource.id)}>
               <:empty>
-                None,
+                None -
                 <.link
                   class={["px-1", link_style()]}
                   navigate={~p"/#{@account}/policies/new?resource_id=#{resource}"}
                 >
-                  create a Policy
+                  Create a Policy
                 </.link>
                 to grant access.
               </:empty>

elixir/apps/web/lib/web/live/settings/dns.ex

@@ -33,20 +33,18 @@ defmodule Web.Settings.DNS do
       <:title>
         DNS
       </:title>
+      <:help>
+        Configure the default resolver used by connected Clients in your Firezone account.
+        Queries for defined Resources will <strong>always</strong>
+        use Firezone's internal DNS.
+        All other queries will use the resolver below if configured.
+        If no resolver is configured, the client's default system resolver will be used.
+        <.website_link href="/kb/deploy/dns">
+          Read more about configuring DNS in Firezone.
+        </.website_link>
+      </:help>
       <:content>
-        <p class="ml-4 mb-4 text-neutral-600">
-          Configure the default resolver used by connected Clients in your Firezone account. Queries for
-          defined Resources will <strong>always</strong>
-          use Firezone's internal DNS. All other queries will
-          use the resolver below if configured. If no resolver is configured, the client's default system
-          resolver will be used.
-        </p>
-        <p class="ml-4 mb-4 text-neutral-600">
-          <.website_link href="/kb/deploy/dns">
-            Read more about configuring DNS in Firezone.
-          </.website_link>
-        </p>
-        <div class="max-w-2xl px-4 py-8 mx-auto lg:py-16">
+        <div class="max-w-2xl px-4 py-8 mx-auto">
           <.flash kind={:success} flash={@flash} phx-click="lv:clear-flash" />
           <h2 class="mb-4 text-xl text-neutral-900">Client DNS</h2>
           <p class="mb-4 text-neutral-500">

elixir/apps/web/lib/web/live/sites/index.ex

@@ -54,6 +54,11 @@ defmodule Web.Sites.Index do
           Add Site
         </.add_button>
       </:action>
+
+      <:help>
+        Sites represent a shared network environment that Gateways and Resources exist within.
+      </:help>
+
       <:content>
         <.flash_group flash={@flash} />
         <.live_table
@@ -112,7 +117,10 @@ defmodule Web.Sites.Index do
             peek = %{count: length(gateways), items: Enum.take(gateways, 5)} %>
             <.peek peek={peek}>
               <:empty>
-                None
+                <.icon
+                  name="hero-exclamation-triangle"
+                  class="inline-block w-5 h-5 mr-1 text-red-500"
+                /> None
               </:empty>
 
               <:separator>

elixir/apps/web/lib/web/live/sites/show.ex

@@ -220,17 +220,19 @@ defmodule Web.Sites.Show do
               </.link>
             </:col>
             <:col :let={resource} label="ADDRESS" field={{:resources, :address}}>
-              <%= resource.address %>
+              <code class="block text-xs">
+                <%= resource.address %>
+              </code>
             </:col>
             <:col :let={resource} label="Authorized groups">
               <.peek peek={Map.fetch!(@resource_actor_groups_peek, resource.id)}>
                 <:empty>
-                  None,
+                  None -
                   <.link
                     class={["px-1", link_style()]}
                     navigate={~p"/#{@account}/policies/new?resource_id=#{resource}&site_id=#{@group}"}
                   >
-                    create a Policy
+                    Create a Policy
                   </.link>
                   to grant access.
                 </:empty>

elixir/apps/web/test/web/live/clients/show_test.exs

@@ -91,8 +91,8 @@ defmodule Web.Live.Clients.ShowTest do
     assert table["owner"] =~ actor.name
     assert table["status"] =~ "Offline"
     assert table["created"]
-    assert table["last seen"]
-    assert table["last seen remote ip"] =~ to_string(client.last_seen_remote_ip)
+    assert table["last connected"]
+    assert table["last remote ip"] =~ to_string(client.last_seen_remote_ip)
     assert table["client version"] =~ client.last_seen_version
     assert table["user agent"] =~ client.last_seen_user_agent
   end

elixir/apps/web/test/web/live/gateways/show_test.exs

@@ -89,8 +89,8 @@ defmodule Web.Live.Gateways.ShowTest do
 
     assert table["site"] =~ gateway.group.name
     assert table["name"] =~ gateway.name
-    assert table["last seen"]
-    assert table["last seen remote ip"] =~ to_string(gateway.last_seen_remote_ip)
+    assert table["last connected"]
+    assert table["last remote ip"] =~ to_string(gateway.last_seen_remote_ip)
     assert table["status"] =~ "Offline"
     assert table["user agent"] =~ gateway.last_seen_user_agent
     assert table["version"] =~ gateway.last_seen_version

elixir/apps/web/test/web/live/groups/index_test.exs

@@ -117,16 +117,12 @@ defmodule Web.Live.Groups.IndexTest do
     |> render()
     |> table_to_map()
     |> with_table_row("name", empty_group.name, fn row ->
-      empty_group = Repo.preload(empty_group, created_by_identity: :actor)
-
       assert row["actors"] == "None"
-      assert row["source"] =~ "by #{empty_group.created_by_identity.actor.name}"
+      assert around_now?(row["created"])
     end)
     |> with_table_row("name", group_with_few_preloads.name, fn row ->
-      group_with_few_preloads = Repo.preload(group_with_few_preloads, created_by_identity: :actor)
-
       assert row["actors"] == actor.name
-      assert row["source"] =~ "by #{group_with_few_preloads.created_by_identity.actor.name}"
+      assert around_now?(row["created"])
     end)
     |> with_table_row("name", group_with_lots_of_preloads.name, fn row ->
       [peeked_names, tail] = String.split(row["actors"], " and ", trim: true)
@@ -137,7 +133,7 @@ defmodule Web.Live.Groups.IndexTest do
 
       assert tail == "7 more."
 
-      assert around_now?(row["source"])
+      assert around_now?(row["created"])
     end)
   end
 end

elixir/apps/web/test/web/live/relays/show_test.exs

@@ -88,7 +88,7 @@ defmodule Web.Live.Relays.ShowTest do
       |> vertical_table_to_map()
 
     assert table["instance group name"] =~ relay.group.name
-    assert table["last seen"]
+    assert table["last connected"]
     assert table["remote ip"] =~ to_string(relay.last_seen_remote_ip)
     assert table["ipv4 set by public_ip4_addr"] =~ to_string(relay.ipv4)
     assert table["ipv6 set by public_ip6_addr"] =~ to_string(relay.ipv6)

elixir/apps/web/test/web/live/resources/index_test.exs

@@ -96,7 +96,7 @@ defmodule Web.Live.Resources.IndexTest do
       assert row["name"] =~ resource.name
       assert row["address"] =~ resource.address
       assert row["sites"] =~ group.name
-      assert row["authorized groups"] == "None, create a Policy to grant access."
+      assert row["authorized groups"] == "None - Create a Policy to grant access."
     end)
   end
 

elixir/apps/web/test/web/live/sites/show_test.exs

@@ -212,7 +212,7 @@ defmodule Web.Live.Sites.ShowTest do
     Enum.each(resource_rows, fn row ->
       assert row["name"] =~ resource.name
       assert row["address"] =~ resource.address
-      assert row["authorized groups"] == "None, create a Policy to grant access."
+      assert row["authorized groups"] == "None - Create a Policy to grant access."
     end)
   end