Add dark styles for settings_visibility

Fixes #945
This commit is contained in:
Uku Taht 2021-05-03 16:38:33 +03:00
parent 07653079e8
commit 9d22ff9f94

View File

@ -36,7 +36,7 @@
<div class="mt-6 flex flex-col divide-y divide-gray-200">
<%= for link <- @shared_links do %>
<div class="py-4">
<label for="<%= link.slug %>" class="flex content-center text-sm font-medium text-gray-700">
<label for="<%= link.slug %>" class="flex content-center text-sm font-medium text-gray-700 dark:text-gray-300">
<%= link.name %>
<%= if link.password_hash do %>
<svg class="ml-1 w-4 h-4 mt-px" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
@ -75,15 +75,15 @@
<div class="max-w-xl mt-4">
<div>
<label for="embed-link" class="block text-sm font-medium text-gray-700">Enter shared link</label>
<label for="embed-link" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Enter shared link</label>
<div class="mt-1">
<input type="text" name="embed-link" id="embed-link" onclick="this.select()" class="block w-full border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<input type="text" name="embed-link" id="embed-link" onclick="this.select()" class="block w-full border-gray-300 dark:border-gray-700 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300">
</div>
</div>
<div class="mt-2">
<label for="theme" class="block text-sm font-medium text-gray-700">Select theme</label>
<select id="theme" name="theme" class="block w-full py-2 pl-3 pr-10 mt-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<label for="theme" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Select theme</label>
<select id="theme" name="theme" class="block w-full py-2 pl-3 pr-10 mt-1 text-base border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300">
<option selected>Light</option>
<option>Dark</option>
<option>System</option>
@ -91,9 +91,9 @@
</div>
<div class="mt-2">
<label for="background" class="block text-sm font-medium text-gray-700">Custom background colour (optional)</label>
<label for="background" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Custom background colour (optional)</label>
<div class="mt-1">
<input type="text" name="background" id="background" class="block w-full border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" placeholder="#F9FAFB">
<input type="text" name="background" id="background" class="block w-full border-gray-300 dark:border-gray-700 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300" placeholder="#F9FAFB">
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-200">Hint: try using `transparent` background to blend the dashboard with your site background</p>
</div>
@ -104,10 +104,10 @@
<div class="mt-2">
<div class="max-w-xl">
<label for="embed-code" class="block text-sm font-medium text-gray-700">Embed code</label>
<label for="embed-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Embed code</label>
<div class="relative mt-1">
<textarea id="embed-code" name="embed-code" rows="3" readonly="readonly" onclick="this.select()" class="block w-full max-w-xl border-gray-300 resize-none shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"></textarea>
<textarea id="embed-code" name="embed-code" rows="3" readonly="readonly" onclick="this.select()" class="block w-full max-w-xl border-gray-300 dark:border-gray-700 resize-none shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:bg-gray-900 dark:text-gray-300"></textarea>
<a onclick="var textarea = document.getElementById('embed-code'); textarea.focus(); textarea.select(); document.execCommand('copy');" href="javascript:void(0)" class="text-sm text-indigo-500 no-underline hover:underline">
<svg class="absolute text-indigo-800" style="top: 12px; right: 12px;" 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>
</a>