Fix dark mode for GA import

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

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">&rarr;</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} -> %>

lib/plausible_web/templates/site/import_from_google_user_metric_form.html.eex

 <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" />

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>

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>
 

lib/plausible_web/views/form_helpers.ex

+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