diff --git a/assets/js/dashboard/stats/bar.js b/assets/js/dashboard/stats/bar.js index b6848a0ba312..5aab0a2c1e3e 100644 --- a/assets/js/dashboard/stats/bar.js +++ b/assets/js/dashboard/stats/bar.js @@ -26,7 +26,7 @@ export default function Bar({ return (
{children} diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js index 37c00517ae90..4f31a2963193 100644 --- a/assets/js/dashboard/stats/behaviours/conversions.js +++ b/assets/js/dashboard/stats/behaviours/conversions.js @@ -54,7 +54,7 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) { path: conversionsRoute.path, search: (search) => search }} - color="bg-red-50" + color="bg-red-50 group-hover:bg-red-100" colMinWidth={90} /> ) diff --git a/assets/js/dashboard/stats/behaviours/props.js b/assets/js/dashboard/stats/behaviours/props.js index 0a9bbc559c72..8b20f305d850 100644 --- a/assets/js/dashboard/stats/behaviours/props.js +++ b/assets/js/dashboard/stats/behaviours/props.js @@ -138,7 +138,7 @@ export default function Properties({ afterFetchData }) { search: (search) => search }} maybeHideDetails={true} - color="bg-red-50" + color="bg-red-50 group-hover:bg-red-100" colMinWidth={90} /> ) diff --git a/assets/js/dashboard/stats/pages/index.js b/assets/js/dashboard/stats/pages/index.js index 68e03b986bf2..2b68966b83e3 100644 --- a/assets/js/dashboard/stats/pages/index.js +++ b/assets/js/dashboard/stats/pages/index.js @@ -53,7 +53,7 @@ function EntryPages({ afterFetchData }) { search: (search) => search }} getExternalLinkUrl={getExternalLinkUrl} - color="bg-orange-50" + color="bg-orange-50 group-hover:bg-orange-100" /> ) } @@ -99,7 +99,7 @@ function ExitPages({ afterFetchData }) { search: (search) => search }} getExternalLinkUrl={getExternalLinkUrl} - color="bg-orange-50" + color="bg-orange-50 group-hover:bg-orange-100" /> ) } @@ -141,7 +141,7 @@ function TopPages({ afterFetchData }) { search: (search) => search }} getExternalLinkUrl={getExternalLinkUrl} - color="bg-orange-50" + color="bg-orange-50 group-hover:bg-orange-100" /> ) } diff --git a/assets/js/dashboard/stats/reports/list.tsx b/assets/js/dashboard/stats/reports/list.tsx index 211d2970fcb9..fbf50797234c 100644 --- a/assets/js/dashboard/stats/reports/list.tsx +++ b/assets/js/dashboard/stats/reports/list.tsx @@ -247,7 +247,7 @@ export default function ListReport< return (
{renderBarFor(listItem)} @@ -258,7 +258,7 @@ export default function ListReport< } function renderBarFor(listItem: TListItem) { - const lightBackground = color || 'bg-green-50' + const lightBackground = color || 'bg-green-50 group-hover:bg-green-100' const metricToPlot = metrics.find((metric) => metric.meta.plot)?.key return ( @@ -267,7 +267,7 @@ export default function ListReport< maxWidthDeduction={undefined} count={listItem[metricToPlot]} all={state.list} - bg={`${lightBackground} dark:bg-gray-500/15`} + bg={`${lightBackground} dark:bg-gray-500/15 dark:group-hover:bg-gray-500/30`} plot={metricToPlot} >
diff --git a/assets/js/dashboard/stats/sources/source-list.js b/assets/js/dashboard/stats/sources/source-list.js index ff0a706d7e2a..e9bd4fcf83fc 100644 --- a/assets/js/dashboard/stats/sources/source-list.js +++ b/assets/js/dashboard/stats/sources/source-list.js @@ -83,7 +83,7 @@ function AllSources({ afterFetchData }) { metrics={chooseMetrics()} detailsLinkProps={{ path: sourcesRoute.path, search: (search) => search }} renderIcon={renderIcon} - color="bg-blue-50" + color="bg-blue-50 group-hover:bg-blue-100" /> ) } @@ -122,7 +122,7 @@ function Channels({ onClick, afterFetchData }) { path: channelsRoute.path, search: (search) => search }} - color="bg-blue-50" + color="bg-blue-50 group-hover:bg-blue-100" /> ) } @@ -166,7 +166,7 @@ function UTMSources({ tab, afterFetchData }) { keyLabel={utmTag.label} metrics={chooseMetrics()} detailsLinkProps={{ path: route?.path, search: (search) => search }} - color="bg-blue-50" + color="bg-blue-50 group-hover:bg-blue-100" /> ) } diff --git a/lib/plausible_web/components/billing/billing.ex b/lib/plausible_web/components/billing/billing.ex index 6316260a6dbd..db45f3472ce5 100644 --- a/lib/plausible_web/components/billing/billing.ex +++ b/lib/plausible_web/components/billing/billing.ex @@ -20,15 +20,24 @@ defmodule PlausibleWeb.Components.Billing do
-
- - - - To gain access to this feature, - <.upgrade_call_to_action current_role={@current_role} current_team={@current_team} />. - +
+
+ +
+
+

+ Upgrade to unlock +

+ + To access this feature, + <.upgrade_call_to_action current_role={@current_role} current_team={@current_team} /> + +
""" @@ -359,23 +368,25 @@ defmodule PlausibleWeb.Components.Billing do cond do not is_nil(assigns.current_role) and assigns.current_role not in [:owner, :billing] -> - ~H"please reach out to the team owner to upgrade their subscription" + ~H"ask your team owner to upgrade their subscription." upgrade_assistance_required? -> ~H""" - please contact hello@plausible.io - to upgrade your subscription + contact + <.styled_link href="mailto:hello@plausible.io" class="font-medium"> + hello@plausible.io + + to upgrade your subscription. """ true -> ~H""" - please - <.link - class="underline inline-block" + <.styled_link + class="inline-block font-medium" href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)} > - upgrade your subscription - + upgrade your subscription. + """ end end diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex index 466f88096529..f781b3755aa0 100644 --- a/lib/plausible_web/components/generic.ex +++ b/lib/plausible_web/components/generic.ex @@ -30,6 +30,8 @@ defmodule PlausibleWeb.Components.Generic do "bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:outline-indigo-600 disabled:bg-indigo-400/60 disabled:dark:bg-indigo-600/30 disabled:dark:text-white/35", "secondary" => "border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:text-gray-900 hover:shadow-sm dark:hover:bg-gray-600 dark:hover:text-white disabled:text-gray-700/40 disabled:hover:shadow-none dark:disabled:text-gray-500 dark:disabled:bg-gray-800 dark:disabled:border-gray-800", + "yellow" => + "bg-yellow-600/90 text-white hover:bg-yellow-600 focus-visible:outline-yellow-600 disabled:bg-yellow-400/60 disabled:dark:bg-yellow-600/30 disabled:dark:text-white/35", "danger" => "border border-gray-300 dark:border-gray-800 text-red-600 bg-white dark:bg-gray-800 hover:text-red-700 hover:shadow-sm dark:hover:text-red-400 dark:text-red-500 active:text-red-800 disabled:text-red-700/40 disabled:hover:shadow-none dark:disabled:text-red-500/35 dark:disabled:bg-gray-800" } @@ -95,7 +97,7 @@ defmodule PlausibleWeb.Components.Generic do theme_class = if assigns.disabled do - "bg-gray-400 text-white transition-colors duration-150 dark:text-white dark:text-gray-400 dark:bg-gray-700 cursor-not-allowed" + "bg-gray-400 text-white transition-all duration-150 dark:text-white dark:text-gray-400 dark:bg-gray-700 cursor-not-allowed" else @button_themes[assigns.theme] end @@ -515,7 +517,7 @@ defmodule PlausibleWeb.Components.Generic do current_role={@current_role} current_team={@current_team} > -
+
{render_slot(@inner_block)}
diff --git a/lib/plausible_web/live/components/prima_modal.ex b/lib/plausible_web/live/components/prima_modal.ex index 2975071c9129..bcb883b5b96b 100644 --- a/lib/plausible_web/live/components/prima_modal.ex +++ b/lib/plausible_web/live/components/prima_modal.ex @@ -12,11 +12,11 @@ defmodule PlausibleWeb.Live.Components.PrimaModal do -
-
+
+
"-panel"} class="relative overflow-hidden rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl sm:w-full sm:max-w-lg" @@ -41,7 +41,7 @@ defmodule PlausibleWeb.Live.Components.PrimaModal do def modal_title(assigns) do ~H""" - + {render_slot(@inner_block)} """ diff --git a/lib/plausible_web/live/sites.ex b/lib/plausible_web/live/sites.ex index 44ebd2eab160..8580d20dcb22 100644 --- a/lib/plausible_web/live/sites.ex +++ b/lib/plausible_web/live/sites.ex @@ -656,38 +656,31 @@ defmodule PlausibleWeb.Live.Sites do def invitation_modal(assigns) do ~H""" -
+
-
-
- -
-
- - Invitation for {@site.domain} - -
-

- You've been invited to the {@site.domain} analytics dashboard as {@invitation.invitation.role}. -

-
+
+ + You're invited to {@site.domain} + +
+

+ You've been added as {@invitation.invitation.role} + to the {@site.domain} analytics dashboard. + <%= if !(Map.get(@invitation, :exceeded_limits) || Map.get(@invitation, :no_plan)) && + @invitation.invitation.role == :owner do %> If you accept the ownership transfer, you will be responsible for billing going forward. -

-
+ <% else %> + Welcome aboard! + <% end %> +

<.notice @@ -730,30 +723,30 @@ defmodule PlausibleWeb.Live.Sites do You are unable to accept the ownership of this site because your account does not have a subscription. To become the owner of this site, you should upgrade to a suitable plan.
-
+
<.button :if={!(Map.get(@invitation, :exceeded_limits) || Map.get(@invitation, :no_plan))} mt?={false} - class="sm:ml-3 w-full sm:w-auto sm:text-sm" + class="w-full sm:w-auto sm:text-sm" data-method="post" data-csrf={Plug.CSRFProtection.get_csrf_token()} data-to={"/sites/invitations/#{@invitation.invitation.invitation_id}/accept"} data-autofocus > - Accept & Continue + Accept and continue <.button_link :if={Map.get(@invitation, :exceeded_limits) || Map.get(@invitation, :no_plan)} mt?={false} href={Routes.billing_path(PlausibleWeb.Endpoint, :choose_plan)} - class="sm:ml-3 w-full sm:w-auto sm:text-sm" + class="w-full sm:w-auto sm:text-sm" data-autofocus > Upgrade <.button_link mt?={false} - class="w-full sm:w-auto mr-2 sm:text-sm mt-2 sm:mt-0" + class="w-full sm:w-auto sm:text-sm" href="#" theme="secondary" data-method="post" diff --git a/lib/plausible_web/templates/layout/_header.html.heex b/lib/plausible_web/templates/layout/_header.html.heex index d3a7dd3aac66..9d0feb35c5c9 100644 --- a/lib/plausible_web/templates/layout/_header.html.heex +++ b/lib/plausible_web/templates/layout/_header.html.heex @@ -47,12 +47,19 @@ :if={ee?() and Plausible.Teams.on_trial?(@conn.assigns[:current_team])} class="hidden sm:block" > - <.styled_link - class="flex items-center h-[40px] px-3 py-2 text-sm text-yellow-700 hover:text-yellow-800 dark:text-yellow-500 dark:hover:text-yellow-500 font-medium rounded-md bg-yellow-100 dark:bg-yellow-800/40 dark:hover:bg-yellow-800/50 transition-colors duration-150" - href={Routes.settings_path(@conn, :subscription)} - > - {trial_notification(@conn.assigns[:current_team])} - +
+ + {trial_notification(@conn.assigns[:current_team])} + + <.button_link + href={Routes.settings_path(@conn, :subscription)} + theme="yellow" + mt?={false} + class="!px-3 !py-2" + > + Upgrade + +
  • <.dropdown> diff --git a/test/plausible_web/components/billing/billing_test.exs b/test/plausible_web/components/billing/billing_test.exs index ab1d1b1e3e07..fff310ebb949 100644 --- a/test/plausible_web/components/billing/billing_test.exs +++ b/test/plausible_web/components/billing/billing_test.exs @@ -17,10 +17,9 @@ defmodule PlausibleWeb.Components.BillingTest do } |> render_feature_gate() - assert class_of_element(html, "#feature-gate-inner-block-container") =~ - "pointer-events-none" - - assert class_of_element(html, "#feature-gate-overlay") =~ "backdrop-blur" + assert element_exists?(html, "#feature-gate-inner-block-container") + assert element_exists?(html, "#feature-gate-overlay") + assert text_of_element(html, "#feature-gate-overlay") =~ "Upgrade to unlock" end test "renders a blur overlay for a teamless account" do @@ -32,10 +31,9 @@ defmodule PlausibleWeb.Components.BillingTest do } |> render_feature_gate() - assert class_of_element(html, "#feature-gate-inner-block-container") =~ - "pointer-events-none" - - assert class_of_element(html, "#feature-gate-overlay") =~ "backdrop-blur" + assert element_exists?(html, "#feature-gate-inner-block-container") + assert element_exists?(html, "#feature-gate-overlay") + assert text_of_element(html, "#feature-gate-overlay") =~ "Upgrade to unlock" end test "does not render a blur overlay if feature access is granted", %{user: user} do @@ -47,9 +45,7 @@ defmodule PlausibleWeb.Components.BillingTest do } |> render_feature_gate() - refute class_of_element(html, "#feature-gate-inner-block-container") =~ - "pointer-events-none" - + assert element_exists?(html, "#feature-gate-inner-block-container") refute element_exists?(html, "#feature-gate-overlay") end @@ -89,7 +85,7 @@ defmodule PlausibleWeb.Components.BillingTest do } |> render_feature_gate() - assert text_of_element(html, "#lock-notice") =~ "reach out to the team owner" + assert text_of_element(html, "#lock-notice") =~ "ask your team owner" end end diff --git a/test/plausible_web/components/billing/notice_test.exs b/test/plausible_web/components/billing/notice_test.exs index f0836c8e9498..cdf9dc63bae2 100644 --- a/test/plausible_web/components/billing/notice_test.exs +++ b/test/plausible_web/components/billing/notice_test.exs @@ -50,7 +50,7 @@ defmodule PlausibleWeb.Components.Billing.NoticeTest do ) assert rendered =~ "This team is limited to 10 users" - assert rendered =~ "please reach out to the team owner to upgrade their subscription" + assert rendered =~ "ask your team owner to upgrade their subscription" end @tag :ee_only diff --git a/test/plausible_web/live/funnel_settings_test.exs b/test/plausible_web/live/funnel_settings_test.exs index 5ca0cd99767e..f3142b0618e1 100644 --- a/test/plausible_web/live/funnel_settings_test.exs +++ b/test/plausible_web/live/funnel_settings_test.exs @@ -21,7 +21,7 @@ defmodule PlausibleWeb.Live.FunnelSettingsTest do conn = get(conn, "/#{site.domain}/settings/funnels") resp = conn |> html_response(200) - assert text(resp) =~ "please upgrade your subscription" + assert text(resp) =~ "upgrade your subscription" end test "lists funnels for the site and renders help link", %{conn: conn, site: site} do @@ -33,7 +33,7 @@ defmodule PlausibleWeb.Live.FunnelSettingsTest do assert resp =~ "From blog to signup" assert resp =~ "From signup to blog" refute resp =~ "Your account does not have access" - refute resp =~ "please upgrade your subscription" + refute resp =~ "upgrade your subscription" assert element_exists?(resp, "a[href=\"https://plausible.io/docs/funnel-analysis\"]") end diff --git a/test/plausible_web/live/props_settings_test.exs b/test/plausible_web/live/props_settings_test.exs index 18b990b9476c..dd1e5df04def 100644 --- a/test/plausible_web/live/props_settings_test.exs +++ b/test/plausible_web/live/props_settings_test.exs @@ -21,7 +21,7 @@ defmodule PlausibleWeb.Live.PropsSettingsTest do |> html_response(200) |> text_of_element("#lock-notice") - assert lock_notice =~ "please upgrade your subscription" + assert lock_notice =~ "upgrade your subscription" end @tag :ee_only @@ -38,7 +38,7 @@ defmodule PlausibleWeb.Live.PropsSettingsTest do |> html_response(200) |> text_of_element("#lock-notice") - refute lock_notice =~ "please upgrade your subscription" + refute lock_notice =~ "upgrade your subscription" end test "lists props for the site and renders links", %{conn: conn, site: site} do @@ -56,7 +56,7 @@ defmodule PlausibleWeb.Live.PropsSettingsTest do assert resp =~ "amount" assert resp =~ "logged_in" assert resp =~ "is_customer" - refute resp =~ "please upgrade your subscription" + refute resp =~ "upgrade your subscription" end test "lists props with disallow actions", %{conn: conn, site: site} do @@ -133,7 +133,7 @@ defmodule PlausibleWeb.Live.PropsSettingsTest do assert resp =~ "amount" assert resp =~ "logged_in" assert resp =~ "is_customer" - refute resp =~ "please upgrade your subscription" + refute resp =~ "upgrade your subscription" end test "if no props are allowed, a proper info is displayed", %{ diff --git a/test/plausible_web/live/team_setup_test.exs b/test/plausible_web/live/team_setup_test.exs index 82118ace4eac..f599ef33da28 100644 --- a/test/plausible_web/live/team_setup_test.exs +++ b/test/plausible_web/live/team_setup_test.exs @@ -93,10 +93,9 @@ defmodule PlausibleWeb.Live.TeamSetupTest do {:ok, _lv, html} = live(conn, @url) - assert class_of_element(html, "#feature-gate-inner-block-container") =~ - "pointer-events-none" - - assert class_of_element(html, "#feature-gate-overlay") =~ "backdrop-blur-[6px]" + assert element_exists?(html, "#feature-gate-inner-block-container") + assert element_exists?(html, "#feature-gate-overlay") + assert text_of_element(html, "#feature-gate-overlay") =~ "Upgrade to unlock" end end