Merge pull request #92 from TappNetwork/text-only-step-style

Step page: Filament section + fi-prose for text-only steps and markdown

Author: scottgrayson

resources/views/pages/step.blade.php

@@ -1,116 +1,21 @@
 <x-filament-panels::page>
     @if($step->text)
-        <div class="text-gray-600 markdown-content dark:text-gray-400">
-            {!! \Illuminate\Support\Str::markdown($step->text) !!}
-        </div>
+        @if(is_null($step->material_type))
+            {{-- Text-only step: fi-prose styles markdown output (headings, bold, lists, etc.) --}}
+            <x-filament::section class="max-w-3xl mx-auto">
+                <div class="fi-prose">
+                    {!! \Illuminate\Support\Str::markdown($step->text) !!}
+                </div>
+            </x-filament::section>
+        @else
+            <x-filament::section>
+                <div class="fi-prose">
+                    {!! \Illuminate\Support\Str::markdown($step->text) !!}
+                </div>
+            </x-filament::section>
+        @endif
     @endif
 
-    <style>
-    .markdown-content {
-        font-size: 0.875rem;
-        line-height: 1.5;
-    }
-
-    .markdown-content h1 {
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-        margin-top: 1.5rem;
-    }
-
-    .markdown-content h2 {
-        font-size: 1.25rem;
-        font-weight: 700;
-        margin-bottom: 0.75rem;
-        margin-top: 1.25rem;
-    }
-
-    .markdown-content h3 {
-        font-size: 1.125rem;
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-        margin-top: 1rem;
-    }
-
-    .markdown-content p {
-        margin-bottom: 0.75rem;
-    }
-
-    .markdown-content ul, .markdown-content ol {
-        margin-bottom: 0.75rem;
-        margin-left: 1.5rem;
-    }
-
-    .markdown-content ul {
-        list-style-type: disc;
-    }
-
-    .markdown-content ol {
-        list-style-type: decimal;
-    }
-
-    .markdown-content li {
-        margin-bottom: 0.25rem;
-        display: list-item;
-    }
-
-    .markdown-content blockquote {
-        border-left: 4px solid #d1d5db;
-        padding-left: 1rem;
-        font-style: italic;
-        margin: 0.75rem 0;
-    }
-
-    .markdown-content code {
-        background-color: #f3f4f6;
-        padding: 0.125rem 0.25rem;
-        border-radius: 0.25rem;
-        font-size: 0.875rem;
-    }
-
-    .dark .markdown-content code {
-        background-color: #374151;
-    }
-
-    .markdown-content pre {
-        background-color: #f3f4f6;
-        padding: 0.75rem;
-        border-radius: 0.25rem;
-        margin-bottom: 0.75rem;
-        overflow-x: auto;
-    }
-
-    .dark .markdown-content pre {
-        background-color: #374151;
-    }
-
-    .markdown-content pre code {
-        background-color: transparent;
-        padding: 0;
-    }
-
-    .markdown-content a {
-        color: #2563eb;
-        text-decoration: none;
-    }
-
-    .markdown-content a:hover {
-        text-decoration: underline;
-    }
-
-    .dark .markdown-content a {
-        color: #60a5fa;
-    }
-
-    .markdown-content strong {
-        font-weight: 600;
-    }
-
-    .markdown-content em {
-        font-style: italic;
-    }
-    </style>
-
     @if (is_null($step->material_type))
         {{-- Intentionally text-only step: show the next button --}}
         <x-filament-lms::next-button />