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/auth/passwords/confirm.blade.php
+7 -7
View File
@@ -4,26 +4,26 @@
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8"> <div class="max-w-md w-full space-y-8">
<div> <div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
{{ __('Confirm Password') }} {{ __('Confirm Password') }}
</h2> </h2>
<p class="mt-2 text-center text-sm text-gray-600"> <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
{{ __('Please confirm your password before continuing.') }} {{ __('Please confirm your password before continuing.') }}
</p> </p>
</div> </div>
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
<form method="POST" action="{{ route('password.confirm') }}" class="space-y-6"> <form method="POST" action="{{ route('password.confirm') }}" class="space-y-6">
@csrf @csrf
<div> <div>
<label for="password" class="block text-sm font-medium text-gray-700"> <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
{{ __('Password') }} {{ __('Password') }}
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input id="password" type="password" name="password" required autocomplete="current-password" <input id="password" type="password" name="password" required autocomplete="current-password"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('password') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('password') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('password') @error('password')
<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 @enderror
</div> </div>
</div> </div>
@@ -37,7 +37,7 @@
@if (Route::has('password.request')) @if (Route::has('password.request'))
<div class="text-sm text-center"> <div class="text-sm text-center">
<a href="{{ route('password.request') }}" class="font-medium text-primary-600 hover:text-primary-500"> <a href="{{ route('password.request') }}" class="font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500">
{{ __('Forgot Your Password?') }} {{ __('Forgot Your Password?') }}
</a> </a>
</div> </div>
resources/views/auth/passwords/email.blade.php
+9 -9
View File
@@ -4,16 +4,16 @@
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8"> <div class="max-w-md w-full space-y-8">
<div> <div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
{{ __('Reset Password') }} {{ __('Reset Password') }}
</h2> </h2>
<p class="mt-2 text-center text-sm text-gray-600"> <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
{{ __('Enter your email address and we will send you a password reset link.') }} {{ __('Enter your email address and we will send you a password reset link.') }}
</p> </p>
</div> </div>
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
@if (session('status')) @if (session('status'))
<div class="mb-4 rounded-md bg-green-50 p-4"> <div class="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -21,7 +21,7 @@
</svg> </svg>
</div> </div>
<div class="ml-3"> <div class="ml-3">
<p class="text-sm font-medium text-green-800"> <p class="text-sm font-medium text-green-800 dark:text-green-200">
{{ session('status') }} {{ session('status') }}
</p> </p>
</div> </div>
@@ -33,14 +33,14 @@
@csrf @csrf
<div> <div>
<label for="email" class="block text-sm font-medium text-gray-700"> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
{{ __('Email Address') }} {{ __('Email Address') }}
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus <input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('email') @error('email')
<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 @enderror
</div> </div>
</div> </div>
@@ -54,7 +54,7 @@
@if (Route::has('login')) @if (Route::has('login'))
<div class="text-sm text-center"> <div class="text-sm text-center">
<a href="{{ route('login') }}" class="font-medium text-primary-600 hover:text-primary-500"> <a href="{{ route('login') }}" class="font-medium text-primary-600 dark:text-primary-400 hover:text-primary-500">
{{ __('Back to Login') }} {{ __('Back to Login') }}
</a> </a>
</div> </div>
resources/views/auth/verify.blade.php
+5 -5
View File
@@ -4,13 +4,13 @@
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8"> <div class="max-w-md w-full space-y-8">
<div> <div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
{{ __('Verify Your Email Address') }} {{ __('Verify Your Email Address') }}
</h2> </h2>
</div> </div>
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
@if (session('resent')) @if (session('resent'))
<div class="mb-4 rounded-md bg-green-50 p-4"> <div class="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -18,7 +18,7 @@
</svg> </svg>
</div> </div>
<div class="ml-3"> <div class="ml-3">
<p class="text-sm font-medium text-green-800"> <p class="text-sm font-medium text-green-800 dark:text-green-200">
{{ __('A fresh verification link has been sent to your email address.') }} {{ __('A fresh verification link has been sent to your email address.') }}
</p> </p>
</div> </div>
@@ -26,7 +26,7 @@
</div> </div>
@endif @endif
<div class="text-sm text-gray-600 mb-6"> <div class="text-sm text-gray-600 dark:text-gray-400 mb-6">
<p>{{ __('Before proceeding, please check your email for a verification link.') }}</p> <p>{{ __('Before proceeding, please check your email for a verification link.') }}</p>
<p class="mt-2">{{ __('If you did not receive the email') }}</p> <p class="mt-2">{{ __('If you did not receive the email') }}</p>
</div> </div>
resources/views/bookmarks/index.blade.php
+8 -8
View File
@@ -1,13 +1,13 @@
@extends('layouts.app') @extends('layouts.app')
@section('content') @section('content')
<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200"> <div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4"> <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
My Bookmarks My Bookmarks
</h1> </h1>
<p class="text-lg text-gray-600"> <p class="text-lg text-gray-600 dark:text-gray-400">
Products you've saved for later Products you've saved for later
</p> </p>
</div> </div>
@@ -18,8 +18,8 @@
<!-- Results Summary --> <!-- Results Summary -->
@if($bookmarks->total() > 0) @if($bookmarks->total() > 0)
<div class="mb-6"> <div class="mb-6">
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600 dark:text-gray-400">
You have <span class="font-semibold text-gray-900">{{ $bookmarks->total() }}</span> bookmarked {{ Str::plural('product', $bookmarks->total()) }} You have <span class="font-semibold text-gray-900 dark:text-white">{{ $bookmarks->total() }}</span> bookmarked {{ Str::plural('product', $bookmarks->total()) }}
</p> </p>
</div> </div>
@endif @endif
@@ -32,11 +32,11 @@
<!-- Empty State --> <!-- Empty State -->
<div class="col-span-full"> <div class="col-span-full">
<div class="text-center py-16"> <div class="text-center py-16">
<svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
</svg> </svg>
<h3 class="text-lg font-medium text-gray-900 mb-2">No bookmarks yet</h3> <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No bookmarks yet</h3>
<p class="text-gray-600 mb-6"> <p class="text-gray-600 dark:text-gray-400 mb-6">
Start bookmarking products to save them for later! Start bookmarking products to save them for later!
</p> </p>
<a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
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"> <a href="{{ route('products.show', $product) }}" class="block">
<!-- Thumbnail --> <!-- 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) @if($product->thumbnail_url)
<img src="{{ $product->thumbnail_url }}" <img src="{{ $product->thumbnail_url }}"
alt="{{ $product->title }}" alt="{{ $product->title }}"
@@ -16,7 +16,7 @@
<!-- Category Badge --> <!-- Category Badge -->
<div class="absolute top-2 left-2"> <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 }} {{ $product->category->name }}
</span> </span>
</div> </div>
@@ -24,10 +24,10 @@
<!-- Content --> <!-- Content -->
<div class="p-4"> <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 }} {{ $product->title }}
</h3> </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 }} {{ $product->description }}
</p> </p>
@@ -39,7 +39,7 @@
@csrf @csrf
<button type="submit" <button type="submit"
@guest disabled @endguest @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"> <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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg> </svg>
@@ -48,7 +48,7 @@
</form> </form>
<!-- Comments Count --> <!-- 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"> <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> <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> </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"> <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)) }} {{ strtoupper(substr($product->user->name, 0, 1)) }}
</div> </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> </a>
</div> </div>
</div> </div>
resources/views/components/product/bookmark-button.blade.php
+1 -1
View File
@@ -34,7 +34,7 @@
<button @click="toggleBookmark()" <button @click="toggleBookmark()"
:disabled="loading" :disabled="loading"
:title="bookmarked ? 'Remove bookmark' : 'Bookmark this product'" :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" <svg class="h-5 w-5"
:class="{ 'animate-pulse': loading }" :class="{ 'animate-pulse': loading }"
:fill="bookmarked ? 'currentColor' : 'none'" :fill="bookmarked ? 'currentColor' : 'none'"
resources/views/components/product/plans-form.blade.php
+7 -7
View File
@@ -7,16 +7,16 @@
'period' => $p['period'] ?? 'monthly', 'period' => $p['period'] ?? 'monthly',
'description' => $p['description'] ?? '', 'description' => $p['description'] ?? '',
])->values()->all(); ])->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 @endphp
<!-- Pricing plans --> <!-- Pricing plans -->
<div x-data="{ plans: @js($initial) }"> <div x-data="{ plans: @js($initial) }">
<input type="hidden" name="plans_present" value="1"> <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"> <div class="mt-2 space-y-3">
<template x-for="(plan, i) in plans" :key="i"> <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="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"> <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"> <select :name="`plans[${i}][period]`" x-model="plan.period" class="{{ $input }} sm:col-span-2">
@@ -25,17 +25,17 @@
@endforeach @endforeach
</select> </select>
<input type="text" :name="`plans[${i}][description]`" x-model="plan.description" placeholder="Description (optional)" maxlength="255" class="{{ $input }} sm:col-span-4"> <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> </div>
</template> </template>
</div> </div>
@foreach($errors->get('plans.*') as $messages) @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 @endforeach
@error('plans') @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 @enderror
<button type="button" @click="plans.push({ name: '', price: '', period: 'monthly', description: '' })" <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> </div>
resources/views/components/product/team-form.blade.php
+13 -13
View File
@@ -10,19 +10,19 @@
'name' => $m['name'] ?? ('User #' . ($m['user_id'] ?? '')), 'name' => $m['name'] ?? ('User #' . ($m['user_id'] ?? '')),
'role' => $m['role'] ?? '', 'role' => $m['role'] ?? '',
])->values()->all(); ])->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 @endphp
<!-- Team members --> <!-- Team members -->
@if($readonly) @if($readonly)
<div> <div>
<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>
<p class="mt-1 text-sm text-gray-500">Only the submitter or an admin can change the team.</p> <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"> <ul class="mt-2 space-y-1">
@forelse($initial as $m) @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 @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 @endforelse
</ul> </ul>
</div> </div>
@@ -46,31 +46,31 @@
} }
}"> }">
<input type="hidden" name="members_present" value="1"> <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"> <div class="relative mt-2">
<input type="text" x-model="q" @input="search()" placeholder="Search users by name" autocomplete="off" class="{{ $input }}"> <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"> <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> </template>
</ul> </ul>
</div> </div>
<div class="mt-3 space-y-3"> <div class="mt-3 space-y-3">
<template x-for="(member, i) in members" :key="member.user_id"> <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}][user_id]`" :value="member.user_id">
<input type="hidden" :name="`members[${i}][name]`" :value="member.name"> <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"> <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> </div>
</template> </template>
</div> </div>
@foreach($errors->get('members.*') as $messages) @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 @endforeach
@error('members') @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 @enderror
</div> </div>
@endif @endif
resources/views/components/product/upvote-button.blade.php
+2 -2
View File
@@ -48,8 +48,8 @@
<button @click="toggleUpvote()" <button @click="toggleUpvote()"
:disabled="loading" :disabled="loading"
:class="{ :class="{
'bg-primary-100 border-primary-500 text-primary-700': upvoted, 'bg-primary-100 dark:bg-primary-900 border-primary-500 text-primary-700 dark:text-primary-200': upvoted,
'bg-white border-gray-300 text-gray-700 hover:border-gray-400': !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"> 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 }" <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 class="absolute inset-0 bg-gray-500 opacity-75"></div>
</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="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 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" 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="transition ease-in duration-200"
x-transition:leave-start="transform translate-x-0 opacity-100" x-transition:leave-start="transform translate-x-0 opacity-100"
x-transition:leave-end="transform translate-x-full opacity-0" 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="p-4">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
@@ -65,12 +65,12 @@ aria-live="assertive">
</template> </template>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900" x-text="notice.title"></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 break-words" x-text="notice.message"></p> <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 break-words" x-text="notice.message"></p>
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<button @click="remove(notice.id)" <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> <span class="sr-only">Close</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> <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> <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>
resources/views/products/create.blade.php
+50 -50
View File
@@ -3,19 +3,19 @@
@section('content') @section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Submit a Product</h1> <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Submit a Product</h1>
<p class="mt-2 text-sm text-gray-600">Share your EU-based tech product with the community</p> <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Share your EU-based tech product with the community</p>
</div> </div>
<div class="bg-white shadow-sm rounded-lg"> <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
<div class="px-4 py-5 sm:p-6"> <div class="px-4 py-5 sm:p-6">
<form method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data" class="space-y-6"> <form method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data" class="space-y-6">
@csrf @csrf
<!-- Title --> <!-- Title -->
<div> <div>
<label for="title" class="block text-sm font-medium text-gray-700"> <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Product Title <span class="text-red-600">*</span> Product Title <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input type="text" <input type="text"
@@ -25,18 +25,18 @@
required required
maxlength="255" maxlength="255"
placeholder="e.g., My Awesome Product" placeholder="e.g., My Awesome Product"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('title') @error('title')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">A catchy, descriptive title for your product.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">A catchy, descriptive title for your product.</p>
</div> </div>
</div> </div>
<!-- Description --> <!-- Description -->
<div> <div>
<label for="description" class="block text-sm font-medium text-gray-700"> <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Description <span class="text-red-600">*</span> Description <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<textarea id="description" <textarea id="description"
@@ -44,18 +44,18 @@
rows="5" rows="5"
required required
placeholder="Tell us about your product..." placeholder="Tell us about your product..."
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">{{ old('description') }}</textarea> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">{{ old('description') }}</textarea>
@error('description') @error('description')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Provide a detailed description of your product (what it does, key features, etc.).</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Provide a detailed description of your product (what it does, key features, etc.).</p>
</div> </div>
</div> </div>
<!-- Website URL --> <!-- Website URL -->
<div> <div>
<label for="website_url" class="block text-sm font-medium text-gray-700"> <label for="website_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Website URL <span class="text-red-600">*</span> Website URL <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input type="url" <input type="url"
@@ -64,24 +64,24 @@
value="{{ old('website_url') }}" value="{{ old('website_url') }}"
required required
placeholder="https://example.com" placeholder="https://example.com"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('website_url') @error('website_url')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">The full URL to your product's website or landing page.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">The full URL to your product's website or landing page.</p>
</div> </div>
</div> </div>
<!-- Category --> <!-- Category -->
<div> <div>
<label for="category_id" class="block text-sm font-medium text-gray-700"> <label for="category_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Category <span class="text-red-600">*</span> Category <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<select id="category_id" <select id="category_id"
name="category_id" name="category_id"
required required
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 dark:text-red-200 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
<option value="">Select a category...</option> <option value="">Select a category...</option>
@foreach($categories as $category) @foreach($categories as $category)
<option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}> <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
@@ -90,64 +90,64 @@
@endforeach @endforeach
</select> </select>
@error('category_id') @error('category_id')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Choose the category that best fits your product.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Choose the category that best fits your product.</p>
</div> </div>
</div> </div>
<!-- Tags --> <!-- Tags -->
@if($tags->count() > 0) @if($tags->count() > 0)
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Tags Tags
</label> </label>
<div class="mt-1 space-y-2"> <div class="mt-1 space-y-2">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
@foreach($tags as $tag) @foreach($tags as $tag)
<label class="relative flex items-start p-3 border border-gray-300 rounded-md cursor-pointer hover:bg-gray-50 transition-colors"> <label class="relative flex items-start p-3 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center h-5"> <div class="flex items-center h-5">
<input type="checkbox" <input type="checkbox"
name="tags[]" name="tags[]"
value="{{ $tag->id }}" value="{{ $tag->id }}"
{{ is_array(old('tags')) && in_array($tag->id, old('tags')) ? 'checked' : '' }} {{ is_array(old('tags')) && in_array($tag->id, old('tags')) ? 'checked' : '' }}
class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"> class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
</div> </div>
<div class="ml-3 flex-1"> <div class="ml-3 flex-1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span> <span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span>
<span class="text-sm font-medium text-gray-900">{{ $tag->name }}</span> <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $tag->name }}</span>
</div> </div>
@if($tag->description) @if($tag->description)
<p class="text-xs text-gray-500 mt-1">{{ $tag->description }}</p> <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $tag->description }}</p>
@endif @endif
</div> </div>
</label> </label>
@endforeach @endforeach
</div> </div>
@error('tags') @error('tags')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Select all tags that apply to your product.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Select all tags that apply to your product.</p>
</div> </div>
</div> </div>
@endif @endif
<!-- Badges --> <!-- Badges -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Badges Badges
</label> </label>
<div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3"> <div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
@foreach(\App\Models\Product::BADGES as $key => $label) @foreach(\App\Models\Product::BADGES as $key => $label)
<label class="flex items-center p-3 border border-gray-300 rounded-md"> <label class="flex items-center p-3 border border-gray-300 dark:border-gray-600 rounded-md">
<input type="hidden" name="{{ $key }}" value="0"> <input type="hidden" name="{{ $key }}" value="0">
<input type="checkbox" <input type="checkbox"
name="{{ $key }}" name="{{ $key }}"
value="1" value="1"
{{ old($key, false) ? 'checked' : '' }} {{ old($key, false) ? 'checked' : '' }}
class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"> class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
<span class="ml-2 text-sm text-gray-900">{{ $label }}</span> <span class="ml-2 text-sm text-gray-900 dark:text-white">{{ $label }}</span>
</label> </label>
@endforeach @endforeach
</div> </div>
@@ -155,7 +155,7 @@
<!-- Thumbnail --> <!-- Thumbnail -->
<div> <div>
<label for="thumbnail" class="block text-sm font-medium text-gray-700"> <label for="thumbnail" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Product Thumbnail Product Thumbnail
</label> </label>
<div class="mt-1"> <div class="mt-1">
@@ -163,25 +163,25 @@
id="thumbnail" id="thumbnail"
name="thumbnail" name="thumbnail"
accept="image/*" accept="image/*"
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 @enderror"> class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 dark:border-red-700 @enderror">
@error('thumbnail') @error('thumbnail')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
</div> </div>
</div> </div>
<!-- Image Preview --> <!-- Image Preview -->
<div id="imagePreview" class="hidden"> <div id="imagePreview" class="hidden">
<label class="block text-sm font-medium text-gray-700 mb-2">Preview:</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preview:</label>
<div class="mt-1"> <div class="mt-1">
<img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 shadow-sm"> <img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm">
</div> </div>
</div> </div>
<!-- Screenshots --> <!-- Screenshots -->
<div x-data="{ previews: [] }"> <div x-data="{ previews: [] }">
<label for="screenshots" class="block text-sm font-medium text-gray-700"> <label for="screenshots" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Screenshots Screenshots
</label> </label>
<div class="mt-1"> <div class="mt-1">
@@ -191,17 +191,17 @@
accept="image/*" accept="image/*"
multiple multiple
@change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))" @change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))"
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"> class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
@error('screenshots') @error('screenshots')
<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 @enderror
@foreach($errors->get('screenshots.*') as $messages) @foreach($errors->get('screenshots.*') 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 @endforeach
<p class="mt-2 text-sm text-gray-500">Add several images (JPEG, PNG, or GIF, max 2MB each).</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
<div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none"> <div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none">
<template x-for="src in previews" :key="src"> <template x-for="src in previews" :key="src">
<img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300"> <img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300 dark:border-gray-600">
</template> </template>
</div> </div>
</div> </div>
@@ -212,7 +212,7 @@
<x-product.team-form /> <x-product.team-form />
<!-- Info Alert --> <!-- Info Alert -->
<div class="rounded-md bg-blue-50 p-4"> <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 p-4">
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -220,7 +220,7 @@
</svg> </svg>
</div> </div>
<div class="ml-3 flex-1"> <div class="ml-3 flex-1">
<p class="text-sm text-blue-700"> <p class="text-sm text-blue-700 dark:text-blue-300">
<strong>Note:</strong> Your product will be reviewed by our moderators before it appears on the site. <strong>Note:</strong> Your product will be reviewed by our moderators before it appears on the site.
</p> </p>
</div> </div>
@@ -228,9 +228,9 @@
</div> </div>
<!-- Submit Buttons --> <!-- Submit Buttons -->
<div class="flex items-center justify-between pt-5 border-t border-gray-200"> <div class="flex items-center justify-between pt-5 border-t border-gray-200 dark:border-gray-700">
<a href="{{ route('products.index') }}" <a href="{{ route('products.index') }}"
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
Cancel Cancel
</a> </a>
<button type="submit" <button type="submit"
resources/views/products/edit.blade.php
+57 -57
View File
@@ -3,11 +3,11 @@
@section('content') @section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Edit Product</h1> <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Edit Product</h1>
<p class="mt-2 text-sm text-gray-600">Update your product information and details</p> <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Update your product information and details</p>
</div> </div>
<div class="bg-white shadow-sm rounded-lg"> <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
<div class="px-4 py-5 sm:p-6"> <div class="px-4 py-5 sm:p-6">
<form method="POST" action="{{ route('products.update', $product) }}" enctype="multipart/form-data" class="space-y-6"> <form method="POST" action="{{ route('products.update', $product) }}" enctype="multipart/form-data" class="space-y-6">
@csrf @csrf
@@ -15,8 +15,8 @@
<!-- Title --> <!-- Title -->
<div> <div>
<label for="title" class="block text-sm font-medium text-gray-700"> <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Product Title <span class="text-red-600">*</span> Product Title <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input type="text" <input type="text"
@@ -26,18 +26,18 @@
required required
maxlength="255" maxlength="255"
placeholder="e.g., My Awesome Product" placeholder="e.g., My Awesome Product"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('title') @error('title')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">A catchy, descriptive title for your product.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">A catchy, descriptive title for your product.</p>
</div> </div>
</div> </div>
<!-- Description --> <!-- Description -->
<div> <div>
<label for="description" class="block text-sm font-medium text-gray-700"> <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Description <span class="text-red-600">*</span> Description <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<textarea id="description" <textarea id="description"
@@ -45,18 +45,18 @@
rows="5" rows="5"
required required
placeholder="Tell us about your product..." placeholder="Tell us about your product..."
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">{{ old('description', $product->description) }}</textarea> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">{{ old('description', $product->description) }}</textarea>
@error('description') @error('description')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Provide a detailed description of your product (what it does, key features, etc.).</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Provide a detailed description of your product (what it does, key features, etc.).</p>
</div> </div>
</div> </div>
<!-- Website URL --> <!-- Website URL -->
<div> <div>
<label for="website_url" class="block text-sm font-medium text-gray-700"> <label for="website_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Website URL <span class="text-red-600">*</span> Website URL <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input type="url" <input type="url"
@@ -65,24 +65,24 @@
value="{{ old('website_url', $product->website_url) }}" value="{{ old('website_url', $product->website_url) }}"
required required
placeholder="https://example.com" placeholder="https://example.com"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('website_url') @error('website_url')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">The full URL to your product's website or landing page.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">The full URL to your product's website or landing page.</p>
</div> </div>
</div> </div>
<!-- Category --> <!-- Category -->
<div> <div>
<label for="category_id" class="block text-sm font-medium text-gray-700"> <label for="category_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Category <span class="text-red-600">*</span> Category <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<select id="category_id" <select id="category_id"
name="category_id" name="category_id"
required required
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 dark:text-red-200 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
<option value="">Select a category...</option> <option value="">Select a category...</option>
@foreach($categories as $category) @foreach($categories as $category)
<option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}> <option value="{{ $category->id }}" {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>
@@ -91,16 +91,16 @@
@endforeach @endforeach
</select> </select>
@error('category_id') @error('category_id')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Choose the category that best fits your product.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Choose the category that best fits your product.</p>
</div> </div>
</div> </div>
<!-- Tags --> <!-- Tags -->
@if($tags->count() > 0) @if($tags->count() > 0)
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Tags Tags
</label> </label>
<div class="mt-1 space-y-2"> <div class="mt-1 space-y-2">
@@ -111,30 +111,30 @@
? in_array($tag->id, old('tags')) ? in_array($tag->id, old('tags'))
: $product->tags->contains($tag->id); : $product->tags->contains($tag->id);
@endphp @endphp
<label class="relative flex items-start p-3 border border-gray-300 rounded-md cursor-pointer hover:bg-gray-50 transition-colors"> <label class="relative flex items-start p-3 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center h-5"> <div class="flex items-center h-5">
<input type="checkbox" <input type="checkbox"
name="tags[]" name="tags[]"
value="{{ $tag->id }}" value="{{ $tag->id }}"
{{ $isChecked ? 'checked' : '' }} {{ $isChecked ? 'checked' : '' }}
class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"> class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
</div> </div>
<div class="ml-3 flex-1"> <div class="ml-3 flex-1">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span> <span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span>
<span class="text-sm font-medium text-gray-900">{{ $tag->name }}</span> <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $tag->name }}</span>
</div> </div>
@if($tag->description) @if($tag->description)
<p class="text-xs text-gray-500 mt-1">{{ $tag->description }}</p> <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $tag->description }}</p>
@endif @endif
</div> </div>
</label> </label>
@endforeach @endforeach
</div> </div>
@error('tags') @error('tags')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Select all tags that apply to your product.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Select all tags that apply to your product.</p>
</div> </div>
</div> </div>
@endif @endif
@@ -145,43 +145,43 @@
<!-- Badges --> <!-- Badges -->
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2"> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Badges Badges
</label> </label>
<div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3"> <div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
@foreach(\App\Models\Product::BADGES as $key => $label) @foreach(\App\Models\Product::BADGES as $key => $label)
<label class="flex items-center p-3 border border-gray-300 rounded-md"> <label class="flex items-center p-3 border border-gray-300 dark:border-gray-600 rounded-md">
<input type="hidden" name="{{ $key }}" value="0"> <input type="hidden" name="{{ $key }}" value="0">
<input type="checkbox" <input type="checkbox"
name="{{ $key }}" name="{{ $key }}"
value="1" value="1"
{{ old($key, $product->{$key}) ? 'checked' : '' }} {{ old($key, $product->{$key}) ? 'checked' : '' }}
{{ $badgesLocked ? 'disabled' : '' }} {{ $badgesLocked ? 'disabled' : '' }}
class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded"> class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
<span class="ml-2 text-sm text-gray-900">{{ $label }}</span> <span class="ml-2 text-sm text-gray-900 dark:text-white">{{ $label }}</span>
</label> </label>
@endforeach @endforeach
</div> </div>
@if($badgesLocked) @if($badgesLocked)
<p class="mt-2 text-sm text-gray-500">Locked after approval</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Locked after approval</p>
@endif @endif
</div> </div>
<!-- Current Thumbnail --> <!-- Current Thumbnail -->
@if($product->thumbnail_url) @if($product->thumbnail_url)
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2">Current Thumbnail:</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Thumbnail:</label>
<div class="mt-1"> <div class="mt-1">
<img src="{{ $product->thumbnail_url }}" <img src="{{ $product->thumbnail_url }}"
alt="{{ $product->title }}" alt="{{ $product->title }}"
class="max-w-xs rounded-lg border border-gray-300 shadow-sm"> class="max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm">
</div> </div>
</div> </div>
@endif @endif
<!-- New Thumbnail --> <!-- New Thumbnail -->
<div> <div>
<label for="thumbnail" class="block text-sm font-medium text-gray-700"> <label for="thumbnail" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
{{ $product->thumbnail_url ? 'Replace Thumbnail' : 'Product Thumbnail' }} {{ $product->thumbnail_url ? 'Replace Thumbnail' : 'Product Thumbnail' }}
</label> </label>
<div class="mt-1"> <div class="mt-1">
@@ -189,32 +189,32 @@
id="thumbnail" id="thumbnail"
name="thumbnail" name="thumbnail"
accept="image/*" accept="image/*"
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 @enderror"> class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 dark:border-red-700 @enderror">
@error('thumbnail') @error('thumbnail')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
</div> </div>
</div> </div>
<!-- Image Preview --> <!-- Image Preview -->
<div id="imagePreview" class="hidden"> <div id="imagePreview" class="hidden">
<label class="block text-sm font-medium text-gray-700 mb-2">New Preview:</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Preview:</label>
<div class="mt-1"> <div class="mt-1">
<img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 shadow-sm"> <img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm">
</div> </div>
</div> </div>
@if($product->screenshots->isNotEmpty()) @if($product->screenshots->isNotEmpty())
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-2">Current Screenshots:</label> <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Screenshots:</label>
<div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3"> <div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
@foreach($product->screenshots as $shot) @foreach($product->screenshots as $shot)
<label class="block"> <label class="block">
<img src="{{ $shot->url }}" alt="" class="h-24 w-full object-cover rounded border border-gray-300"> <img src="{{ $shot->url }}" alt="" class="h-24 w-full object-cover rounded border border-gray-300 dark:border-gray-600">
<span class="mt-1 flex items-center text-sm text-gray-700"> <span class="mt-1 flex items-center text-sm text-gray-700 dark:text-gray-300">
<input type="checkbox" name="remove_screenshots[]" value="{{ $shot->id }}" <input type="checkbox" name="remove_screenshots[]" value="{{ $shot->id }}"
class="h-4 w-4 text-primary-600 border-gray-300 rounded"> class="h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
<span class="ml-2">Remove</span> <span class="ml-2">Remove</span>
</span> </span>
</label> </label>
@@ -225,7 +225,7 @@
<!-- Screenshots --> <!-- Screenshots -->
<div x-data="{ previews: [] }"> <div x-data="{ previews: [] }">
<label for="screenshots" class="block text-sm font-medium text-gray-700"> <label for="screenshots" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Screenshots Screenshots
</label> </label>
<div class="mt-1"> <div class="mt-1">
@@ -235,17 +235,17 @@
accept="image/*" accept="image/*"
multiple multiple
@change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))" @change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))"
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"> class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
@error('screenshots') @error('screenshots')
<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 @enderror
@foreach($errors->get('screenshots.*') as $messages) @foreach($errors->get('screenshots.*') 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 @endforeach
<p class="mt-2 text-sm text-gray-500">Add several images (JPEG, PNG, or GIF, max 2MB each).</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
<div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none"> <div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none">
<template x-for="src in previews" :key="src"> <template x-for="src in previews" :key="src">
<img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300"> <img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300 dark:border-gray-600">
</template> </template>
</div> </div>
</div> </div>
@@ -256,7 +256,7 @@
<x-product.team-form :members="$product->members" :readonly="! (auth()->id() === $product->user_id || auth()->user()->isAdmin())" /> <x-product.team-form :members="$product->members" :readonly="! (auth()->id() === $product->user_id || auth()->user()->isAdmin())" />
<!-- Info Alert --> <!-- Info Alert -->
<div class="rounded-md bg-blue-50 p-4"> <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 p-4">
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -264,7 +264,7 @@
</svg> </svg>
</div> </div>
<div class="ml-3 flex-1"> <div class="ml-3 flex-1">
<p class="text-sm text-blue-700"> <p class="text-sm text-blue-700 dark:text-blue-300">
<strong>Note:</strong> Changes to your product may need to be reviewed by moderators before appearing on the site. <strong>Note:</strong> Changes to your product may need to be reviewed by moderators before appearing on the site.
</p> </p>
</div> </div>
@@ -272,9 +272,9 @@
</div> </div>
<!-- Submit Buttons --> <!-- Submit Buttons -->
<div class="flex items-center justify-between pt-5 border-t border-gray-200"> <div class="flex items-center justify-between pt-5 border-t border-gray-200 dark:border-gray-700">
<a href="{{ route('products.show', $product) }}" <a href="{{ route('products.show', $product) }}"
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
Cancel Cancel
</a> </a>
<button type="submit" <button type="submit"
resources/views/products/index.blade.php
+26 -26
View File
@@ -6,13 +6,13 @@
@section('content') @section('content')
<!-- Hero Section --> <!-- Hero Section -->
<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200"> <div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
<div class="text-center max-w-3xl mx-auto"> <div class="text-center max-w-3xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4"> <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Discover the best tech from Europe Discover the best tech from Europe
</h1> </h1>
<p class="text-lg text-gray-600 mb-8"> <p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
Find amazing products built by European makers and companies Find amazing products built by European makers and companies
</p> </p>
@@ -24,7 +24,7 @@
name="search" name="search"
value="{{ request('search') }}" value="{{ request('search') }}"
placeholder="Search for products..." placeholder="Search for products..."
class="w-full px-6 py-4 text-lg border-2 border-gray-300 rounded-full focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all duration-200"> class="w-full px-6 py-4 text-lg border-2 border-gray-300 dark:border-gray-600 rounded-full focus:border-primary-500 focus:ring-2 focus:ring-primary-200 transition-all duration-200 dark:bg-gray-700 dark:text-white">
<button type="submit" <button type="submit"
class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary-600 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition-colors"> class="absolute right-2 top-1/2 -translate-y-1/2 bg-primary-600 text-white px-6 py-2 rounded-full hover:bg-primary-700 transition-colors">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -50,7 +50,7 @@
type="button" type="button"
class="w-full inline-flex items-center justify-between px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> class="w-full inline-flex items-center justify-between px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<span class="flex items-center"> <span class="flex items-center">
<svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg> </svg>
Filters & Sort Filters & Sort
@@ -66,21 +66,21 @@
class="lg:flex lg:items-end lg:gap-4 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-4"> class="lg:flex lg:items-end lg:gap-4 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-4">
<!-- Search (hidden on desktop as it's in hero) --> <!-- Search (hidden on desktop as it's in hero) -->
<div class="lg:hidden sm:col-span-2"> <div class="lg:hidden sm:col-span-2">
<label for="mobile-search" class="block text-sm font-medium text-gray-700 mb-2">Search</label> <label for="mobile-search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search</label>
<input type="text" <input type="text"
id="mobile-search" id="mobile-search"
name="search" name="search"
value="{{ request('search') }}" value="{{ request('search') }}"
placeholder="Search products..." placeholder="Search products..."
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
</div> </div>
<!-- Category Filter --> <!-- Category Filter -->
<div class="lg:flex-1"> <div class="lg:flex-1">
<label for="category" class="block text-sm font-medium text-gray-700 mb-2">Category</label> <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
<select name="category" <select name="category"
id="category" id="category"
class="appearance-none 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"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
<option value="">All Categories</option> <option value="">All Categories</option>
@foreach($categories as $category) @foreach($categories as $category)
<option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}> <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
@@ -92,10 +92,10 @@
<!-- Date Range Filter --> <!-- Date Range Filter -->
<div class="lg:flex-1"> <div class="lg:flex-1">
<label for="date_range" class="block text-sm font-medium text-gray-700 mb-2">Time Period</label> <label for="date_range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Time Period</label>
<select name="date_range" <select name="date_range"
id="date_range" id="date_range"
class="appearance-none 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"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
<option value="">All Time</option> <option value="">All Time</option>
<option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Today</option> <option value="today" {{ request('date_range') === 'today' ? 'selected' : '' }}>Today</option>
<option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>This Week</option> <option value="week" {{ request('date_range') === 'week' ? 'selected' : '' }}>This Week</option>
@@ -106,10 +106,10 @@
<!-- Sort By --> <!-- Sort By -->
<div class="lg:flex-1"> <div class="lg:flex-1">
<label for="sort" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label> <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
<select name="sort" <select name="sort"
id="sort" id="sort"
class="appearance-none 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"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm dark:bg-gray-700 dark:text-white">
<option value="newest" {{ request('sort') === 'newest' || !request('sort') ? 'selected' : '' }}>Newest</option> <option value="newest" {{ request('sort') === 'newest' || !request('sort') ? 'selected' : '' }}>Newest</option>
<option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option> <option value="popular" {{ request('sort') === 'popular' ? 'selected' : '' }}>Most Popular</option>
<option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest</option> <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest</option>
@@ -137,28 +137,28 @@
<!-- Active Filters Tags --> <!-- Active Filters Tags -->
@if(request()->hasAny(['search', 'category', 'date_range', 'sort'])) @if(request()->hasAny(['search', 'category', 'date_range', 'sort']))
<div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200"> <div class="flex flex-wrap gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm font-medium text-gray-700">Active filters:</span> <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Active filters:</span>
@if(request('search')) @if(request('search'))
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800"> <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
Search: "{{ request('search') }}" Search: "{{ request('search') }}"
<a href="{{ route('products.index', request()->except('search')) }}" class="ml-2 hover:text-primary-900">×</a> <a href="{{ route('products.index', request()->except('search')) }}" class="ml-2 hover:text-primary-900">×</a>
</span> </span>
@endif @endif
@if(request('category')) @if(request('category'))
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800"> <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
{{ $categories->find(request('category'))->name ?? 'Unknown' }} {{ $categories->find(request('category'))->name ?? 'Unknown' }}
<a href="{{ route('products.index', request()->except('category')) }}" class="ml-2 hover:text-primary-900">×</a> <a href="{{ route('products.index', request()->except('category')) }}" class="ml-2 hover:text-primary-900">×</a>
</span> </span>
@endif @endif
@if(request('date_range')) @if(request('date_range'))
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800"> <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
{{ ucfirst(request('date_range')) }} {{ ucfirst(request('date_range')) }}
<a href="{{ route('products.index', request()->except('date_range')) }}" class="ml-2 hover:text-primary-900">×</a> <a href="{{ route('products.index', request()->except('date_range')) }}" class="ml-2 hover:text-primary-900">×</a>
</span> </span>
@endif @endif
@if(request('sort') && request('sort') !== 'newest') @if(request('sort') && request('sort') !== 'newest')
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 text-primary-800"> <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
{{ ucfirst(request('sort')) }} {{ ucfirst(request('sort')) }}
<a href="{{ route('products.index', request()->except('sort')) }}" class="ml-2 hover:text-primary-900">×</a> <a href="{{ route('products.index', request()->except('sort')) }}" class="ml-2 hover:text-primary-900">×</a>
</span> </span>
@@ -172,10 +172,10 @@
<!-- Results Summary --> <!-- Results Summary -->
@if($products->total() > 0) @if($products->total() > 0)
<div class="mb-6"> <div class="mb-6">
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600 dark:text-gray-400">
Showing <span class="font-semibold text-gray-900">{{ $products->firstItem() }}</span> to Showing <span class="font-semibold text-gray-900 dark:text-white">{{ $products->firstItem() }}</span> to
<span class="font-semibold text-gray-900">{{ $products->lastItem() }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ $products->lastItem() }}</span> of
<span class="font-semibold text-gray-900">{{ $products->total() }}</span> products <span class="font-semibold text-gray-900 dark:text-white">{{ $products->total() }}</span> products
</p> </p>
</div> </div>
@endif @endif
@@ -188,11 +188,11 @@
<!-- Empty State --> <!-- Empty State -->
<div class="col-span-full"> <div class="col-span-full">
<div class="text-center py-16"> <div class="text-center py-16">
<svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
<h3 class="text-lg font-medium text-gray-900 mb-2">No products found</h3> <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No products found</h3>
<p class="text-gray-600 mb-6"> <p class="text-gray-600 dark:text-gray-400 mb-6">
@if(request()->hasAny(['search', 'category', 'date_range'])) @if(request()->hasAny(['search', 'category', 'date_range']))
Try adjusting your search or filters to find what you're looking for. Try adjusting your search or filters to find what you're looking for.
@else @else
resources/views/products/manage.blade.php
+28 -28
View File
@@ -4,17 +4,17 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Header --> <!-- Header -->
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Product Management</h1> <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Product Management</h1>
<p class="mt-2 text-sm text-gray-600">Review and manage submitted products</p> <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Review and manage submitted products</p>
</div> </div>
<!-- Status Filter --> <!-- Status Filter -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
<div class="px-6 py-4"> <div class="px-6 py-4">
<h2 class="text-lg font-medium text-gray-900 mb-4">Filter by Status</h2> <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Filter by Status</h2>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
<a href="{{ route('products.manage') }}" <a href="{{ route('products.manage') }}"
class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ !request('status') || request('status') == 'pending' ? 'bg-yellow-100 text-yellow-800 ring-2 ring-yellow-600' : 'bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50' }}"> class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ !request('status') || request('status') == 'pending' ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 ring-2 ring-yellow-600' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-1 ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' }}">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
@@ -25,7 +25,7 @@
</a> </a>
<a href="{{ route('products.manage', ['status' => 'approved']) }}" <a href="{{ route('products.manage', ['status' => 'approved']) }}"
class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'approved' ? 'bg-green-100 text-green-800 ring-2 ring-green-600' : 'bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50' }}"> class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'approved' ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 ring-2 ring-green-600' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-1 ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' }}">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
@@ -36,7 +36,7 @@
</a> </a>
<a href="{{ route('products.manage', ['status' => 'rejected']) }}" <a href="{{ route('products.manage', ['status' => 'rejected']) }}"
class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'rejected' ? 'bg-red-100 text-red-800 ring-2 ring-red-600' : 'bg-white text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50' }}"> class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium {{ request('status') == 'rejected' ? 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 ring-2 ring-red-600' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-1 ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700' }}">
<svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg> </svg>
@@ -53,7 +53,7 @@
@if($products->count() > 0) @if($products->count() > 0)
<div class="space-y-4"> <div class="space-y-4">
@foreach($products as $product) @foreach($products as $product)
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow">
<div class="p-6"> <div class="p-6">
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<!-- Thumbnail --> <!-- Thumbnail -->
@@ -61,10 +61,10 @@
@if($product->thumbnail_url) @if($product->thumbnail_url)
<img src="{{ $product->thumbnail_url }}" <img src="{{ $product->thumbnail_url }}"
alt="{{ $product->title }}" alt="{{ $product->title }}"
class="w-20 h-20 rounded-lg object-cover border border-gray-200"> class="w-20 h-20 rounded-lg object-cover border border-gray-200 dark:border-gray-700">
@else @else
<div class="w-20 h-20 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center border border-gray-200"> <div class="w-20 h-20 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center border border-gray-200 dark:border-gray-700">
<svg class="h-8 w-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="h-8 w-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg> </svg>
</div> </div>
@@ -75,19 +75,19 @@
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div class="flex-1"> <div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900"> <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
<a href="{{ route('products.show', $product) }}" class="hover:text-primary-600"> <a href="{{ route('products.show', $product) }}" class="hover:text-primary-600">
{{ $product->title }} {{ $product->title }}
</a> </a>
</h3> </h3>
<p class="mt-1 text-sm text-gray-600 line-clamp-2">{{ $product->description }}</p> <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{{ $product->description }}</p>
<div class="mt-3 flex flex-wrap items-center gap-4 text-sm"> <div class="mt-3 flex flex-wrap items-center gap-4 text-sm">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md bg-primary-100 text-primary-800 font-medium"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-md bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200 font-medium">
{{ $product->category->name }} {{ $product->category->name }}
</span> </span>
<span class="inline-flex items-center text-gray-500"> <span class="inline-flex items-center text-gray-500 dark:text-gray-400">
<svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg> </svg>
@@ -96,30 +96,30 @@
</a> </a>
</span> </span>
<span class="inline-flex items-center text-gray-500"> <span class="inline-flex items-center text-gray-500 dark:text-gray-400">
<svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-1.5 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg> </svg>
{{ $product->created_at->format('M j, Y') }} {{ $product->created_at->format('M j, Y') }}
</span> </span>
<span class="text-gray-400">•</span> <span class="text-gray-400 dark:text-gray-500">•</span>
<span class="text-gray-500">{{ $product->created_at->diffForHumans() }}</span> <span class="text-gray-500 dark:text-gray-400">{{ $product->created_at->diffForHumans() }}</span>
</div> </div>
</div> </div>
<!-- Status Badge --> <!-- Status Badge -->
<div class="ml-4 flex-shrink-0"> <div class="ml-4 flex-shrink-0">
@if($product->isPending()) @if($product->isPending())
<span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-yellow-100 text-yellow-800"> <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-yellow-100 text-yellow-800 dark:text-yellow-200">
Pending Pending
</span> </span>
@elseif($product->isApproved()) @elseif($product->isApproved())
<span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-green-100 text-green-800"> <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:text-green-200">
Approved Approved
</span> </span>
@elseif($product->isRejected()) @elseif($product->isRejected())
<span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-red-100 text-red-800"> <span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-red-100 text-red-800 dark:text-red-200">
Rejected Rejected
</span> </span>
@endif @endif
@@ -152,7 +152,7 @@
</form> </form>
@endif @endif
<a href="{{ route('products.show', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <a href="{{ route('products.show', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
@@ -161,7 +161,7 @@
</a> </a>
@can('edit-product', $product) @can('edit-product', $product)
<a href="{{ route('products.edit', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <a href="{{ route('products.edit', $product) }}" class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
<svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg> </svg>
@@ -173,7 +173,7 @@
<form action="{{ route('products.destroy', $product) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this product permanently?');"> <form action="{{ route('products.destroy', $product) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this product permanently?');">
@csrf @csrf
@method('DELETE') @method('DELETE')
<button type="submit" class="inline-flex items-center px-3 py-1.5 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"> <button type="submit" class="inline-flex items-center px-3 py-1.5 border border-red-300 dark:border-red-700 text-sm font-medium rounded-md text-red-700 dark:text-red-300 bg-white dark:bg-gray-800 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
<svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg> </svg>
@@ -196,12 +196,12 @@
</div> </div>
@endif @endif
@else @else
<div class="text-center py-12 bg-gray-50 rounded-lg border border-gray-200"> <div class="text-center py-12 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg> </svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">No products found</h3> <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No products found</h3>
<p class="mt-1 text-sm text-gray-500"> <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
No products with status: <strong>{{ request('status', 'pending') }}</strong> No products with status: <strong>{{ request('status', 'pending') }}</strong>
</p> </p>
</div> </div>
resources/views/profile/edit.blade.php
+41 -41
View File
@@ -4,11 +4,11 @@
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Header --> <!-- Header -->
<div class="mb-8"> <div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Edit Profile</h1> <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Edit Profile</h1>
<p class="mt-2 text-sm text-gray-600">Update your profile information and social links</p> <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Update your profile information and social links</p>
</div> </div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<div class="px-6 py-8"> <div class="px-6 py-8">
<form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-8"> <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-8">
@csrf @csrf
@@ -16,7 +16,7 @@
<!-- Avatar Section --> <!-- Avatar Section -->
<div> <div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Profile Picture</h3> <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Profile Picture</h3>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
@if($user->avatar_url) @if($user->avatar_url)
@@ -34,17 +34,17 @@
id="avatar" id="avatar"
name="avatar" name="avatar"
accept="image/*" accept="image/*"
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('avatar') border-red-300 @enderror"> class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('avatar') border-red-300 dark:border-red-700 @enderror">
@error('avatar') @error('avatar')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">JPG, PNG, or GIF. Max size 2MB.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">JPG, PNG, or GIF. Max size 2MB.</p>
@if($user->avatar) @if($user->avatar)
<form method="POST" action="{{ route('profile.avatar.delete') }}" class="mt-3" onsubmit="return confirm('Are you sure you want to delete your avatar?')"> <form method="POST" action="{{ route('profile.avatar.delete') }}" class="mt-3" onsubmit="return confirm('Are you sure you want to delete your avatar?')">
@csrf @csrf
@method('DELETE') @method('DELETE')
<button type="submit" class="text-sm font-medium text-red-600 hover:text-red-700"> <button type="submit" class="text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-700">
Delete Avatar Delete Avatar
</button> </button>
</form> </form>
@@ -54,13 +54,13 @@
</div> </div>
<!-- Basic Information --> <!-- Basic Information -->
<div class="border-t border-gray-200 pt-8"> <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
<h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3> <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Basic Information</h3>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
<!-- Name --> <!-- Name -->
<div> <div>
<label for="name" class="block text-sm font-medium text-gray-700"> <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Name <span class="text-red-600">*</span> Name <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input type="text" <input type="text"
@@ -68,17 +68,17 @@
name="name" name="name"
value="{{ old('name', $user->name) }}" value="{{ old('name', $user->name) }}"
required required
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('name') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('name') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('name') @error('name')
<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 @enderror
</div> </div>
</div> </div>
<!-- Email --> <!-- Email -->
<div> <div>
<label for="email" class="block text-sm font-medium text-gray-700"> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Email <span class="text-red-600">*</span> Email <span class="text-red-600 dark:text-red-400">*</span>
</label> </label>
<div class="mt-1"> <div class="mt-1">
<input type="email" <input type="email"
@@ -86,9 +86,9 @@
name="email" name="email"
value="{{ old('email', $user->email) }}" value="{{ old('email', $user->email) }}"
required required
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('email') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('email') @error('email')
<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 @enderror
</div> </div>
</div> </div>
@@ -96,7 +96,7 @@
<!-- Bio --> <!-- Bio -->
<div class="mt-6"> <div class="mt-6">
<label for="bio" class="block text-sm font-medium text-gray-700"> <label for="bio" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Bio Bio
</label> </label>
<div class="mt-1"> <div class="mt-1">
@@ -105,22 +105,22 @@
rows="4" rows="4"
maxlength="1000" maxlength="1000"
placeholder="Tell us a bit about yourself..." placeholder="Tell us a bit about yourself..."
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('bio') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror">{{ old('bio', $user->bio) }}</textarea> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('bio') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">{{ old('bio', $user->bio) }}</textarea>
@error('bio') @error('bio')
<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 @enderror
<p class="mt-2 text-sm text-gray-500">Max 1000 characters</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Max 1000 characters</p>
</div> </div>
</div> </div>
</div> </div>
<!-- Website & Social Links --> <!-- Website & Social Links -->
<div class="border-t border-gray-200 pt-8"> <div class="border-t border-gray-200 dark:border-gray-700 pt-8">
<h3 class="text-lg font-medium text-gray-900 mb-4">Website & Social Links</h3> <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Website & Social Links</h3>
<div class="space-y-6"> <div class="space-y-6">
<!-- Website --> <!-- Website -->
<div> <div>
<label for="website" class="block text-sm font-medium text-gray-700"> <label for="website" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Website Website
</label> </label>
<div class="mt-1"> <div class="mt-1">
@@ -129,20 +129,20 @@
name="website" name="website"
value="{{ old('website', $user->website) }}" value="{{ old('website', $user->website) }}"
placeholder="https://example.com" placeholder="https://example.com"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
@error('website') @error('website')
<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 @enderror
</div> </div>
</div> </div>
<!-- Twitter --> <!-- Twitter -->
<div> <div>
<label for="twitter" class="block text-sm font-medium text-gray-700"> <label for="twitter" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Twitter Username Twitter Username
</label> </label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"> <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 sm:text-sm">
@ @
</span> </span>
<input type="text" <input type="text"
@@ -150,20 +150,20 @@
name="twitter" name="twitter"
value="{{ old('twitter', $user->twitter) }}" value="{{ old('twitter', $user->twitter) }}"
placeholder="username" placeholder="username"
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('twitter') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('twitter') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
</div> </div>
@error('twitter') @error('twitter')
<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 @enderror
</div> </div>
<!-- GitHub --> <!-- GitHub -->
<div> <div>
<label for="github" class="block text-sm font-medium text-gray-700"> <label for="github" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
GitHub Username GitHub Username
</label> </label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 text-sm">
github.com/ github.com/
</span> </span>
<input type="text" <input type="text"
@@ -171,20 +171,20 @@
name="github" name="github"
value="{{ old('github', $user->github) }}" value="{{ old('github', $user->github) }}"
placeholder="username" placeholder="username"
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('github') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('github') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
</div> </div>
@error('github') @error('github')
<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 @enderror
</div> </div>
<!-- LinkedIn --> <!-- LinkedIn -->
<div> <div>
<label for="linkedin" class="block text-sm font-medium text-gray-700"> <label for="linkedin" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
LinkedIn Username LinkedIn Username
</label> </label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 text-sm">
linkedin.com/in/ linkedin.com/in/
</span> </span>
<input type="text" <input type="text"
@@ -192,19 +192,19 @@
name="linkedin" name="linkedin"
value="{{ old('linkedin', $user->linkedin) }}" value="{{ old('linkedin', $user->linkedin) }}"
placeholder="username" placeholder="username"
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('linkedin') border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror"> class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('linkedin') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
</div> </div>
@error('linkedin') @error('linkedin')
<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 @enderror
</div> </div>
</div> </div>
</div> </div>
<!-- Form Actions --> <!-- Form Actions -->
<div class="border-t border-gray-200 pt-6 flex items-center justify-between"> <div class="border-t border-gray-200 dark:border-gray-700 pt-6 flex items-center justify-between">
<a href="{{ route('profile.show', $user) }}" <a href="{{ route('profile.show', $user) }}"
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
Cancel Cancel
</a> </a>
<button type="submit" <button type="submit"
resources/views/upvotes/index.blade.php
+8 -8
View File
@@ -1,13 +1,13 @@
@extends('layouts.app') @extends('layouts.app')
@section('content') @section('content')
<div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200"> <div class="bg-gradient-to-br from-primary-50 via-white to-accent-50 border-b border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
<div class="max-w-3xl"> <div class="max-w-3xl">
<h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4"> <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
My Upvotes My Upvotes
</h1> </h1>
<p class="text-lg text-gray-600"> <p class="text-lg text-gray-600 dark:text-gray-400">
Products you've upvoted and supported Products you've upvoted and supported
</p> </p>
</div> </div>
@@ -18,8 +18,8 @@
<!-- Results Summary --> <!-- Results Summary -->
@if($upvotes->total() > 0) @if($upvotes->total() > 0)
<div class="mb-6"> <div class="mb-6">
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600 dark:text-gray-400">
You have upvoted <span class="font-semibold text-gray-900">{{ $upvotes->total() }}</span> {{ Str::plural('product', $upvotes->total()) }} You have upvoted <span class="font-semibold text-gray-900 dark:text-white">{{ $upvotes->total() }}</span> {{ Str::plural('product', $upvotes->total()) }}
</p> </p>
</div> </div>
@endif @endif
@@ -32,11 +32,11 @@
<!-- Empty State --> <!-- Empty State -->
<div class="col-span-full"> <div class="col-span-full">
<div class="text-center py-16"> <div class="text-center py-16">
<svg class="mx-auto h-16 w-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
</svg> </svg>
<h3 class="text-lg font-medium text-gray-900 mb-2">No upvotes yet</h3> <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No upvotes yet</h3>
<p class="text-gray-600 mb-6"> <p class="text-gray-600 dark:text-gray-400 mb-6">
Start upvoting products you love to show your support! Start upvoting products you love to show your support!
</p> </p>
<a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> <a href="{{ route('products.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">