From ee81749b43beaf6109eff24b7f17ff8c99f2dd11 Mon Sep 17 00:00:00 2001 From: Zak Bearman Date: Mon, 31 Aug 2026 14:59:23 +1200 Subject: [PATCH] Add Sonarr and Radarr request icons --- frontend/app/ops-redesign.css | 17 ++++++++++++++++- .../app/portal/requests/RequestPortalClient.tsx | 13 ++++++++++++- frontend/public/service-icons/radarr.svg | 7 +++++++ frontend/public/service-icons/sonarr.svg | 9 +++++++++ 4 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 frontend/public/service-icons/radarr.svg create mode 100644 frontend/public/service-icons/sonarr.svg diff --git a/frontend/app/ops-redesign.css b/frontend/app/ops-redesign.css index 29dd6d5..18116e7 100644 --- a/frontend/app/ops-redesign.css +++ b/frontend/app/ops-redesign.css @@ -2323,7 +2323,22 @@ button:disabled, } .request-type-card:hover { transform: translateY(-2px); border-color: rgba(126, 215, 255, 0.5); } .request-type-card.is-selected { border-color: rgba(72, 224, 178, 0.58); background: linear-gradient(135deg, rgba(72, 224, 178, 0.11), rgba(14, 165, 233, 0.06)); } -.request-type-card > span { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; } +.request-type-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; } +.request-type-card-top > span:first-child { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; } +.request-service-icon { + display: grid; + place-items: center; + width: 58px; + height: 58px; + margin: -6px -4px 0 0; + padding: 8px; + border: 1px solid rgba(255, 255, 255, 0.44); + border-radius: 16px; + background: rgba(245, 248, 252, 0.94); + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); +} +.request-service-icon img { display: block; width: 100%; height: 100%; object-fit: contain; } +.request-type-card.is-selected .request-service-icon { border-color: rgba(72, 224, 178, 0.72); box-shadow: 0 0 24px rgba(72, 224, 178, 0.18); } .request-type-card strong { font-size: 1.35rem; } .request-type-card p { max-width: 440px; margin: 0; color: var(--ops-muted); font-weight: 450; line-height: 1.5; } .request-type-card b { margin-top: auto; color: var(--request-green); font-size: 0.74rem; } diff --git a/frontend/app/portal/requests/RequestPortalClient.tsx b/frontend/app/portal/requests/RequestPortalClient.tsx index 6ee357c..ba48e88 100644 --- a/frontend/app/portal/requests/RequestPortalClient.tsx +++ b/frontend/app/portal/requests/RequestPortalClient.tsx @@ -56,18 +56,24 @@ const mediaChoices: Array<{ eyebrow: string title: string description: string + collector: 'Radarr' | 'Sonarr' + icon: string }> = [ { type: 'movie', eyebrow: 'Film', title: 'Movie', description: 'Find a film and send it through Seerr to Radarr.', + collector: 'Radarr', + icon: '/service-icons/radarr.svg', }, { type: 'tv', eyebrow: 'Series', title: 'TV show', description: 'Choose a series, the seasons you want, and send it to Sonarr.', + collector: 'Sonarr', + icon: '/service-icons/sonarr.svg', }, ] @@ -333,7 +339,12 @@ export default function RequestPortalClient() { onClick={() => resetAfterType(choice.type)} aria-pressed={mediaType === choice.type} > - {choice.eyebrow} + + {choice.eyebrow} + + {`${choice.collector} + + {choice.title}

{choice.description}

{mediaType === choice.type ? 'Selected' : `Choose ${choice.title.toLowerCase()}`} diff --git a/frontend/public/service-icons/radarr.svg b/frontend/public/service-icons/radarr.svg new file mode 100644 index 0000000..1ee8b33 --- /dev/null +++ b/frontend/public/service-icons/radarr.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/public/service-icons/sonarr.svg b/frontend/public/service-icons/sonarr.svg new file mode 100644 index 0000000..563b44f --- /dev/null +++ b/frontend/public/service-icons/sonarr.svg @@ -0,0 +1,9 @@ + + + + + + + + +