Update dark mode styling for submission list to match site theme

This commit is contained in:
pacnpal
2024-11-13 18:53:03 +00:00
parent a30f3ef644
commit 131ef7ceb0

View File

@@ -1,11 +1,11 @@
{% for submission in submissions %} {% for submission in submissions %}
<div class="p-6 bg-gray-900 rounded-lg" <div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50"
id="submission-{{ submission.id }}" id="submission-{{ submission.id }}"
x-data="{ showSuccess: false }" x-data="{ showSuccess: false }"
@htmx:afterOnLoad="showSuccess = true; setTimeout(() => showSuccess = false, 3000)"> @htmx:afterOnLoad="showSuccess = true; setTimeout(() => showSuccess = false, 3000)">
<div class="mb-4 submission-header"> <div class="mb-4 submission-header">
<div> <div>
<h3 class="flex items-center gap-3 text-lg font-semibold text-gray-300"> <h3 class="flex items-center gap-3 text-lg font-semibold text-gray-900 dark:text-gray-300">
<span class="status-badge <span class="status-badge
{% if submission.status == 'NEW' %}status-pending {% if submission.status == 'NEW' %}status-pending
{% elif submission.status == 'APPROVED' %}status-approved {% elif submission.status == 'APPROVED' %}status-approved
@@ -20,7 +20,7 @@
{{ submission.get_content_type_display }} - {{ submission.get_content_type_display }} -
{% if submission.submission_type == 'CREATE' %}New{% else %}Edit{% endif %} {% if submission.submission_type == 'CREATE' %}New{% else %}Edit{% endif %}
</h3> </h3>
<div class="mt-2 text-gray-400"> <div class="mt-2 text-gray-600 dark:text-gray-400">
<span class="inline-flex items-center"> <span class="inline-flex items-center">
<i class="mr-1.5 fas fa-user"></i> <i class="mr-1.5 fas fa-user"></i>
{{ submission.user.username }} {{ submission.user.username }}
@@ -42,19 +42,19 @@
</div> </div>
{% if submission.reason %} {% if submission.reason %}
<div class="p-4 mt-3 bg-gray-800 rounded-lg"> <div class="p-4 mt-3 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
<div class="text-sm font-medium text-gray-300">Reason:</div> <div class="text-sm font-medium text-gray-900 dark:text-gray-300">Reason:</div>
<div class="mt-1.5 text-gray-400">{{ submission.reason }}</div> <div class="mt-1.5 text-gray-600 dark:text-gray-400">{{ submission.reason }}</div>
</div> </div>
{% endif %} {% endif %}
{% if submission.source %} {% if submission.source %}
<div class="p-4 mt-3 bg-gray-800 rounded-lg"> <div class="p-4 mt-3 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
<div class="text-sm font-medium text-gray-300">Source:</div> <div class="text-sm font-medium text-gray-900 dark:text-gray-300">Source:</div>
<div class="mt-1.5"> <div class="mt-1.5">
<a href="{{ submission.source }}" <a href="{{ submission.source }}"
target="_blank" target="_blank"
class="inline-flex items-center text-blue-400 hover:text-blue-300"> class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
<span>{{ submission.source }}</span> <span>{{ submission.source }}</span>
<i class="ml-1.5 text-xs fas fa-external-link-alt"></i> <i class="ml-1.5 text-xs fas fa-external-link-alt"></i>
</a> </a>
@@ -64,11 +64,11 @@
<div class="mt-4 space-y-3"> <div class="mt-4 space-y-3">
{% for field, value in submission.changes.items %} {% for field, value in submission.changes.items %}
<div class="p-4 bg-gray-800 rounded-lg"> <div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
<div class="text-sm font-medium text-gray-300"> <div class="text-sm font-medium text-gray-900 dark:text-gray-300">
{{ field|title }}: {{ field|title }}:
</div> </div>
<div class="mt-1.5 text-gray-400"> <div class="mt-1.5 text-gray-600 dark:text-gray-400">
{{ value }} {{ value }}
</div> </div>
</div> </div>
@@ -76,9 +76,9 @@
</div> </div>
{% if submission.notes %} {% if submission.notes %}
<div class="p-4 mt-4 rounded-lg bg-blue-900/30"> <div class="p-4 mt-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
<div class="text-sm font-medium text-blue-300">Review Notes:</div> <div class="text-sm font-medium text-blue-900 dark:text-blue-300">Review Notes:</div>
<div class="mt-1.5 text-blue-200">{{ submission.notes }}</div> <div class="mt-1.5 text-blue-800 dark:text-blue-200">{{ submission.notes }}</div>
</div> </div>
{% endif %} {% endif %}
@@ -92,7 +92,7 @@
x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"> x-transition:leave-end="opacity-0 transform -translate-y-2">
<textarea name="notes" <textarea name="notes"
class="w-full px-4 py-3 text-gray-300 bg-gray-800 border border-gray-700 rounded-lg resize-none focus:ring-2 focus:ring-blue-500" class="w-full px-4 py-3 text-gray-900 bg-white border rounded-lg resize-none dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
placeholder="Add review notes (optional)" placeholder="Add review notes (optional)"
rows="3"></textarea> rows="3"></textarea>
</div> </div>
@@ -142,8 +142,8 @@
{% endif %} {% endif %}
</div> </div>
{% empty %} {% empty %}
<div class="p-8 text-center bg-gray-900 rounded-lg"> <div class="p-8 text-center bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
<div class="text-gray-400"> <div class="text-gray-600 dark:text-gray-400">
<i class="mb-4 text-5xl fas fa-inbox"></i> <i class="mb-4 text-5xl fas fa-inbox"></i>
<p class="text-lg">No submissions found matching your filters.</p> <p class="text-lg">No submissions found matching your filters.</p>
</div> </div>