mirror of
https://github.com/plausible/analytics.git
synced 2024-12-18 23:11:43 +03:00
425975efec
* Adds New Dark Mode Assets * Moves triangle for dropdown to a reasonable position * Majority .eex dark implementation * Fixes Logo Positioning * Adds theme flag to user schema, uses it * Uses correct variables for theme applicator script * Minor missed theme changes/fallbacks * Individual Component Support + Theme Context * Sources Tab Support This was a pain to test D: * Partial Stats Sections Support * More of stats modules supported * Modal +table support * Improves some Flatpickr in light theme, supports dark theme * Fixes missed settings tab colors * Finishes Devices module support * Fixes bar graph colors * Better colorizes maps module * Undoes colorized bars (they looked bad, on second thought) * Fixes loading indicator * Finishes conversions module * Adds changelog entry The PR number could be wrong, will double check * Fixes missed header color * Fixes naming of migration and removes static alter * Does migration correctly As I said, my Elixir is pretty weak heh * Adds support for spike notifications setting * Improves contrast and visibility for email settings * Resolves @ukutaht's comments on #467 * Fixes missing dark style * Found one more missed dark element (shared links) * Formatting fixes
147 lines
8.9 KiB
Elixir
147 lines
8.9 KiB
Elixir
<%= if !Keyword.fetch!(Application.get_env(:plausible, :selfhost), :disable_subscription) do %>
|
|
<div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded rounded-t-none border-t-2 border-orange-200 dark:border-orange-200 px-8 pt-6 pb-8 mt-24 ">
|
|
<div class="flex justify-between">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Subscription Plan</h2>
|
|
<%= if @subscription do %>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-bold leading-5 <%= subscription_colors(@subscription.status) %>">
|
|
<%= present_subscription_status(@subscription.status) %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="my-4 border-b border-gray-400"></div>
|
|
|
|
<%= if @subscription && @subscription.status == "deleted" do %>
|
|
<div class="p-2 rounded-lg bg-red-100 sm:p-3">
|
|
<div class="flex items-center justify-between flex-wrap">
|
|
<div class="w-0 flex-1 flex items-center">
|
|
<svg class="h-6 w-6 text-red-800" viewBox="0 0 24 24" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 9V11M12 15H12.01M5.07183 19H18.9282C20.4678 19 21.4301 17.3333 20.6603 16L13.7321 4C12.9623 2.66667 11.0378 2.66667 10.268 4L3.33978 16C2.56998 17.3333 3.53223 19 5.07183 19Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<p class="ml-3 font-medium text-red-800">
|
|
<%= if @subscription.next_bill_date && Timex.compare(@subscription.next_bill_date, Timex.today()) >= 0 do %>
|
|
Your subscription is cancelled but you have access to your stats until <%= Timex.format!(@subscription.next_bill_date, "{Mshort} {D}, {YYYY}") %>. Upgrade below to make sure you don't lose access.
|
|
<% else %>
|
|
Your subscription is cancelled. Upgrade below to get access to your stats again.
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="flex flex-col items-center sm:flex-row sm:items-start justify-between mt-8">
|
|
<div class="text-center bg-gray-100 dark:bg-gray-900 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
|
<h4 class="font-black dark:text-gray-100">Monthly quota</h4>
|
|
<%= if @subscription do %>
|
|
<div class="text-xl py-2 font-medium dark:text-gray-100"><%= subscription_quota(@subscription) %> pageviews</div>
|
|
<%= case @subscription.status do %>
|
|
<% "active" -> %>
|
|
<%= link("Change plan", to: "/billing/change-plan", class: "text-sm text-indigo-500 font-medium") %>
|
|
<% "past_due" -> %>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 font-medium" tooltip="Please update your billing details before changing plans">Change plan</span>
|
|
<% _ -> %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="text-xl py-2 font-medium dark:text-gray-100">Free trial</div>
|
|
<%= link("Upgrade", to: "/billing/upgrade", class: "text-sm text-indigo-500 font-medium") %>
|
|
<% end %>
|
|
</div>
|
|
<div class="text-center bg-gray-100 dark:bg-gray-900 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
|
<h4 class="font-black dark:text-gray-100">Next bill amount</h4>
|
|
<%= if @subscription && @subscription.status in ["active", "past_due"] do %>
|
|
<div class="text-xl py-2 font-medium dark:text-gray-100">$<%= @subscription.next_bill_amount %></div>
|
|
<%= if @subscription.update_url do %>
|
|
<%= link("Update billing info", to: @subscription.update_url, class: "text-sm text-indigo-500 font-medium") %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="text-xl py-2 font-medium dark:text-gray-100">---</div>
|
|
<% end %>
|
|
</div>
|
|
<div class="text-center bg-gray-100 dark:bg-gray-900 py-4 px-2 rounded h-32 my-4" style="width: 11.75rem;">
|
|
<h4 class="font-black dark:text-gray-100">Next bill date</h4>
|
|
|
|
<%= if @subscription && @subscription.next_bill_date && @subscription.status in ["active", "past_due"] do %>
|
|
<div class="text-xl py-2 font-medium dark:text-gray-100"><%= Timex.format!(@subscription.next_bill_date, "{Mshort} {D}, {YYYY}") %></div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400 font-medium">(<%= subscription_interval(@subscription) %> billing)</div>
|
|
<% else %>
|
|
<div class="text-xl py-2 font-medium dark:text-gray-100">---</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold mt-8 dark:text-gray-100">Your usage</h3>
|
|
|
|
<div class="py-2 dark:text-gray-100">
|
|
<b><%= delimit_integer(Plausible.Billing.usage(@conn.assigns[:current_user])) %></b>
|
|
pageviews in the last 30 days
|
|
</div>
|
|
|
|
<%= cond do %>
|
|
<% @subscription && @subscription.status in ["active", "past_due", "paused"] && @subscription.cancel_url -> %>
|
|
<div class="mt-8">
|
|
<%= link("Cancel my subscription", to: @subscription.cancel_url, class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150") %>
|
|
</div>
|
|
<% true -> %>
|
|
<div class="mt-8">
|
|
<%= link("Upgrade", to: "/billing/upgrade", class: "inline-block px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:ring active:bg-indigo-700 transition ease-in-out duration-150") %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded rounded-t-none border-t-2 border-green-500 px-8 pt-6 pb-8 mt-16">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Dashboard Appearance</h2>
|
|
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
|
|
<%= form_for @changeset, "/settings", [class: "max-w-sm"], fn f -> %>
|
|
<div class="col-span-4 sm:col-span-2">
|
|
<%= label f, :theme, "Theme Selection", class: "block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300" %>
|
|
<%= select f, :theme, Plausible.Themes.options(), class: "dark:bg-gray-900 mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-100 cursor-pointer" %>
|
|
</div>
|
|
<%= submit "Save", class: "button mt-4" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded rounded-t-none border-t-2 border-indigo-100 dark:border-indigo-500 px-8 pt-6 pb-8 mt-16">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Account settings</h2>
|
|
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
|
|
<%= form_for @changeset, "/settings", [class: "max-w-sm"], fn f -> %>
|
|
<div class="my-4">
|
|
<%= label f, :name, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
|
|
<div class="mt-1">
|
|
<%= text_input f, :name, class: "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" %>
|
|
<%= error_tag f, :name %>
|
|
</div>
|
|
</div>
|
|
<div class="my-4">
|
|
<%= label f, :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
|
|
<div class="mt-1">
|
|
<%= email_input f, :email, class: "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" %>
|
|
<%= error_tag f, :email %>
|
|
</div>
|
|
</div>
|
|
<%= submit "Save changes", class: "button mt-4" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded rounded-t-none border-t-2 border-red-600 px-8 pt-6 pb-8 mt-16 mb-24">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-black dark:text-gray-100">Delete account</h2>
|
|
</div>
|
|
|
|
<div class="my-4 border-b border-gray-300 dark:border-gray-500"></div>
|
|
|
|
<p class="dark:text-gray-100">Deleting your account removes all sites and stats you've collected</p>
|
|
|
|
<%= if @subscription && @subscription.status == "active" do %>
|
|
<span class="button bg-gray-300 dark:bg-gray-800 mt-6 hover:shadow-none">Delete my account</span>
|
|
<p class="text-gray-600 dark:text-gray-400 text-sm mt-2">Your account cannot be deleted because you have an active subscription. If you want to delete your account, please cancel your subscription first.</p>
|
|
<% else %>
|
|
<%= link("Delete my account", to: "/me", class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150", method: "delete", data: [confirm: "Deleting your account cannot be reversed. Are you sure?"]) %>
|
|
<% end %>
|
|
</div>
|