root/besttechfrom.eu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add dark mode variants to light-only views

Browse Source 
Forms, upvote button, modal, notifications and several pages had no
dark: classes and rendered as white blocks in dark mode.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Doar Mihai
2026-10-17 16:24:26 +03:00
co-authored by Claude Sonnet 5.5
parent 06ac14c5e6
commit 2a37695d78
17 changed files with 275 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/product-card.blade.php
+8 -8
View File
@@ -1,7 +1,7 @@
<div class="bg-white rounded-lg border border-gray-200 hover:shadow-lg transition-shadow overflow-hidden group">
<div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow overflow-hidden group">
<a href="{{ route('products.show', $product) }}" class="block">
<!-- Thumbnail -->
<div class="relative aspect-video bg-gray-100 overflow-hidden">
<div class="relative aspect-video bg-gray-100 dark:bg-gray-700 overflow-hidden">
@if($product->thumbnail_url)
<img src="{{ $product->thumbnail_url }}"
alt="{{ $product->title }}"
@@ -16,7 +16,7 @@
<!-- Category Badge -->
<div class="absolute top-2 left-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-white/90 backdrop-blur-sm text-gray-800">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-white/90 backdrop-blur-sm text-gray-800 dark:text-gray-200">
{{ $product->category->name }}
</span>
</div>
@@ -24,10 +24,10 @@
<!-- Content -->
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-primary-600">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white line-clamp-1 group-hover:text-primary-600">
{{ $product->title }}
</h3>
<p class="mt-2 text-sm text-gray-600 line-clamp-2">
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
{{ $product->description }}
</p>
@@ -39,7 +39,7 @@
@csrf
<button type="submit"
@guest disabled @endguest
class="group/upvote flex items-center space-x-1 px-3 py-1.5 rounded-md border {{ $product->isUpvotedBy(auth()->user()) ? 'border-primary-500 bg-primary-50 text-primary-700' : 'border-gray-300 bg-white text-gray-700 hover:border-primary-500 hover:bg-primary-50' }} transition-colors">
class="group/upvote flex items-center space-x-1 px-3 py-1.5 rounded-md border {{ $product->isUpvotedBy(auth()->user()) ? 'border-primary-500 bg-primary-50 dark:bg-primary-900 text-primary-700' : 'border-gray-300 bg-white text-gray-700 dark:text-gray-300 hover:border-primary-500 hover:bg-primary-50' }} transition-colors">
<svg class="h-4 w-4" fill="{{ $product->isUpvotedBy(auth()->user()) ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg>
@@ -48,7 +48,7 @@
</form>
<!-- Comments Count -->
<div class="flex items-center space-x-1 text-gray-500">
<div class="flex items-center space-x-1 text-gray-500 dark:text-gray-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
@@ -62,7 +62,7 @@
<div class="h-6 w-6 rounded-full bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white text-xs font-semibold">
{{ strtoupper(substr($product->user->name, 0, 1)) }}
</div>
<span class="text-xs text-gray-600">{{ $product->user->name }}</span>
<span class="text-xs text-gray-600 dark:text-gray-400">{{ $product->user->name }}</span>
</a>
</div>
</div>
resources/views/components/product/bookmark-button.blade.php
+1 -1
View File
@@ -34,7 +34,7 @@
<button @click="toggleBookmark()"
:disabled="loading"
:title="bookmarked ? 'Remove bookmark' : 'Bookmark this product'"
class="text-gray-400 hover:text-primary-600 transition-colors disabled:opacity-50">
class="text-gray-400 dark:text-gray-500 hover:text-primary-600 transition-colors disabled:opacity-50">
<svg class="h-5 w-5"
:class="{ 'animate-pulse': loading }"
:fill="bookmarked ? 'currentColor' : 'none'"
resources/views/components/product/plans-form.blade.php
+7 -7
View File
@@ -7,16 +7,16 @@
'period' => $p['period'] ?? 'monthly',
'description' => $p['description'] ?? '',
])->values()->all();
$input = 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
$input = 'block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
@endphp
<!-- Pricing plans -->
<div x-data="{ plans: @js($initial) }">
<input type="hidden" name="plans_present" value="1">
<label class="block text-sm font-medium text-gray-700">Pricing plans</label>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Pricing plans</label>
<div class="mt-2 space-y-3">
<template x-for="(plan, i) in plans" :key="i">
<div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 rounded-md">
<div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 dark:border-gray-700 rounded-md">
<input type="text" :name="`plans[${i}][name]`" x-model="plan.name" placeholder="Name" maxlength="100" class="{{ $input }} sm:col-span-3">
<input type="number" :name="`plans[${i}][price]`" x-model="plan.price" placeholder="Price (EUR)" min="0" max="99999" step="0.01" class="{{ $input }} sm:col-span-2">
<select :name="`plans[${i}][period]`" x-model="plan.period" class="{{ $input }} sm:col-span-2">
@@ -25,17 +25,17 @@
@endforeach
</select>
<input type="text" :name="`plans[${i}][description]`" x-model="plan.description" placeholder="Description (optional)" maxlength="255" class="{{ $input }} sm:col-span-4">
<button type="button" @click="plans.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 hover:text-red-800">Remove</button>
<button type="button" @click="plans.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 dark:text-red-400 hover:text-red-800">Remove</button>
</div>
</template>
</div>
@foreach($errors->get('plans.*') as $messages)
<p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
<p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $messages[0] }}</p>
@endforeach
@error('plans')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
<p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
<button type="button" @click="plans.push({ name: '', price: '', period: 'monthly', description: '' })"
class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50">Add plan</button>
class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">Add plan</button>
</div>
resources/views/components/product/team-form.blade.php
+13 -13
View File
@@ -10,19 +10,19 @@
'name' => $m['name'] ?? ('User #' . ($m['user_id'] ?? '')),
'role' => $m['role'] ?? '',
])->values()->all();
$input = 'block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
$input = 'block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm';
@endphp
<!-- Team members -->
@if($readonly)
<div>
<label class="block text-sm font-medium text-gray-700">Team members</label>
<p class="mt-1 text-sm text-gray-500">Only the submitter or an admin can change the team.</p>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Team members</label>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Only the submitter or an admin can change the team.</p>
<ul class="mt-2 space-y-1">
@forelse($initial as $m)
<li class="text-sm text-gray-900">{{ $m['name'] }} <span class="text-gray-500">- {{ $m['role'] }}</span></li>
<li class="text-sm text-gray-900 dark:text-white">{{ $m['name'] }} <span class="text-gray-500 dark:text-gray-400">- {{ $m['role'] }}</span></li>
@empty
<li class="text-sm text-gray-500">No team members.</li>
<li class="text-sm text-gray-500 dark:text-gray-400">No team members.</li>
@endforelse
</ul>
</div>
@@ -46,31 +46,31 @@
}
}">
<input type="hidden" name="members_present" value="1">
<label class="block text-sm font-medium text-gray-700">Team members</label>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Team members</label>
<div class="relative mt-2">
<input type="text" x-model="q" @input="search()" placeholder="Search users by name" autocomplete="off" class="{{ $input }}">
<ul x-show="results.length" x-cloak class="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg">
<ul x-show="results.length" x-cloak class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg">
<template x-for="u in results" :key="u.id">
<li><button type="button" @click="add(u)" class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50" x-text="u.name"></button></li>
<li><button type="button" @click="add(u)" class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700" x-text="u.name"></button></li>
</template>
</ul>
</div>
<div class="mt-3 space-y-3">
<template x-for="(member, i) in members" :key="member.user_id">
<div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 rounded-md items-center">
<div class="grid grid-cols-1 sm:grid-cols-12 gap-2 p-3 border border-gray-200 dark:border-gray-700 rounded-md items-center">
<input type="hidden" :name="`members[${i}][user_id]`" :value="member.user_id">
<input type="hidden" :name="`members[${i}][name]`" :value="member.name">
<span class="sm:col-span-4 text-sm text-gray-900" x-text="member.name"></span>
<span class="sm:col-span-4 text-sm text-gray-900 dark:text-white" x-text="member.name"></span>
<input type="text" :name="`members[${i}][role]`" x-model="member.role" placeholder="Role (e.g. Designer)" maxlength="100" class="{{ $input }} sm:col-span-7">
<button type="button" @click="members.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 hover:text-red-800">Remove</button>
<button type="button" @click="members.splice(i, 1)" class="sm:col-span-1 text-sm text-red-600 dark:text-red-400 hover:text-red-800">Remove</button>
</div>
</template>
</div>
@foreach($errors->get('members.*') as $messages)
<p class="mt-2 text-sm text-red-600">{{ $messages[0] }}</p>
<p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $messages[0] }}</p>
@endforeach
@error('members')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
<p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror
</div>
@endif
resources/views/components/product/upvote-button.blade.php
+2 -2
View File
@@ -48,8 +48,8 @@
<button @click="toggleUpvote()"
:disabled="loading"
:class="{
'bg-primary-100 border-primary-500 text-primary-700': upvoted,
'bg-white border-gray-300 text-gray-700 hover:border-gray-400': !upvoted
'bg-primary-100 dark:bg-primary-900 border-primary-500 text-primary-700 dark:text-primary-200': upvoted,
'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-gray-400': !upvoted
}"
class="{{ $sizeClasses }} flex flex-col items-center justify-center border-2 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">
<svg :class="{ 'animate-bounce': loading }"
resources/views/components/ui/modal.blade.php
+1 -1
View File
@@ -55,7 +55,7 @@ style="display: {{ $show ? 'block' : 'none' }};">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto {{ $maxWidthClass }}"
<div x-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto {{ $maxWidthClass }}"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
resources/views/components/ui/notification.blade.php
+4 -4
View File
@@ -35,7 +35,7 @@ aria-live="assertive">
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="transform translate-x-0 opacity-100"
x-transition:leave-end="transform translate-x-full opacity-0"
class="w-full max-w-sm bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="p-4">
<div class="flex items-start gap-3">
<div class="flex-shrink-0">
@@ -65,12 +65,12 @@ aria-live="assertive">
</template>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900" x-text="notice.title"></p>
<p class="mt-1 text-sm text-gray-500 break-words" x-text="notice.message"></p>
<p class="text-sm font-medium text-gray-900 dark:text-white" x-text="notice.title"></p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400 break-words" x-text="notice.message"></p>
</div>
<div class="flex-shrink-0">
<button @click="remove(notice.id)"
class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
class="bg-white dark:bg-gray-800 rounded-md inline-flex text-gray-400 dark:text-gray-500 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>