test styling changes

frontend/app/src/pages/main/demo-workflow-runs/$run/components/step-run-playground.tsx

@@ -26,6 +26,7 @@ import { QuestionMarkCircleIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { WorkflowRunsTable } from '../../components/workflow-runs-table';
 import { StepRunEvents } from './step-run-events';
 import RelativeDate from '@/components/molecules/relative-date';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 export function StepRunPlayground({
   stepRun,
@@ -306,10 +307,15 @@ export function StepRunPlayground({
                 Input
               </div>
               {demo && (
-                <p>
-                  Your input and data from parent steps get propegated through
-                  the step input.
-                </p>
+                <Alert variant="default" className="my-4">
+                  <AlertTitle className="font-semibold">
+                    🪓 Here's your input.
+                  </AlertTitle>
+                  <AlertDescription>
+                    Your input and data from parent steps get propegated through
+                    the step input.
+                  </AlertDescription>
+                </Alert>
               )}
               {stepInput && (
                 <StepRunInputs
@@ -325,10 +331,15 @@ export function StepRunPlayground({
             <div className="flex-grow flex-col flex gap-4 w-1/2 ">
               <p>
                 {demo && (
-                  <p>
-                    You can view outputs, pipe logs, and see the events for how
-                    this step was run.
-                  </p>
+                  <Alert variant="default" className="my-4">
+                    <AlertTitle className="font-semibold">
+                      🪓 Here's your output.
+                    </AlertTitle>
+                    <AlertDescription>
+                      You can view outputs, pipe logs, and see the events for
+                      how this step was run.
+                    </AlertDescription>
+                  </Alert>
                 )}
               </p>
               <Tabs defaultValue="output" className="flex flex-col">

frontend/app/src/pages/main/demo-workflow-runs/$run/index.tsx

@@ -28,6 +28,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { BiDotsVertical } from 'react-icons/bi';
 import { useApiError } from '@/lib/hooks';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 export const WORKFLOW_RUN_TERMINAL_STATUSES = [
   WorkflowRunStatus.CANCELLED,
@@ -204,12 +205,18 @@ export default function ExpandedWorkflowRun() {
             </TabsTrigger>
           </TabsList>
           <TabsContent value="overview">
-            <p className="mt-4">
-              Here's the same DAG, but updated with real time state of how your
-              workflow is executing! You can click through each step to see
-              inputs and outputs or replay the step. We've added some artificial
-              delay in each step so you can see the steps in action.
-            </p>
+            <Alert variant="default" className="my-4">
+              <AlertTitle className="font-semibold">
+                🪓 Here's your workflow.
+              </AlertTitle>
+              <AlertDescription>
+                Here's the same DAG, but updated with real time state of how
+                your workflow is executing! You can click through each step to
+                see inputs and outputs or replay the step. We've added some
+                artificial delay in each step so you can see the steps in
+                action.
+              </AlertDescription>
+            </Alert>
             <div className="w-full h-[200px] mt-8">
               <WorkflowRunVisualizer
                 workflowRun={run}

frontend/app/src/pages/main/demo/index.tsx

@@ -11,6 +11,7 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { WorkflowTags } from '../workflows/components/workflow-tags';
 import { StarIcon } from '@radix-ui/react-icons';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 type WorkflowWithVersion = {
   workflow: Workflow;
@@ -95,21 +96,26 @@ export default function ExpandedWorkflow() {
         )}
         <div className="flex flex-row justify-start items-center mt-4"></div>
 
-        <p>
+        <p className="text-[1rem] text-gray-700 dark:text-gray-300">
           {' '}
-          👋 Hey there, welcome to the Hatchet Dashboard. We put together this
-          page so you can quickly run a workflow and experience our
-          observability.
+          👋 Hey Hacker News, welcome to the Hatchet demo instance. We put
+          together this page so you can quickly run a workflow and experience
+          our observability.
         </p>
 
-        <p className="mt-4">
-          In Hatchet, workflows are a series of functions that can either be
-          orchestrated as a Directed Acyclic Graph (DAG) or spawned procedurally
-          with Child Workflows. No matter how you use Hatchet, workflows are
-          durable and observable!
-        </p>
-
-        <h3 className="text-xl font-bold leading-tight text-foreground mt-4">
+        <Alert variant="default" className="mb-4">
+          <AlertTitle className="font-semibold">
+            🪓 What's a workflow?
+          </AlertTitle>
+          <AlertDescription>
+            In Hatchet, workflows are a series of functions that can either be
+            orchestrated as a Directed Acyclic Graph (DAG) or spawned
+            procedurally with child workflows. In either case, workflows are
+            durable and observable.
+          </AlertDescription>
+        </Alert>
+
+        <h3 className="text-[1rem] text-gray-700 dark:text-gray-300">
           This is an example DAG Workflow, when you're ready, click the button
           to trigger it! <br />
           <Button