diff --git a/lib/plausible_web.ex b/lib/plausible_web.ex
index 4288cecb9a3546d023d66a4655c2936deaeaf229..5918928b799797ec1018364ff15d92dff8c5e98c 100644
--- a/lib/plausible_web.ex
+++ b/lib/plausible_web.ex
@@ -22,6 +22,7 @@ defmodule PlausibleWeb do
use Phoenix.HTML
import PlausibleWeb.ErrorHelpers
+ import PlausibleWeb.FormHelpers
alias PlausibleWeb.Router.Helpers, as: Routes
end
end
diff --git a/lib/plausible_web/templates/site/import_from_google_confirm.html.eex b/lib/plausible_web/templates/site/import_from_google_confirm.html.eex
index 07c68b28688aacf5750d99a81f60c0d6b83aac93..e47949b1385d242668e8cdc1823692eea86db675 100644
--- a/lib/plausible_web/templates/site/import_from_google_confirm.html.eex
+++ b/lib/plausible_web/templates/site/import_from_google_confirm.html.eex
@@ -6,27 +6,27 @@
<%= case @start_date do %>
<% {:ok, start_date} -> %>
- <div class="mt-6 text-sm text-gray-500">
+ <div class="mt-6 text-sm text-gray-500 dark:text-gray-200">
Choose the view in your Google Analytics account that will be imported to the <%= @site.domain %> dashboard
</div>
<div class="mt-3">
- <%= label f, :view_id, "Google Analytics view", class: "block text-sm font-medium text-gray-700" %>
- <%= select f, :view_display, @view_ids, disabled: "true", selected: @selected_view_id, class: "bg-gray-50 mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
+ <%= styled_label(f, :view_id, "Google Analytics view") %>
+ <%= styled_select f, :view_display, @view_ids, disabled: "true", selected: @selected_view_id %>
<%= hidden_input f, :view_id, readonly: "true", value: @selected_view_id %>
</div>
- <div class="mt-6 text-sm text-gray-500">
+ <div class="mt-6 text-sm text-gray-500 dark:text-gray-200">
Import historical data from your first Google Analytics visitor to your first Plausible visitor
</div>
<div class="flex justify-between mt-3">
<div class="w-36">
- <%= label f, :start_date, "From", class: "block text-sm font-medium text-gray-700" %>
- <%= date_input f, :start_date, value: start_date, readonly: "true", class: "bg-gray-50 mt-1 block w-full px-3 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
+ <%= styled_label f, :start_date, "From" %>
+ <%= styled_date_input f, :start_date, value: start_date, readonly: "true" %>
</div>
<div class="align-middle pt-8">→</div>
<div class="w-36">
- <%= label f, :end_date, "To", class: "block text-sm font-medium text-gray-700" %>
- <%= date_input f, :end_date, value: @end_date, readonly: "true", class: "bg-gray-50 mt-1 block w-full px-3 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
+ <%= styled_label f, :end_date, "To" %>
+ <%= styled_date_input f, :end_date, value: @end_date, readonly: "true" %>
</div>
</div>
<% {:error, error} -> %>
diff --git a/lib/plausible_web/templates/site/import_from_google_user_metric_form.html.eex b/lib/plausible_web/templates/site/import_from_google_user_metric_form.html.eex
index 54789c3429857ffb84aa5651142e8c2ff40454dd..a71f9d7a8fda1bb291c03753c00dd0b9dd08d543 100644
--- a/lib/plausible_web/templates/site/import_from_google_user_metric_form.html.eex
+++ b/lib/plausible_web/templates/site/import_from_google_user_metric_form.html.eex
@@ -1,7 +1,7 @@
<div class="max-w-md w-full mx-auto 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">Import from Google Analytics</h2>
- <div class="mt-6 text-sm text-gray-500">
+ <div class="mt-6 text-sm text-gray-500 dark:text-gray-200">
<p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
diff --git a/lib/plausible_web/templates/site/import_from_google_view_id_form.html.eex b/lib/plausible_web/templates/site/import_from_google_view_id_form.html.eex
index 04297e9554931985a66182c97de4fba52e67ea85..330680a9e627e895a69b2ea7a48e475455d9abe1 100644
--- a/lib/plausible_web/templates/site/import_from_google_view_id_form.html.eex
+++ b/lib/plausible_web/templates/site/import_from_google_view_id_form.html.eex
@@ -6,13 +6,13 @@
<%= case @view_ids do %>
<% {:ok, view_ids} -> %>
- <div class="mt-6 text-sm text-gray-500">
+ <div class="mt-6 text-sm text-gray-500 dark:text-gray-200">
Choose the view in your Google Analytics account that will be imported to the <%= @site.domain %> dashboard.
</div>
<div class="mt-3">
- <%= label f, :view_id, "Google Analytics view", class: "block text-sm font-medium text-gray-700" %>
- <%= select f, :view_id, view_ids, prompt: "(Choose view)", required: "true", class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" %>
+ <%= styled_label(f, :view_id, "Google Analytics view") %>
+ <%= styled_select f, :view_id, view_ids, prompt: "(Choose view)", required: "true" %>
</div>
<% {:error, error} -> %>
<p class="text-gray-700 dark:text-gray-300 mt-6">The following error occurred when fetching your Google Analytics view ids.</p>
diff --git a/lib/plausible_web/templates/site/settings_general.html.eex b/lib/plausible_web/templates/site/settings_general.html.eex
index aadc764a173e31fdc68030b840b039154b88b49d..1d03cdcb4607881a3422f15c37d91c1797074b67 100644
--- a/lib/plausible_web/templates/site/settings_general.html.eex
+++ b/lib/plausible_web/templates/site/settings_general.html.eex
@@ -98,15 +98,18 @@
<div class="flex">
<%= button(to: Plausible.Google.Api.authorize_url(@site.id, "import"), class: "inline-flex pr-4 items-center border border-gray-100 shadow rounded-md focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-200 mt-8 hover:bg-gray-50") do %>
<%= google_logo() %>
- <span style="font-family: Roboto, system-ui" class="text-sm font-medium text-gray-600">Continue with Google<span>
+ <span style="font-family: Roboto, system-ui" class="text-sm font-medium text-gray-600 dark:text-gray-50">Continue with Google<span>
<% end %>
</div>
<% true -> %>
- <div class="flex">
- <%= button(to: Plausible.Google.Api.authorize_url(@site.id, "import"), class: "inline-flex pr-4 items-center border border-gray-100 shadow rounded-md focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-200 mt-8 hover:bg-gray-50") do %>
+ <%= if @site.imported_data && @site.imported_data.status == "error" do %>
+ <div class="text-sm mt-2">Your latest import has failed. You can try importing again by clicking the button below. If you try multiple times and the import keeps failing, please contact support.</div>
+ <% end %>
+ <div class="flex mt-2">
+ <%= button(to: Plausible.Google.Api.authorize_url(@site.id, "import"), class: "inline-flex pr-4 items-center border border-gray-100 shadow rounded-md focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-200 mt-8 hover:bg-gray-50 dark:hover:bg-gray-700") do %>
<%= google_logo() %>
- <span style="font-family: Roboto, system-ui" class="text-sm font-medium text-gray-600">Continue with Google<span>
+ <span style="font-family: Roboto, system-ui" class="text-sm font-medium text-gray-600 dark:text-gray-50">Continue with Google<span>
<% end %>
</div>
diff --git a/lib/plausible_web/views/form_helpers.ex b/lib/plausible_web/views/form_helpers.ex
new file mode 100644
index 0000000000000000000000000000000000000000..c96375ee0bc25d038298118a5949b4b6107f4d89
--- /dev/null
+++ b/lib/plausible_web/views/form_helpers.ex
@@ -0,0 +1,26 @@
+defmodule PlausibleWeb.FormHelpers do
+ @label_opts [class: "block text-sm font-medium text-gray-700 dark:text-gray-100"]
+ def styled_label(form, field, text, opts \\ []) do
+ opts = Keyword.merge(@label_opts, opts)
+ Phoenix.HTML.Form.label(form, field, text, opts)
+ end
+
+ @date_input_opts [
+ class:
+ "mt-1 block w-full px-3 py-2 text-base dark:bg-gray-900 dark:text-gray-300 dark:border-gray-500 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+ ]
+ def styled_date_input(form, field, opts \\ []) do
+ opts = Keyword.merge(@date_input_opts, opts)
+ Phoenix.HTML.Form.date_input(form, field, opts)
+ end
+
+ @select_opts [
+ class:
+ "mt-1 block w-full pl-3 pr-10 py-2 text-base dark:bg-gray-900 dark:text-gray-100 dark:border-gray-500 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+ ]
+
+ def styled_select(form, field, options, opts \\ []) do
+ opts = Keyword.merge(@select_opts, opts)
+ Phoenix.HTML.Form.select(form, field, options, opts)
+ end
+end