Rework settings UI (#4626)

* Update generic components library

* Import generic components via `PlausibleWeb`

* Update Settings/Danger Zone

* Update new shared link template and convert to heex

* Update site settings layout

* Update site settings sidebar tab layout

* Update Settings/Email Reports

* Update Funnels

* Update ComboBox

* Extend/update form components

* Update Modal live component

* Update Settings/Goals

* Update Shields

* Update Settings/Props

* Update Settings/Import & Export

* Update flow progress

* Import Routes in settings

* Update Billing components

* Update Billing notice component

* Update feature toggle component

* Update 2fa component

* Update verification markup

* Update installation

* Update Settings/Integrations/Plugins

* Update domain change markup

* Update Settings/General

* Update Settings/Integrations

* Update Settings/People

* Update Settings/Integrations/GSC

* Update Settings/Visiblity

* ukuwip

* ukuwip

* Tables & paddings

* Imports exports

* Brighten disabled input text color for dark mode

* Tune down table border/divider in dark mode

* Format

* Fix goal list on mobile

* Fix IP Shields table on mobile

* Fix country shields list on mobile

* Fix country shield list on mobile

* Fix page shields list on mobile

* Fix import/export settings on mobile

* Fix combobox dropdown background in dark mode

* Fix filter bar search input on mobile

* Revert @ukutaht's changes to goal list

* Maybe maybe maybe

* Revert the current prod goal list + fix mobile issues

* Format

* Revert tests change

cc @ukutaht

* Fix markup expectation in a test

* Set autocomplete="off" again

* Bring back `text-sm` where previously removed

---------

Co-authored-by: Uku Taht <[email protected]>

extra/lib/plausible_web/live/funnel_settings/form.ex

@@ -59,27 +59,23 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
             onkeydown="return event.key != 'Enter';"
             class="bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8"
           >
-            <h2 class="text-xl font-black dark:text-gray-100 mb-6">
+            <.title class="mb-6">
               <%= if @funnel, do: "Edit", else: "Add" %> Funnel
-            </h2>
-
-            <label for={f[:name].name} class="block mb-3 font-medium dark:text-gray-100">
-              Funnel Name
-            </label>
+            </.title>
 
             <.input
               field={f[:name]}
               phx-debounce={200}
               autocomplete="off"
               placeholder="e.g. From Blog to Purchase"
               autofocus
-              class="w-full focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-900 dark:text-gray-300 block w-7/12 rounded-md sm:text-sm border-gray-300 dark:border-gray-500 w-full p-2 mt-2"
+              label="Funnel Name"
             />
 
             <div id="steps-builder" class="mt-6">
-              <label class="font-medium dark:text-gray-100">
+              <.label>
                 Funnel Steps
-              </label>
+              </.label>
 
               <div :for={step_idx <- @step_ids} class="flex mb-3 mt-3">
                 <div class="w-2/5 flex-1">
@@ -123,27 +119,21 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
                 <p id="funnel-eval" class="text-gray-500 dark:text-gray-400 text-sm mt-2 mb-2">
                   <%= if @evaluation_result do %>
                     Last month conversion rate: <strong><%= List.last(@evaluation_result.steps).conversion_rate %></strong>%
-                  <% else %>
-                    <span class="text-red-600 text-sm">
-                      Choose minimum <%= Funnel.min_steps() %> steps to evaluate funnel.
-                    </span>
                   <% end %>
                 </p>
               </div>
 
-              <div class="mt-6">
-                <PlausibleWeb.Components.Generic.button
-                  id="save"
-                  type="submit"
-                  class="w-full"
-                  disabled={
-                    has_steps_errors?(f) or map_size(@selections_made) < Funnel.min_steps() or
-                      length(@step_ids) > map_size(@selections_made)
-                  }
-                >
-                  <span><%= if @funnel, do: "Update", else: "Add" %> Funnel →</span>
-                </PlausibleWeb.Components.Generic.button>
-              </div>
+              <PlausibleWeb.Components.Generic.button
+                id="save"
+                type="submit"
+                class="w-full"
+                disabled={
+                  has_steps_errors?(f) or map_size(@selections_made) < Funnel.min_steps() or
+                    length(@step_ids) > map_size(@selections_made)
+                }
+              >
+                <span><%= if @funnel, do: "Update", else: "Add" %> Funnel</span>
+              </PlausibleWeb.Components.Generic.button>
             </div>
           </.form>
         </div>
@@ -200,7 +190,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
           class="border-dotted border-b border-gray-400 "
           tooltip="Sample calculation for last month"
         >
-          <span class="hidden md:inline">Entering Visitors: </span><strong><%= PlausibleWeb.StatsView.large_number_format(@result.entering_visitors) %></strong>
+          <span class="hidden md:inline">Visitors: </span><strong><%= PlausibleWeb.StatsView.large_number_format(@result.entering_visitors) %></strong>
         </span>
       </span>
       <span :if={step && @at > 0}>

extra/lib/plausible_web/live/funnel_settings/list.ex

@@ -9,94 +9,47 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
   """
   use Phoenix.LiveComponent
   use Phoenix.HTML
+  import PlausibleWeb.Components.Generic
 
   def render(assigns) do
     ~H"""
     <div>
-      <div class="border-t border-gray-200 pt-4 sm:flex sm:items-center sm:justify-between">
-        <form id="filter-form" phx-change="filter">
-          <div class="text-gray-800 text-sm inline-flex items-center">
-            <div class="relative rounded-md shadow-sm flex">
-              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-                <Heroicons.magnifying_glass class="feather mr-1 dark:text-gray-300" />
-              </div>
-              <input
-                type="text"
-                name="filter-text"
-                id="filter-text"
-                class="pl-8 shadow-sm dark:bg-gray-900 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-800"
-                placeholder="Search Funnels"
-                value={@filter_text}
-              />
-            </div>
+      <.filter_bar filter_text={@filter_text} placeholder="Search Funnels">
+        <.button id="add-funnel-button" phx-click="add-funnel" mt?={false}>
+          Add Funnel
+        </.button>
+      </.filter_bar>
 
-            <Heroicons.backspace
-              :if={String.trim(@filter_text) != ""}
-              class="feather ml-2 cursor-pointer hover:text-red-500 dark:text-gray-300 dark:hover:text-red-500"
-              phx-click="reset-filter-text"
-              id="reset-filter"
-            />
-          </div>
-        </form>
-        <div class="mt-4 flex sm:ml-4 sm:mt-0">
-          <PlausibleWeb.Components.Generic.button phx-click="add-funnel">
-            + Add Funnel
-          </PlausibleWeb.Components.Generic.button>
-        </div>
-      </div>
       <%= if Enum.count(@funnels) > 0 do %>
-        <div class="mt-4">
-          <%= for funnel <- @funnels do %>
-            <div class="border-b border-gray-300 dark:border-gray-500 py-3 flex justify-between">
-              <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                <%= funnel.name %>
-                <span class="text-sm text-gray-400 font-normal block mt-1">
-                  <%= funnel.steps_count %>-step funnel
-                </span>
+        <.table rows={@funnels}>
+          <:tbody :let={funnel}>
+            <.td truncate>
+              <span class="font-medium"><%= funnel.name %></span>
+            </.td>
+            <.td hide_on_mobile>
+              <span class="text-gray-500 dark:text-gray-400">
+                <%= funnel.steps_count %>-step funnel
               </span>
-              <div class="flex items-center gap-x-4">
-                <a href="#" phx-click="edit-funnel" phx-value-funnel-id={funnel.id}>
-                  <Heroicons.pencil_square class="feather feather-sm text-indigo-800 hover:text-indigo-500 dark:text-indigo-500 dark:hover:text-indigo-300" />
-                </a>
-                <button
-                  id={"delete-funnel-#{funnel.id}"}
-                  phx-click="delete-funnel"
-                  phx-value-funnel-id={funnel.id}
-                  class="text-sm text-red-600"
-                  data-confirm={"Are you sure you want to remove funnel '#{funnel.name}'? This will just affect the UI, all of your analytics data will stay intact."}
-                >
-                  <svg
-                    class="feather feather-sm"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <polyline points="3 6 5 6 21 6"></polyline>
-                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
-                    </path>
-                    <line x1="10" y1="11" x2="10" y2="17"></line>
-                    <line x1="14" y1="11" x2="14" y2="17"></line>
-                  </svg>
-                </button>
-              </div>
-            </div>
-          <% end %>
-        </div>
+            </.td>
+            <.td actions>
+              <.edit_button phx-click="edit-funnel" phx-value-funnel-id={funnel.id} />
+              <.delete_button
+                id={"delete-funnel-#{funnel.id}"}
+                phx-click="delete-funnel"
+                phx-value-funnel-id={funnel.id}
+                class="text-sm text-red-600"
+                data-confirm={"Are you sure you want to remove funnel '#{funnel.name}'? This will just affect the UI, all of your analytics data will stay intact."}
+              />
+            </.td>
+          </:tbody>
+        </.table>
       <% else %>
-        <p class="text-sm text-gray-800 dark:text-gray-200 mt-12 mb-8 text-center">
+        <p class="mt-12 mb-8 text-sm text-center">
           <span :if={String.trim(@filter_text) != ""}>
             No funnels found for this site. Please refine or
-            <a
-              class="text-indigo-500 cursor-pointer underline"
-              phx-click="reset-filter-text"
-              id="reset-filter-hint"
-            >
+            <.styled_link phx-click="reset-filter-text" id="reset-filter-hint">
               reset your search.
-            </a>
+            </.styled_link>
           </span>
           <span :if={String.trim(@filter_text) == "" && Enum.empty?(@funnels)}>
             No funnels configured for this site.

lib/plausible_web.ex

@@ -13,6 +13,8 @@ defmodule PlausibleWeb do
 
       alias PlausibleWeb.Router.Helpers, as: Routes
       alias Phoenix.LiveView.JS
+
+      import PlausibleWeb.Components.Generic
     end
   end
 

lib/plausible_web/components/billing/billing.ex

@@ -79,14 +79,12 @@ defmodule PlausibleWeb.Components.Billing do
         pad
         title="Pageviews"
         usage={@usage.pageviews}
-        class="font-normal text-gray-500 dark:text-gray-400"
       />
       <.usage_and_limits_row
         id={"custom_events_#{@period}"}
         pad
         title="Custom events"
         usage={@usage.custom_events}
-        class="font-normal text-gray-500 dark:text-gray-400"
       />
     </.usage_and_limits_table>
     """
@@ -169,10 +167,10 @@ defmodule PlausibleWeb.Components.Billing do
   def usage_and_limits_row(assigns) do
     ~H"""
     <tr {@rest}>
-      <td class={["py-4 pr-1 text-sm sm:whitespace-nowrap text-left", @pad && "pl-6"]}>
+      <td class={["text-sm py-4 pr-1 sm:whitespace-nowrap text-left", @pad && "pl-6"]}>
         <%= @title %>
       </td>
-      <td class="py-4 text-sm sm:whitespace-nowrap text-right">
+      <td class="text-sm py-4 sm:whitespace-nowrap text-right">
         <%= Cldr.Number.to_string!(@usage) %>
         <%= if is_number(@limit), do: "/ #{Cldr.Number.to_string!(@limit)}" %>
       </td>
@@ -184,8 +182,7 @@ defmodule PlausibleWeb.Components.Billing do
     ~H"""
     <div
       id="monthly-quota-box"
-      class="h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900"
-      style="width: 11.75rem;"
+      class="w-1/3 h-32 px-2 py-4 my-4 text-center bg-gray-100 rounded dark:bg-gray-900 w-max-md"
     >
       <h4 class="font-black dark:text-gray-100">Monthly quota</h4>
       <div class="py-2 text-xl font-medium dark:text-gray-100">
@@ -245,7 +242,7 @@ defmodule PlausibleWeb.Components.Billing do
       id={@id}
       onclick={"if (#{@confirmed}) {Paddle.Checkout.open(#{Jason.encode!(%{product: @paddle_product_id, email: @user.email, disableLogout: true, passthrough: @user.id, success: Routes.billing_path(PlausibleWeb.Endpoint, :upgrade_success), theme: "none"})})}"}
       class={[
-        "w-full mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 text-white",
+        "text-sm w-full mt-6 block rounded-md py-2 px-3 text-center font-semibold leading-6 text-white",
         !@checkout_disabled && "bg-indigo-600 hover:bg-indigo-500",
         @checkout_disabled && "pointer-events-none bg-gray-400 dark:bg-gray-600"
       ]}

lib/plausible_web/components/billing/notice.ex

@@ -63,15 +63,13 @@ defmodule PlausibleWeb.Components.Billing.Notice do
   attr(:current_user, User, required: true)
   attr(:feature_mod, :atom, required: true, values: Feature.list())
   attr(:grandfathered?, :boolean, default: false)
-  attr(:size, :atom, default: :sm)
   attr(:rest, :global)
 
   def premium_feature(assigns) do
     ~H"""
     <.notice
       :if={@feature_mod.check_availability(@billable_user) !== :ok}
       class="rounded-t-md rounded-b-none"
-      size={@size}
       title="Notice"
       {@rest}
     >

lib/plausible_web/components/flow_progress.ex

@@ -21,9 +21,9 @@ defmodule PlausibleWeb.Components.FlowProgress do
 
     ~H"""
     <div :if={not Enum.empty?(@steps)} class="mt-6 hidden md:block" id="flow-progress">
-      <div class="flex items-center justify-between max-w-3xl mx-auto my-8">
+      <div class="flex items-center justify-between max-w-4xl mx-auto my-8">
         <%= for {step, idx} <- Enum.with_index(@steps) do %>
-          <div class="flex items-center text-xs">
+          <div class="flex items-center text-base">
             <div
               :if={idx < @current_step_idx}
               class="w-5 h-5 bg-green-500 dark:bg-green-600 text-white rounded-full flex items-center justify-center"