From 3326c73d1055f15ce1bded33cd2f964c6843563e Mon Sep 17 00:00:00 2001
From: Doar Mihai <mihai@invata-progremare.ro>
Date: Sun, 28 Jun 2026 03:04:41 +0300
Subject: [PATCH] feat: restyle crimes page with dark crime theme

Replace crimes index page with dark syndicate theme styling using:
- syndicate color tokens for backgrounds and borders
- crime color tokens for action buttons
- gold color tokens for reward displays
- Improved visual hierarchy and spacing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/game/crimes/index.blade.php | 118 +++++++++-----------
 1 file changed, 53 insertions(+), 65 deletions(-)

diff --git a/resources/views/game/crimes/index.blade.php b/resources/views/game/crimes/index.blade.php
index 19745b9..89e8bdc 100644
--- a/resources/views/game/crimes/index.blade.php
+++ b/resources/views/game/crimes/index.blade.php
@@ -3,25 +3,20 @@
 @section('title', 'Crimes')
 
 @section('game-content')
-    <div class="max-w-4xl mx-auto">
-        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
-                <div class="flex justify-between items-center">
-                    <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Available Crimes</h1>
-                    <div class="text-sm text-gray-500 dark:text-gray-400">
-                        Energy: {{ $character->energy }}/{{ $character->max_energy }}
-                    </div>
+    <div class="max-w-4xl mx-auto space-y-6">
+
+        {{-- Header card --}}
+        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
+            <div class="px-6 py-4 border-b border-syndicate-700 flex justify-between items-center">
+                <h1 class="font-display text-xl font-semibold text-gray-100">Available Crimes</h1>
+                <div class="text-sm text-gray-400">
+                    Energy: <span class="text-yellow-400 font-medium">{{ $character->energy }}/{{ $character->max_energy }}</span>
                 </div>
-                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                    Commit crimes to earn money and experience. Each crime costs energy and has a chance of success or failure.
-                </p>
             </div>
 
             <div class="p-6">
                 @if($availableCrimes->isEmpty())
-                    <p class="text-center text-gray-500 dark:text-gray-400 py-8">
-                        No crimes available. Try leveling up or restoring your energy.
-                    </p>
+                    <p class="text-center text-gray-500 py-8 text-sm">No crimes available. Try leveling up or restoring your energy.</p>
                 @else
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         @foreach($availableCrimes as $crime)
@@ -30,103 +25,95 @@
                                 $cooldownRemaining = $onCooldown ? $crimeService->getCooldownRemaining($character, $crime) : 0;
                                 $successRate = $crime->calculateSuccessRate($character);
                             @endphp
-                            
-                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
+
+                            <div class="bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 rounded-lg p-4 transition">
                                 <div class="flex justify-between items-start mb-2">
                                     <div>
-                                        <h3 class="font-medium text-gray-800 dark:text-gray-200">{{ $crime->name }}</h3>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                                            {{ $crime->difficulty_label }} Difficulty
-                                        </p>
+                                        <h3 class="font-medium text-gray-100">{{ $crime->name }}</h3>
+                                        <p class="text-xs text-gray-500 mt-1">{{ $crime->difficulty_label }} Difficulty</p>
                                     </div>
-                                    <span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white">
+                                    <span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white flex-shrink-0">
                                         {{ number_format($successRate * 100, 1) }}% Success
                                     </span>
                                 </div>
-                                
-                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
-                                    {{ Str::limit($crime->description, 100) }}
-                                </p>
-                                
-                                <div class="grid grid-cols-2 gap-2 text-xs">
-                                    <div class="flex items-center">
-                                        <span class="text-yellow-500 mr-1">⚡</span>
+
+                                <p class="text-sm text-gray-400 mb-3">{{ Str::limit($crime->description, 100) }}</p>
+
+                                <div class="grid grid-cols-2 gap-2 text-xs text-gray-400 mb-3">
+                                    <div class="flex items-center space-x-1">
+                                        <span class="text-yellow-400">⚡</span>
                                         <span>{{ $crime->energy_cost }} Energy</span>
                                     </div>
-                                    <div class="flex items-center">
-                                        <span class="text-green-500 mr-1">💰</span>
+                                    <div class="flex items-center space-x-1">
+                                        <span class="text-gold-400">💰</span>
                                         <span>${{ $crime->reward_min }}-{{ $crime->reward_max }}</span>
                                     </div>
-                                    <div class="flex items-center">
-                                        <span class="text-blue-500 mr-1">📈</span>
+                                    <div class="flex items-center space-x-1">
+                                        <span class="text-blue-400">📈</span>
                                         <span>{{ $crime->experience }} EXP</span>
                                     </div>
-                                    <div class="flex items-center">
-                                        <span class="text-gray-500 mr-1">⏱️</span>
+                                    <div class="flex items-center space-x-1">
+                                        <span class="text-gray-500">⏱</span>
                                         <span>{{ $crime->cooldown }}s Cooldown</span>
                                     </div>
                                 </div>
-                                
+
                                 @if($onCooldown)
-                                    <button 
-                                        disabled
-                                        class="w-full mt-3 py-2 px-4 text-sm text-center bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 rounded-lg cursor-not-allowed"
-                                    >
+                                    <button disabled
+                                        class="w-full py-2 px-4 text-sm text-center bg-syndicate-600 text-gray-600 rounded-lg cursor-not-allowed">
                                         On Cooldown ({{ ceil($cooldownRemaining / 60) }}m)
                                     </button>
                                 @else
-                                    <form action="{{ route('game.crimes.attempt', $crime) }}" method="POST" class="mt-3">
+                                    <form action="{{ route('game.crimes.attempt', $crime) }}" method="POST">
                                         @csrf
-                                        <button 
-                                            type="submit"
-                                            class="w-full py-2 px-4 text-sm text-center bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
-                                        >
+                                        <button type="submit"
+                                            class="w-full py-2 px-4 text-sm text-center bg-crime-600 hover:bg-crime-500 text-white rounded-lg transition">
                                             Attempt Crime
                                         </button>
                                     </form>
                                 @endif
-                                
+
                                 @if($crime->requires_level)
-                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                                        Requires Level {{ $crime->requires_level }}+
-                                    </p>
+                                    <p class="text-xs text-gray-600 mt-2">Requires Level {{ $crime->requires_level }}+</p>
                                 @endif
                             </div>
                         @endforeach
                     </div>
                 @endif
             </div>
+        </div>
 
-            <div class="p-6 border-t border-gray-200 dark:border-gray-700">
-                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Attempts</h3>
-                
+        {{-- Recent Attempts --}}
+        <div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
+            <div class="px-6 py-4 border-b border-syndicate-700">
+                <h3 class="font-display text-lg font-semibold text-gray-100">Recent Attempts</h3>
+            </div>
+            <div class="p-6">
                 @if($recentAttempts->isEmpty())
-                    <p class="text-center text-gray-500 dark:text-gray-400 py-4">
-                        No recent crime attempts.
-                    </p>
+                    <p class="text-center text-gray-500 py-4 text-sm">No recent crime attempts.</p>
                 @else
                     <div class="space-y-2">
                         @foreach($recentAttempts as $attempt)
-                            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
-                                <div class="flex items-center">
-                                    <span class="mr-3">
+                            <div class="flex items-center justify-between p-3 bg-syndicate-700 rounded-lg">
+                                <div class="flex items-center space-x-3">
+                                    <span>
                                         @if($attempt->success)
-                                            <span class="text-green-500">✅</span>
+                                            <span class="text-green-400">✅</span>
                                         @else
-                                            <span class="text-red-500">❌</span>
+                                            <span class="text-red-400">❌</span>
                                         @endif
                                     </span>
                                     <div>
-                                        <p class="font-medium text-gray-800 dark:text-gray-200">{{ $attempt->crime->name }}</p>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ $attempt->attempted_at->diffForHumans() }}</p>
+                                        <p class="font-medium text-gray-200 text-sm">{{ $attempt->crime->name }}</p>
+                                        <p class="text-xs text-gray-500">{{ $attempt->attempted_at->diffForHumans() }}</p>
                                     </div>
                                 </div>
                                 <div class="text-right">
                                     @if($attempt->success)
-                                        <p class="text-sm text-green-600 dark:text-green-400">+${{ number_format($attempt->reward) }}</p>
-                                        <p class="text-xs text-gray-500 dark:text-gray-400">+{{ $attempt->experience_gained }} EXP</p>
+                                        <p class="text-sm text-gold-400">+${{ number_format($attempt->reward) }}</p>
+                                        <p class="text-xs text-gray-500">+{{ $attempt->experience_gained }} EXP</p>
                                     @else
-                                        <p class="text-sm text-red-600 dark:text-red-400">Failed</p>
+                                        <p class="text-sm text-red-400">Failed</p>
                                     @endif
                                 </div>
                             </div>
@@ -135,5 +122,6 @@
                 @endif
             </div>
         </div>
+
     </div>
 @endsection