Improve prose leading and fix alignment bug

Author: jbrooksuk

database/seeders/DatabaseSeeder.php

@@ -123,7 +123,12 @@ public function run(): void
 
             $incident->incidentUpdates()->create([
                 'status' => IncidentStatusEnum::fixed,
-                'message' => 'Our DNS provider has fixed the issue. We will continue to monitor the situation.',
+                'message' => <<<'EOF'
+Our DNS provider has fixed the issue. We will continue to monitor the situation.
+
+For more information, please you can read our latest [blog post](https://blog.cachethq.io).
+EOF
+,
                 'user_id' => $user->id,
                 'created_at' => $timestamp = $incident->created_at->addMinutes(45),
                 'updated_at' => $timestamp,

resources/views/components/component-group.blade.php

@@ -7,14 +7,14 @@
     ->class(['overflow-hidden rounded-lg border shadow dark:border-zinc-700'])
     }}>
     <div class="flex items-center justify-between bg-white p-4 dark:border-zinc-700 dark:bg-zinc-800">
-        <button x-disclosure:button class="flex items-center gap-3 text-zinc-500 dark:text-zinc-300">
+        <button x-disclosure:button class="flex items-center gap-2 text-zinc-500 dark:text-zinc-300">
             <h3 class="text-lg font-semibold">
                 {{ $componentGroup->name }}
             </h3>
-            <x-heroicon-o-chevron-up ::class="!$disclosure.isOpen && 'rotate-180'" class="h-6 w-6 transition" />
+            <x-heroicon-o-chevron-up ::class="!$disclosure.isOpen && 'rotate-180'" class="size-4 transition" />
         </button>
 
-        @if(($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
+        @if(($incidentCount = $componentGroup->components()->sum('incidents_count')) > 0)
         <a href="#" class="rounded border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
             {{ trans_choice(':incidents Incidents', $incidentCount, ['incidents' => $incidentCount]) }}
         </a>

resources/views/components/component.blade.php

@@ -17,7 +17,7 @@
             </div>
             @if($component->link)
             <div class="mt-1 text-sm text-zinc-500">
-                <a href="{{ $component->link }}" class="text-zinc-700 underline dark:text-zinc-300">{{ __('View Details') }}</a>
+                <a href="{{ $component->link }}" class="text-zinc-700 underline dark:text-zinc-300" target="_blank" rel="nofollow noopener">{{ __('View Details') }}</a>
             </div>
             @endif
         </div>

resources/views/components/incident.blade.php

@@ -13,7 +13,7 @@
             'rounded-lg' => $incident->incidentUpdates->isEmpty(),
         ])>
             <div class="text-xs font-medium">{{ $incident->components->pluck('name')->join(', ') }}</div>
-            <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse items-center">
+            <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse items-start sm:items-center">
                 <div class="flex flex-col flex-1">
                     <div class="flex gap-2 items-center">
                         <h3 class="max-w-full text-base font-semibold break-words sm:text-xl">
@@ -33,9 +33,7 @@
                     <x-cachet::incident-badge :type="$incident->status" />
                 </div>
             </div>
-            <div class="prose-sm md:prose md:prose-zinc dark:text-zinc-100">
-                {!! $incident->formattedMessage() !!}
-            </div>
+            <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $incident->formattedMessage() !!}</div>
         </div>
 
         @if($incident->incidentUpdates->isNotEmpty())
@@ -49,21 +47,19 @@
                 @foreach ($incident->incidentUpdates as $update)
                 <div class="relative py-4" x-data="{ timestamp: new Date(@js($update->created_at)) }">
                     <x-cachet::incident-update-status :update="$update" />
-{{--                    <h3 class="text-lg font-semibold">Incident Update Title</h3>--}}
+                    <h3 class="text-lg font-semibold">{{ $update->status->getLabel() }}</h3>
                     <span class="text-xs text-zinc-500 dark:text-zinc-400">
                         {{ $update->created_at->diffForHumans() }} — <time datetime="{{ $update->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
                     </span>
-                    <div class="mt-1 prose-sm md:prose md:prose-zinc dark:text-zinc-100">
-                       {!! $update->formattedMessage() !!}
-                    </div>
+                    <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
                 </div>
                 @endforeach
             </div>
             @endif
         </div>
     </div>
     @empty
-        <div class="text-sm text-zinc-500 dark:text-zinc-400">
+        <div class="mt-1 prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline">
             {{ __('No incidents reported.') }}
         </div>
     @endforelse

resources/views/components/schedule.blade.php

@@ -3,7 +3,7 @@
         <div class="flex items-start gap-2.5 w-full">
             <span class="mt-1.5 h-3 w-3 shrink-0 rounded-full bg-orange-200 animate-pulse"></span>
             <div class="flex-1">
-                <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse items-center">
+                <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse items-start sm:items-center">
                     <div class="flex flex-col flex-1">
                         <h3 class="max-w-full text-base font-semibold break-words sm:text-xl">
                             {{ $schedule->name}}
@@ -16,9 +16,7 @@
                         <x-cachet::schedule-badge :schedule="$schedule" />
                     </div>
                 </div>
-                <div class="prose-sm md:prose md:prose-zinc dark:text-zinc-100">
-                    {!! $schedule->formattedMessage() !!}
-                </div>
+                <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $schedule->formattedMessage() !!}</div>
             </div>
         </div>
     </div>