Problem
The Iris mascot (media/iris-logo-big-left.png) has no elevation and no edge treatment. On a light theme the surrounding card is white, so the logo reads as a solid blue block dropped onto the surface with nothing separating the two. It looks unfinished next to the rest of the UI, which does use borders and elevation. On a dark theme the contrast carries it, so this is primarily a light-theme problem.
Most visible on the exercise detail page in the "Ask Iris" card, where the logo is rendered largest (48x48) on a plain surface.
Where the logo is rendered
src/webview/components/AskIris/AskIris.tsx — .logo, 48x48, the worst casesrc/webview/views/IrisChat/components/WelcomeState.tsx — avatar, 48x48src/webview/views/IrisChat/IrisChatView.tsx — chat header and message avatarssrc/webview/views/IrisChat/components/ThinkingIndicator.tsxsrc/webview/components/NudgeBanner/NudgeBanner.tsx
Since it affects every one of these, the fix belongs in a shared rule rather than in AskIris.module.css alone.
Suggested fix
Use filter: drop-shadow(...), not box-shadow. The asset is 557x512 RGBA with fully transparent corners (about 12% of its pixels are fully transparent), so the artwork is a rounded tile inside a transparent margin. A box-shadow follows the element box and would draw a rectangular shadow floating around the artwork instead of under it. drop-shadow follows the alpha channel and traces the actual silhouette.
.logo {
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 22%));
}Worth checking while implementing:
- Dark theme. A black shadow is invisible on a dark background. The webview already sets
vscode-light / vscode-dark on the body, so the shadow can be tuned per theme, or dropped entirely in dark mode if it adds nothing there.
.mainMuted .logo in AskIris.module.css already sets filter: grayscale(0.6). filter is not additive, so that rule would silently remove the shadow again. Both values have to be listed together in the muted state.
Side note (not part of this issue)
The asset is 557x512 but rendered into a 48x48 box in several places, so it is being squashed by about 9%. Unrelated to the shadow, but it showed up while checking the asset.
Problem
The Iris mascot (
media/iris-logo-big-left.png) has no elevation and no edge treatment. On a light theme the surrounding card is white, so the logo reads as a solid blue block dropped onto the surface with nothing separating the two. It looks unfinished next to the rest of the UI, which does use borders and elevation. On a dark theme the contrast carries it, so this is primarily a light-theme problem.Most visible on the exercise detail page in the "Ask Iris" card, where the logo is rendered largest (48x48) on a plain surface.
Where the logo is rendered
src/webview/components/AskIris/AskIris.tsx—.logo, 48x48, the worst casesrc/webview/views/IrisChat/components/WelcomeState.tsx— avatar, 48x48src/webview/views/IrisChat/IrisChatView.tsx— chat header and message avatarssrc/webview/views/IrisChat/components/ThinkingIndicator.tsxsrc/webview/components/NudgeBanner/NudgeBanner.tsxSince it affects every one of these, the fix belongs in a shared rule rather than in
AskIris.module.cssalone.Suggested fix
Use
filter: drop-shadow(...), notbox-shadow. The asset is 557x512 RGBA with fully transparent corners (about 12% of its pixels are fully transparent), so the artwork is a rounded tile inside a transparent margin. Abox-shadowfollows the element box and would draw a rectangular shadow floating around the artwork instead of under it.drop-shadowfollows the alpha channel and traces the actual silhouette.Worth checking while implementing:
vscode-light/vscode-darkon the body, so the shadow can be tuned per theme, or dropped entirely in dark mode if it adds nothing there..mainMuted .logoinAskIris.module.cssalready setsfilter: grayscale(0.6).filteris not additive, so that rule would silently remove the shadow again. Both values have to be listed together in the muted state.Side note (not part of this issue)
The asset is 557x512 but rendered into a 48x48 box in several places, so it is being squashed by about 9%. Unrelated to the shadow, but it showed up while checking the asset.