getsentry/sentry

Update in product illustrations with new dark/light compatible illustrations

Open

#53125 opened on Jul 19, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)Python (43,328 stars) (4,625 forks)batch import
ImprovementWaiting for: Product Ownerhelp wanted

Description

Original design Jira ticket (internal): https://getsentry.atlassian.net/servicedesk/customer/portal/17/DTSD-67

We have new illustrations which work for both dark and light mode that need to be updated within the product.

Requirements

  • SVGs should be optimized using SVGO (You may use svgomg as the web UI, it's very easy)
  • SVGs should be sized properly so they do have have strange scaling issues in their usages

List of illustrations to replace

TODO: We'll need to generate the list of illustrations from the newly available ones here

NOTE: Some illustrations are animated, these should probably be delegated to other tasks, since they will require much more work to update (maybe)

Illustrations are here: https://brand.getsentry.com/d/4A7NQz1aXA1i/asset-library/collection/19

Contributor guide

Tech stack
javascriptreactcss
Domain
frontenddesign
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic knowledge of SVG optimizationaccess to brand asset library
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Locate the existing SVG illustrations in the frontend codebase, likely within the ui/ or static/ directories. Replace them with the new dark/light compatible SVGs from the brand asset library (https://brand.getsentry.com/d/4A7NQz1aXA1i/asset library/collection/19). Optimize each SVG using SVGO (e.g., via svgomg) to reduce file size. Ensure proper sizing attributes (width, height) to avoid scaling issues. Note that animated illustrations are excluded and should be handled separately.