plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-12-28 12:01:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Optimize dark mode UI for shared link form (#2355)

Browse Source 
* remove redundant empty div

* optimize shared link form for darkmode

* follow the same style in new_api_key form
This commit is contained in:
RobertJoonas 2022-10-19 15:02:27 +03:00 committed by GitHub
parent 54071fbc1b
commit 409f1733ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/plausible_web/templates/auth/new_api_key.html.eex
View File

@ -1,6 +1,6 @@
<%= form_for @changeset, "/settings/api-keys", [class: "w-full max-w-md mx-auto bg-white dark:bg-gray-800 shadow-md rounded px-8 py-6 mt-8"], fn f -> %>
<h1 class="text-xl font-black dark:text-gray-100">Create new API key</h1>
<div class="my-4 mt-8">
<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: "dark:bg-gray-900 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-500 dark:text-gray-300 dark:focus:bg-gray-800 focus:border-gray-300 dark:focus:border-gray-500 rounded-md", placeholder: "Development" %>
@ -14,7 +14,7 @@
<a onclick="var textarea = document.getElementById('key-input'); textarea.focus(); textarea.select(); document.execCommand('copy');" href="javascript:void(0)" class="absolute flex items-center text-xs font-medium text-indigo-600 no-underline hover:underline" style="top: 12px; right: 12px;">
<svg class="pr-1 text-indigo-600 dark:text-indigo-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>COPY
</a>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-200">Make sure to store the key in a secure place. Once created, we will not be able to show it again.</p>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-200">Make sure to store the key in a secure place. Once created, we will not be able to show it again.</p>
</div>
</div>
<%= submit "Continue", class: "button mt-4 w-full" %>

12
lib/plausible_web/templates/site/new_shared_link.html.eex
View File

@ -1,20 +1,18 @@
<%= form_for @changeset, "/sites/#{URI.encode_www_form(@site.domain)}/shared-links", [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"], fn f -> %>
<h2 class="text-xl font-black dark:text-gray-100">New shared link</h2>
<div class="my-4 dark:text-gray-100">
</div>
<div class="my-4">
<%= label f, :name, "Name", class: "block text-sm font-medium text-gray-700 dark:text-gray-100" %>
<%= label f, :name, "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 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", required: "required", autocomplete: "off" %>
<%= text_input f, :name, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-500 dark:text-gray-300 dark:focus:bg-gray-800 dark:focus:border-gray-500", required: "required", autocomplete: "off" %>
<%= error_tag f, :name %>
</div>
</div>
<div class="my-4">
<%= label f, :password, "Password (optional)", class: "block text-sm font-medium text-gray-700 dark:text-gray-100" %>
<%= label f, :password, "Password (optional)", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
<div class="mt-1">
<%= password_input f, :password, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", autocomplete: "off" %>
<%= password_input f, :password, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-500 dark:text-gray-300 dark:focus:bg-gray-800 dark:focus:border-gray-500", autocomplete: "off" %>
<%= error_tag f, :password %>
<p class="mt-2 text-sm text-gray-500">
<p class="mt-2 text-sm text-gray-500 dark:text-gray-200">
Password protection is optional. Please make sure you save it in a secure place. Once the link is created, we cannot reveal the password.
</p>
</div>