much more style

Author: MatthewBemis

src/pages/scientificServices/pipelines/tabs/history/details/components/JobBasics.tsx

@@ -82,7 +82,7 @@ export const JobBasics = ({ pipelineRunResult }: JobBasicsProps) => {
     <div
       style={{
         width: '100%',
-        backgroundColor: '#f5f6f9',
+        background: `linear-gradient(to right, #f5f6f9, ${getStatusColor(pipelineRunResult.jobReport.status)}15)`,
         border: '1px solid #d7d9dc',
         borderRadius: '4px',
         paddingLeft: '1.5rem',
@@ -93,10 +93,34 @@ export const JobBasics = ({ pipelineRunResult }: JobBasicsProps) => {
       }}
     >
       <div style={{ marginBottom: '1rem' }}>
-        <h2>{pipelineDetails && <AoUStylizedString text={pipelineDetails.displayName} />}</h2>
-        {pipelineDetails && pipelineDetails.description && (
-          <div style={{ margin: '1rem 0rem', color: colors.dark(0.8) }}>{pipelineDetails.description}</div>
-        )}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ flex: 1 }}>
+            <h2>{pipelineDetails && <AoUStylizedString text={pipelineDetails.displayName} />}</h2>
+            {pipelineDetails && pipelineDetails.description && (
+              <div style={{ margin: '1rem 0rem', color: colors.dark(0.8) }}>{pipelineDetails.description}</div>
+            )}
+          </div>
+
+          {/* Status Badge */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5rem',
+              textTransform: 'capitalize',
+              fontSize: 18,
+              fontWeight: 600,
+              border: '1px solid #d7d9dc',
+              padding: '0.5rem 0.75rem',
+              borderRadius: '4px',
+              backgroundColor: '#fff',
+              color: getStatusColor(pipelineRunResult.jobReport.status),
+            }}
+          >
+            {getStatusIcon(pipelineRunResult.jobReport.status)}
+            {pipelineRunResult.jobReport.status.toLowerCase()}
+          </div>
+        </div>
       </div>
       {/* Description */}
       <div

src/pages/scientificServices/pipelines/tabs/history/details/components/JobTimeline.tsx

@@ -10,8 +10,8 @@ interface JobTimelineProps {
 
 const MOCK_TIMELINE_EVENTS = [
   { timestamp: '2024-01-01T10:00:00Z', event: 'Submitted' },
-  { timestamp: '2024-01-01T10:05:11Z', event: 'Started' },
-  { timestamp: '2024-01-01T10:05:37Z', event: 'Passed QC' },
+  { timestamp: '2024-01-01T10:05:10Z', event: 'Passed QC' },
+  { timestamp: '2024-01-01T10:06:11Z', event: 'Started' },
   { timestamp: '2024-01-01T10:20:01Z', event: 'Succeeded' },
 ];
 
@@ -61,9 +61,8 @@ export const JobTimeline = ({ pipelineRunResult }: JobTimelineProps) => {
             gap: '0.5rem',
             backgroundColor: 'white',
             padding: '0.5rem 0.75rem',
-            border: `1px solid ${colors.light(0.4)}`,
+            border: '1px solid #D8D9DC',
             borderRadius: '20px',
-            fontSize: '0.875rem',
             fontWeight: 500,
           }}
         >