fix: add dark mode styling to calendar and clock icons

Ensures all calendar and time icons are visible in dark mode by adding
appropriate dark: color variants across 9 template files
This commit is contained in:
Dries Peeters
2025-10-29 07:53:23 +01:00
parent a6254b77a3
commit 7d5961e91c
9 changed files with 35 additions and 35 deletions
+7 -7
View File
@@ -218,13 +218,13 @@
</div>
<div class="p-6">
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li><i class="fas fa-database text-blue-500 mr-2"></i>Complete database</li>
<li><i class="fas fa-users text-blue-500 mr-2"></i>All users & permissions</li>
<li><i class="fas fa-clock text-blue-500 mr-2"></i>All time entries</li>
<li><i class="fas fa-project-diagram text-blue-500 mr-2"></i>Projects & tasks</li>
<li><i class="fas fa-file-invoice text-blue-500 mr-2"></i>Invoices & expenses</li>
<li><i class="fas fa-cog text-blue-500 mr-2"></i>System settings</li>
<li><i class="fas fa-file-upload text-blue-500 mr-2"></i>Uploaded files</li>
<li><i class="fas fa-database text-blue-500 dark:text-blue-400 mr-2"></i>Complete database</li>
<li><i class="fas fa-users text-blue-500 dark:text-blue-400 mr-2"></i>All users & permissions</li>
<li><i class="fas fa-clock text-blue-500 dark:text-blue-400 mr-2"></i>All time entries</li>
<li><i class="fas fa-project-diagram text-blue-500 dark:text-blue-400 mr-2"></i>Projects & tasks</li>
<li><i class="fas fa-file-invoice text-blue-500 dark:text-blue-400 mr-2"></i>Invoices & expenses</li>
<li><i class="fas fa-cog text-blue-500 dark:text-blue-400 mr-2"></i>System settings</li>
<li><i class="fas fa-file-upload text-blue-500 dark:text-blue-400 mr-2"></i>Uploaded files</li>
</ul>
</div>
</div>
@@ -177,7 +177,7 @@
<!-- Charts: Hours by Time of Day & Completion Rate -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
<h3 class="font-semibold mb-3"><i class="fas fa-clock text-sky-600 mr-2"></i>{{ _('Hours by Time of Day') }}</h3>
<h3 class="font-semibold mb-3"><i class="fas fa-clock text-sky-600 dark:text-sky-400 mr-2"></i>{{ _('Hours by Time of Day') }}</h3>
<div class="relative h-[300px]"><canvas id="hourlyChart"></canvas></div>
</div>
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
@@ -93,7 +93,7 @@
<!-- Timer -->
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
<i class="fas fa-clock mr-2 text-purple-600"></i>
<i class="fas fa-clock mr-2 text-purple-600 dark:text-purple-400"></i>
Timer
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+2 -2
View File
@@ -69,9 +69,9 @@
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600 dark:text-gray-400">Pending Approval</p>
<p class="text-3xl font-bold text-yellow-600">{{ pending_count }}</p>
<p class="text-3xl font-bold text-yellow-600 dark:text-yellow-400">{{ pending_count }}</p>
</div>
<div class="text-yellow-500 text-4xl">
<div class="text-yellow-500 dark:text-yellow-400 text-4xl">
<i class="fas fa-clock"></i>
</div>
</div>
+14 -14
View File
@@ -167,7 +167,7 @@
<p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Save frequently used time entries as templates for quick reuse. Saves project, task, and notes.') }}</p>
</div>
<div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
<h5 class="font-semibold mb-2"><i class="fas fa-calendar text-sky-600 mr-2"></i>{{ _('Calendar View') }}</h5>
<h5 class="font-semibold mb-2"><i class="fas fa-calendar text-sky-600 dark:text-sky-400 mr-2"></i>{{ _('Calendar View') }}</h5>
<p class="text-text-muted-light dark:text-text-muted-dark">{{ _('Visualize your time entries on a calendar. Drag-and-drop to reschedule or click dates to add entries.') }}</p>
</div>
</div>
@@ -182,9 +182,9 @@
<h4 class="font-semibold mb-2">{{ _('Project Information') }}</h4>
<ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
<li><i class="fas fa-tag text-primary mr-2"></i><strong>{{ _('Name') }}:</strong> {{ _('Descriptive project name') }}</li>
<li><i class="fas fa-building text-green-600 mr-2"></i><strong>{{ _('Client') }}:</strong> {{ _('Associated client organization') }}</li>
<li><i class="fas fa-align-left text-sky-600 mr-2"></i><strong>{{ _('Description') }}:</strong> {{ _('Project details and scope') }}</li>
<li><i class="fas fa-calendar text-amber-600 mr-2"></i><strong>{{ _('Status') }}:</strong> {{ _('Active, completed, or archived') }}</li>
<li><i class="fas fa-building text-green-600 dark:text-green-400 mr-2"></i><strong>{{ _('Client') }}:</strong> {{ _('Associated client organization') }}</li>
<li><i class="fas fa-align-left text-sky-600 dark:text-sky-400 mr-2"></i><strong>{{ _('Description') }}:</strong> {{ _('Project details and scope') }}</li>
<li><i class="fas fa-calendar text-amber-600 dark:text-amber-400 mr-2"></i><strong>{{ _('Status') }}:</strong> {{ _('Active, completed, or archived') }}</li>
</ul>
</div>
<div>
@@ -251,7 +251,7 @@
<p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Total and active projects') }}</p>
</div>
<div class="text-center p-4 rounded border border-border-light dark:border-border-dark">
<i class="fas fa-clock text-green-600 mb-2"></i>
<i class="fas fa-clock text-green-600 dark:text-green-400 mb-2"></i>
<h5 class="font-semibold">{{ _('Time Tracking') }}</h5>
<p class="text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Total hours worked') }}</p>
</div>
@@ -272,9 +272,9 @@
<h4 class="font-semibold mb-2">{{ _('Task Properties') }}</h4>
<ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
<li><i class="fas fa-tag text-primary mr-2"></i><strong>{{ _('Name & Description') }}:</strong> {{ _('Clear task identification') }}</li>
<li><i class="fas fa-flag text-amber-600 mr-2"></i><strong>{{ _('Priority Levels') }}:</strong> {{ _('Low, Medium, High, Urgent') }}</li>
<li><i class="fas fa-calendar text-sky-600 mr-2"></i><strong>{{ _('Due Dates') }}:</strong> {{ _('Deadline tracking') }}</li>
<li><i class="fas fa-user text-green-600 mr-2"></i><strong>{{ _('Assignment') }}:</strong> {{ _('Task ownership') }}</li>
<li><i class="fas fa-flag text-amber-600 dark:text-amber-400 mr-2"></i><strong>{{ _('Priority Levels') }}:</strong> {{ _('Low, Medium, High, Urgent') }}</li>
<li><i class="fas fa-calendar text-sky-600 dark:text-sky-400 mr-2"></i><strong>{{ _('Due Dates') }}:</strong> {{ _('Deadline tracking') }}</li>
<li><i class="fas fa-user text-green-600 dark:text-green-400 mr-2"></i><strong>{{ _('Assignment') }}:</strong> {{ _('Task ownership') }}</li>
</ul>
</div>
<div>
@@ -424,9 +424,9 @@
<div class="bg-background-light dark:bg-background-dark/40 p-4 rounded border border-border-light dark:border-border-dark">
<h4 class="font-semibold mb-1">{{ _('Time Integration') }}</h4>
<ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
<li><i class="fas fa-clock text-amber-600 mr-2"></i>{{ _('Generate from time entries') }}</li>
<li><i class="fas fa-layer-group text-sky-600 mr-2"></i>{{ _('Smart grouping by task/project') }}</li>
<li><i class="fas fa-shield-alt text-green-600 mr-2"></i>{{ _('Prevent double-billing') }}</li>
<li><i class="fas fa-clock text-amber-600 dark:text-amber-400 mr-2"></i>{{ _('Generate from time entries') }}</li>
<li><i class="fas fa-layer-group text-sky-600 dark:text-sky-400 mr-2"></i>{{ _('Smart grouping by task/project') }}</li>
<li><i class="fas fa-shield-alt text-green-600 dark:text-green-400 mr-2"></i>{{ _('Prevent double-billing') }}</li>
<li><i class="fas fa-money-bill text-primary mr-2"></i>{{ _('Use project hourly rates') }}</li>
</ul>
</div>
@@ -600,9 +600,9 @@
<h4 class="font-semibold mb-2">{{ _('General Settings') }}</h4>
<ul class="space-y-1 text-text-muted-light dark:text-text-muted-dark">
<li><i class="fas fa-globe text-primary mr-2"></i>{{ _('Timezone and locale settings') }}</li>
<li><i class="fas fa-dollar-sign text-green-600 mr-2"></i>{{ _('Currency configuration') }}</li>
<li><i class="fas fa-clock text-sky-600 mr-2"></i>{{ _('Time rounding rules') }}</li>
<li><i class="fas fa-user-plus text-amber-600 mr-2"></i>{{ _('Self-registration settings') }}</li>
<li><i class="fas fa-dollar-sign text-green-600 dark:text-green-400 mr-2"></i>{{ _('Currency configuration') }}</li>
<li><i class="fas fa-clock text-sky-600 dark:text-sky-400 mr-2"></i>{{ _('Time rounding rules') }}</li>
<li><i class="fas fa-user-plus text-amber-600 dark:text-amber-400 mr-2"></i>{{ _('Self-registration settings') }}</li>
</ul>
</div>
<div>
+1 -1
View File
@@ -45,7 +45,7 @@
{{ task.priority | capitalize }}
</span>
{% if task.due_date %}
<span class="{{ 'text-red-500' if task.is_overdue else '' }}">
<span class="{{ 'text-red-500 dark:text-red-400' if task.is_overdue else '' }}">
<i class="fas fa-calendar-alt mr-1"></i>
{{ task.due_date.strftime('%b %d') }}
</span>
+1 -1
View File
@@ -33,7 +33,7 @@
<!-- Date Range Section -->
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white flex items-center">
<i class="fas fa-calendar-alt mr-2 text-indigo-500"></i>
<i class="fas fa-calendar-alt mr-2 text-indigo-500 dark:text-indigo-400"></i>
Date Range
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+3 -3
View File
@@ -218,9 +218,9 @@
<small class="text-text-muted-light dark:text-text-muted-dark block mb-1">{{ _('Current Due Date') }}</small>
<div class="flex items-center">
<div class="rounded-full flex items-center justify-center mr-2 {% if task.is_overdue %}bg-rose-500/10{% else %}bg-slate-500/10{% endif %}" style="width: 24px; height: 24px;">
<i class="fas fa-calendar {% if task.is_overdue %}text-rose-600{% else %}text-slate-500{% endif %} fa-xs"></i>
<i class="fas fa-calendar {% if task.is_overdue %}text-rose-600 dark:text-rose-400{% else %}text-slate-500 dark:text-slate-400{% endif %} fa-xs"></i>
</div>
<span class="{% if task.is_overdue %}text-rose-600 font-semibold{% endif %}">
<span class="{% if task.is_overdue %}text-rose-600 dark:text-rose-400 font-semibold{% endif %}">
{{ task.due_date.strftime('%B %d, %Y') }}
</span>
</div>
@@ -232,7 +232,7 @@
<small class="text-text-muted-light dark:text-text-muted-dark block mb-1">{{ _('Current Estimate') }}</small>
<div class="flex items-center">
<div class="rounded-full flex items-center justify-center mr-2 bg-amber-500/10" style="width: 24px; height: 24px;">
<i class="fas fa-clock text-amber-600 fa-xs"></i>
<i class="fas fa-clock text-amber-600 dark:text-amber-400 fa-xs"></i>
</div>
<span>{{ task.estimated_hours }} {{ _('hours') }}</span>
</div>
+5 -5
View File
@@ -40,7 +40,7 @@
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('Actual Hours') }}</h3>
<i class="fas fa-clock text-2xl text-green-500"></i>
<i class="fas fa-clock text-2xl text-green-500 dark:text-green-400"></i>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ goal.actual_hours }}h</p>
</div>
@@ -49,13 +49,13 @@
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">{{ _('Status') }}</h3>
{% if goal.status == 'completed' %}
<i class="fas fa-check-circle text-2xl text-green-500"></i>
<i class="fas fa-check-circle text-2xl text-green-500 dark:text-green-400"></i>
{% elif goal.status == 'active' %}
<i class="fas fa-clock text-2xl text-blue-500"></i>
<i class="fas fa-clock text-2xl text-blue-500 dark:text-blue-400"></i>
{% elif goal.status == 'failed' %}
<i class="fas fa-times-circle text-2xl text-red-500"></i>
<i class="fas fa-times-circle text-2xl text-red-500 dark:text-red-400"></i>
{% else %}
<i class="fas fa-ban text-2xl text-gray-500"></i>
<i class="fas fa-ban text-2xl text-gray-500 dark:text-gray-400"></i>
{% endif %}
</div>
{% if goal.status == 'completed' %}