diff --git a/frontend/app/ops-redesign.css b/frontend/app/ops-redesign.css index 639b5b2..358624d 100644 --- a/frontend/app/ops-redesign.css +++ b/frontend/app/ops-redesign.css @@ -2039,6 +2039,44 @@ button:disabled, border-bottom: 0; background: linear-gradient(90deg, rgba(14, 165, 233, 0.08), rgba(79, 70, 229, 0.08)); } +.request-next-step-main { + display: flex; + align-items: center; + justify-content: space-between; + gap: 28px; +} +.request-next-step-copy { + display: grid; + gap: 7px; + min-width: 0; +} +.request-next-step-copy > strong { color: var(--ops-text); font-size: 1rem; line-height: 1.4; } +.request-next-step-copy > p { margin: 0; } +.request-watch-button { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + min-width: 240px; + min-height: 48px; + padding: 12px 20px; + border: 1px solid rgba(72, 224, 178, 0.62); + border-radius: var(--ops-radius); + background: linear-gradient(115deg, rgba(16, 185, 129, 0.92), rgba(14, 165, 233, 0.9)); + color: #fff; + box-shadow: 0 10px 28px rgba(14, 165, 233, 0.16); + font-size: 0.84rem; + font-weight: 800; + text-decoration: none; + transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; +} +.request-watch-button:hover { + border-color: rgba(126, 255, 214, 0.9); + box-shadow: 0 12px 34px rgba(14, 165, 233, 0.24); + transform: translateY(-1px); +} +.request-watch-button > span { font-size: 1rem; } .request-action-row, .request-stage-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; } @@ -2266,6 +2304,8 @@ button:disabled, .request-diagnostics-grid { grid-template-columns: 1fr; } .request-action-row, .request-stage-actions { display: grid; } + .request-next-step-main { align-items: stretch; flex-direction: column; } + .request-watch-button { width: 100%; min-width: 0; } .request-action-row button, .request-release button { width: 100%; } .request-operation-heading { align-items: flex-start; flex-direction: column; } diff --git a/frontend/app/requests/[id]/page.tsx b/frontend/app/requests/[id]/page.tsx index b463085..f03715d 100644 --- a/frontend/app/requests/[id]/page.tsx +++ b/frontend/app/requests/[id]/page.tsx @@ -463,6 +463,10 @@ export default function RequestTimelinePage() { const presentation = snapshot.presentation ?? {} const pipeline = presentation.pipeline?.length ? presentation.pipeline : fallbackPipeline(snapshot) + const availableStage = pipeline.find((stage) => stage.id === 'available') + const mediaServerLink = availableStage?.state === 'complete' && availableStage.link + ? availableStage.link + : null const statusLabel = presentation.status?.label ?? fallbackStatusLabel(snapshot.state) const statusMeaning = presentation.status?.meaning ?? snapshot.state_reason ?? 'Magent is checking this request.' const download = presentation.download @@ -671,9 +675,23 @@ export default function RequestTimelinePage() { )}
{nextStep.description}
+{nextStep.description}
+