Use filament badge component and fix colors

Author: jbrooksuk

resources/lang/en.json

@@ -27,7 +27,7 @@
     "Metric Type": "Metric Type",
     "Month": "Month",
     "New Incident": "New Incident",
-    "Newer Incidents": "Newer Incidents",
+    "Next": "Next",
     "No incidents reported.": "No incidents reported.",
     "No incidents reported between :from and :to": "No incidents reported between :from and :to",
     "Notified Subscribers": "Notified Subscribers",
@@ -36,7 +36,7 @@
     "Partial Outage": "Partial Outage",
     "Past Incidents": "Past Incidents",
     "Performance Issues": "Performance Issues",
-    "Previous Incidents": "Previous Incidents",
+    "Previous": "Previous",
     "Record Update": "Record Update",
     "Resources": "Resources",
     "Settings": "Settings",

resources/svg/component-operational.svg renamed to resources/svg/circle-check.svg

@@ -1,21 +1,3 @@
-@props([
-    'color',
-    'icon',
-    'label',
-])
-<div {{ $attributes->style([
-    Illuminate\Support\Arr::toCssStyles([
-        \Filament\Support\get_color_css_variables(
-            $color,
-            shades: [400, 900],
-        ),
-    ]),
-]) }}>
-    <div {{ $attributes->class([
-        'flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold leading-tight shadow bg-custom-400 text-custom-900',
-    ]) }}>
-        @svg($icon, 'h-5 w-5')
-
-        <span>{{ $label }}</span>
-    </div>
-</div>
+<x-filament::badge :color="$color" :icon="$icon" class="bg-custom-400 text-custom-900 dark:bg-custom-400/40 dark:text-custom-400">
+    {{ $label }}
+</x-filament::badge>

resources/svg/clock.svg

@@ -1,5 +1,3 @@
-@props(['component'])
-
 <li class="px-4 py-3">
     <div class="flex items-center justify-between">
         <div class="flex flex-col">
@@ -25,7 +23,7 @@
         @if ($component->incidents_count > 0)
         <a href="{{ route('cachet.status-page.incident', [$component->incidents->first()]) }}"><x-cachet::component-badge :type="$component->status" /></a>
         @else
-        <x-cachet::component-badge :type="$component->status" />
+        <x-cachet::component-badge :type="$status" />
         @endif
     </div>
 </li>

resources/views/components/badge.blade.php

@@ -2,15 +2,11 @@
     Illuminate\Support\Arr::toCssStyles([
         \Filament\Support\get_color_css_variables(
             $color,
-            shades: [200, 900],
+            shades: [200, 400, 700, 900],
         ),
     ]),
 ])->merge(['title' => $title]) }}>
-    <div class="absolute -left-[calc(28px+10px+13px)] top-4 flex h-7 w-7 items-center justify-center rounded-full bg-custom-200 dark:text-zinc-900">
-        @if ($icon)
+    <div class="absolute -left-[calc(28px+10px+13px)] top-4 flex h-7 w-7 items-center justify-center rounded-full bg-custom-200 dark:bg-custom-200/80 text-custom-700 isolate">
         @svg($icon, 'size-5')
-        @else
-        <x-heroicon-m-flag class="size-4" />
-        @endif
     </div>
 </div>

resources/views/components/component.blade.php

@@ -1,3 +1,4 @@
+@use('Cachet\Enums\IncidentStatusEnum')
 @props([
     'date',
     'incidents',
@@ -57,7 +58,7 @@
                 </div>
                 @endforeach
                 <div class="relative py-4" x-data="{ timestamp: new Date(@js($incident->created_at)) }">
-                    <x-cachet::incident-update-status />
+                    <x-cachet::incident-update-status :status="IncidentStatusEnum::unknown" />
 
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
                         {{ $incident->created_at->diffForHumans() }} — <time datetime="{{ $incident->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>

resources/views/components/incident-update-status.blade.php

@@ -2,6 +2,7 @@
 
 namespace Cachet\Enums;
 
+use Filament\Support\Colors\Color;
 use Filament\Support\Contracts\HasColor;
 use Filament\Support\Contracts\HasIcon;
 use Filament\Support\Contracts\HasLabel;
@@ -37,7 +38,7 @@ public function getLabel(): string
     public function getIcon(): ?string
     {
         return match ($this) {
-            self::operational => 'cachet-component-operational',
+            self::operational => 'cachet-circle-check',
             self::performance_issues => 'cachet-component-performance-issues',
             self::partial_outage => 'cachet-component-partial-outage',
             self::major_outage => 'cachet-component-major-outage',
@@ -48,11 +49,11 @@ public function getIcon(): ?string
     public function getColor(): string|array|null
     {
         return match ($this) {
-            self::operational => 'success',
-            self::performance_issues => 'info',
-            self::partial_outage => 'warning',
-            self::major_outage => 'danger',
-            default => 'purple',
+            self::operational => Color::Green,
+            self::performance_issues => Color::Purple,
+            self::partial_outage => Color::Amber,
+            self::major_outage => Color::Red,
+            default => Color::Blue,
         };
     }
 }

resources/views/components/incident.blade.php

@@ -2,12 +2,14 @@
 
 namespace Cachet\Enums;
 
+use Filament\Support\Colors\Color;
 use Filament\Support\Contracts\HasColor;
 use Filament\Support\Contracts\HasIcon;
 use Filament\Support\Contracts\HasLabel;
 
 enum IncidentStatusEnum: int implements HasColor, HasIcon, HasLabel
 {
+    case unknown = 0;
     case investigating = 1;
     case identified = 2;
     case watching = 3;
@@ -29,6 +31,7 @@ public static function fromString(string $value): self
             'identified' => self::identified,
             'watching' => self::watching,
             'fixed' => self::fixed,
+            default => self::unknown,
         };
     }
 
@@ -49,17 +52,19 @@ public function getIcon(): ?string
             self::investigating => 'cachet-incident-investigating',
             self::identified => 'cachet-incident-identified',
             self::watching => 'cachet-incident-watching',
-            self::fixed => 'cachet-incident-fixed',
+            self::fixed => 'cachet-circle-check',
+            default => 'cachet-incident',
         };
     }
 
     public function getColor(): string|array|null
     {
         return match ($this) {
-            self::investigating => 'warning',
-            self::watching => 'info',
-            self::fixed => 'success',
-            default => 'gray',
+            self::investigating => Color::Blue,
+            self::watching => Color::Amber,
+            self::fixed => Color::Green,
+            self::identified => Color::Purple,
+            default => Color::Red,
         };
     }
 }

src/Enums/ComponentStatusEnum.php

@@ -55,9 +55,8 @@ public function getColor(): string|array|null
     public function getIcon(): ?string
     {
         return match ($this) {
-            self::upcoming => 'heroicon-m-calendar-days',
-            self::in_progress => 'heroicon-m-ellipsis-horizontal-circle',
-            self::complete => 'heroicon-m-check-circle',
+            self::complete => 'cachet-circle-check',
+            default => 'cachet-clock',
         };
     }