Skip to content

Refine verification banner UI and copy #6525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RobertJoonas merged 2 commits into from
Jul 22, 2026
Merged

Refine verification banner UI and copy #6525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
255b7dc
Refine verification banner UI and copy
sanne-san Jul 21, 2026
49a1ecd
improve templating logic
RobertJoonas Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion extra/lib/plausible/installation_support/result.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ defmodule Plausible.InstallationSupport.Result do
ok?: false,
data: nil,
errors: [error.message],
recommendations: [%{text: error.recommendation, url: error.url}]
recommendations: [%{text: error.recommendation, inline_links: error.inline_links}]

ok?: true,
data: %{},
Expand Down
129 changes: 78 additions & 51 deletions extra/lib/plausible/installation_support/verification/diagnostics.ex
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions extra/lib/plausible_web/live/verification.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,14 +83,12 @@ defmodule PlausibleWeb.Live.Verification do
~H"""
<.live_component
module={@component}
installation_type={get_installation_type(@tracker_script_configuration)}
domain={@domain}
id="verification-standalone"
attempts={@attempts}
flow={@flow}
super_admin?={@super_admin?}
custom_url_input?={@custom_url_input?}
tracker_script_configuration={@tracker_script_configuration}
dismissed?={@dismissed?}
/>
"""
Expand Down
30 changes: 25 additions & 5 deletions lib/plausible_web/components/generic.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,37 @@ defmodule PlausibleWeb.Components.Generic do
gray: %{
bg: "bg-gray-100 dark:bg-gray-800",
icon: "text-gray-600 dark:text-gray-300",
title_text: "text-sm text-gray-900 dark:text-gray-100",
title_text: "text-gray-900 dark:text-gray-100",
body_text: "text-sm text-gray-800 dark:text-gray-200 leading-5"
},
indigo: %{
bg: "bg-indigo-100/60 dark:bg-indigo-900/40",
icon: "text-indigo-500",
title_text: "text-gray-900 dark:text-gray-100",
body_text: "text-sm text-gray-600 dark:text-gray-100/60 leading-5"
},
green: %{
bg: "bg-green-100/60 dark:bg-green-900/40",
icon: "text-green-500",
title_text: "text-gray-900 dark:text-gray-100",
body_text: "text-sm text-gray-600 dark:text-gray-100/60 leading-5"
},
yellow: %{
bg: "bg-yellow-100/60 dark:bg-yellow-900/40",
icon: "text-yellow-500",
title_text: "text-sm text-gray-900 dark:text-gray-100",
title_text: "text-gray-900 dark:text-gray-100",
body_text: "text-sm text-gray-600 dark:text-gray-100/60 leading-5"
},
red: %{
bg: "bg-red-100 dark:bg-red-900/30",
icon: "text-red-600 dark:text-red-500",
title_text: "text-sm text-gray-900 dark:text-gray-100",
title_text: "text-gray-900 dark:text-gray-100",
body_text: "text-sm text-gray-600 dark:text-gray-100/60 leading-5"
},
white: %{
bg: "bg-white dark:bg-gray-900 shadow-sm dark:shadow-none",
icon: "text-gray-600 dark:text-gray-400",
title_text: "text-sm text-gray-900 dark:text-gray-100",
title_text: "text-gray-900 dark:text-gray-100",
body_text: "text-sm text-gray-600 dark:text-gray-300 leading-5"
}
}
Expand Down Expand Up @@ -222,6 +234,7 @@ defmodule PlausibleWeb.Components.Generic do
attr(:show_icon, :boolean, default: true)
attr(:class, :string, default: "")
attr(:icon_class, :string, default: "")
attr(:title_class, :string, default: "")
attr(:rest, :global)
slot(:inner_block)
slot(:actions)
Expand Down Expand Up @@ -253,7 +266,14 @@ defmodule PlausibleWeb.Components.Generic do
<% end %>
</div>
<div class="flex-1 flex flex-col gap-y-1.5">
<h3 :if={@title} class={"font-medium #{@theme.title_text}"}>
<h3
:if={@title}
class={[
@title_class == "" && "text-sm font-medium",
@theme.title_text,
@title_class
]}
>
{@title}
</h3>
<div class={"#{@theme.body_text}"}>
Expand Down
Loading
Loading