🐛 Restore brand colours and cropping on the ErrorPage default symbol - #28
Merged
Merged
Conversation
The symbol shipped in #22 was traced with potrace, which flattened the three Enabel petals into a single `fill="#000000"` and left a 200x200 viewBox in which the glyph only covers 64% x 59% of the box. Rendered through the theme's `.bg img { width: 550px; height: 550px }` with `xMidYMid meet`, that produced a grey blob centred in the corner instead of the brand mark bleeding off the top-left edge — and it looked inconsistent next to the default logo, which is a full-colour PNG. Colour each petal with its brand value (grey #58575A, yellow #F9B500, red #D81A1A) and crop the viewBox onto the glyph bounding box (36 41 129 118), measured with getBBox() on the transformed group. The data: URI stays an SVG and is now 1434 bytes instead of 1578.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The default
symbolshipped in #22 renders as a flat grey blob floating in the corner instead of the Enabel brand mark bleeding off the top-left edge.Two defects, both introduced by the potrace tracing:
fill="#000000"on the<g>, flattening the three petals. This is visibly inconsistent within the same component: the defaultlogois a full-colour PNG, only the symbol is monochrome.viewBox="0 0 200 200"while the glyph only coversx=36..165, y=41..159, i.e. 64% x 59% of the box. The theme sizes the watermark with.bg img { width: 550px; height: 550px }andpreserveAspectRatio="xMidYMid meet", so a glyph with that much padding gets centred rather than cropped by the.bg { top: -50px; left: -50px }offset.Apps hitting this have to override
symbolwith their own asset to get the intended look — which is whatenabel/layout-bundleused to provide out of the box.Fix
#58575A, yellow#F9B500, red#D81A1A.36 41 129 118, measured withgetBBox()on the transformed<g>.<metadata>block.Same 3 paths, no geometry change. The
data:URI staysimage/svg+xml;base64(soErrorPageTest::testDefaultSymbolIsDataUristill holds) and gets smaller: 1434 bytes instead of 1578.Verification
vendor/bin/phpunit— 246 tests, 676 assertions, green (incl. the 11ErrorPagetests).error.min.cssat 550x550: brand mark in colour, cropped off the top-left corner, matching the pre-enabel/uxoutput ofenabel/layout-bundle.src/Component/Layout/Defaults/error_page_symbol.txtchanges — no PHP touched, so php-cs-fixer / phpstan / composer validate are unaffected.Follow-up
Consumers that worked around this with an explicit
symbol="…"can drop the override once this is released.