Notification icon is buggy

uwayss commented

2026-08-25 15:55:42 +00:00

Owner

No description provided.

Screenshot 2026-08-25 at 18.55.21.png

327 KiB

uwayss commented

2026-08-25 20:03:55 +00:00

Author

Owner

hey @claude can you fix this real quick?

claude-bot commented

2026-08-25 20:05:23 +00:00

Collaborator

Pushed to claude/fix-notification-icon (open a PR).

What was wrong

app.json pointed the expo-notifications plugin at the app icon:

["expo-notifications", { "icon": "./assets/icon.png", "color": "#ffffff" }]

assets/icon.png is a fully opaque, full-color 1024×1024 image (I decoded it: 100% of pixels have alpha 255). Since Android 5.0, the notification small icon is rendered from the alpha mask only — the color channels are discarded and the silhouette is tinted with the accent color. An opaque source has a fully-filled mask, so the notification shows a solid white square instead of the cat.

The accent color was a second problem: #ffffff tints the icon white, which is invisible against the light notification shade on most devices.

The fix

New assets/notification-icon.png — 96×96 (xxxhdpi 24dp), pure white on a transparent background, with the prayer cap's brim and the eyes cut out so the mark survives the alpha-mask treatment. Preview, composited on dark, at 4× and at real 24px size:

 ╱▔╲   ╱▔╲      ears + cap dome
│  ▔▔▔▔▔  │     ← brim cut (transparent)
│  ●   ●  │     ← eyes cut (transparent)
 ╲_______╱

I checked legibility by downsampling to an actual 24px render — the cap band and eyes still read.

Accent color #ffffff → #67B56F (palette.primary500 from src/constants/colors.ts), so the silhouette is tinted with the app's green.

Notes

The icon is geometry I generated to match the app mark's silhouette. It's a functional stand-in — if you'd rather have the real artwork traced by hand, swap the file and nothing else needs to change.
This takes effect on the next native build (expo prebuild / expo run:android), not over OTA updates — the small icon is baked into the Android manifest as a drawable resource.
iOS is unaffected; it always shows the app icon and ignores this setting.
One thing I left alone, since it's outside the icon bug: src/core/services/notificationService.ts:41 still sets lightColor: '#FF231F7C', the purple from the Expo template. Worth pointing at your primary green too if you want the LED to match.
I couldn't run npm run checks — node_modules isn't installed in this CI checkout. prettier --check app.json passes, and the change touches no TypeScript.

Pushed to **`claude/fix-notification-icon`** ([open a PR](https://code.uwayss.com/uwayss/muhsin/compare/main...claude/fix-notification-icon)). ## What was wrong `app.json` pointed the `expo-notifications` plugin at the app icon: ```json ["expo-notifications", { "icon": "./assets/icon.png", "color": "#ffffff" }] ``` `assets/icon.png` is a **fully opaque, full-color 1024×1024 image** (I decoded it: 100% of pixels have alpha 255). Since Android 5.0, the notification *small icon* is rendered from the alpha mask only — the color channels are discarded and the silhouette is tinted with the accent color. An opaque source has a fully-filled mask, so the notification shows a **solid white square** instead of the cat. The accent color was a second problem: `#ffffff` tints the icon white, which is invisible against the light notification shade on most devices. ## The fix **New `assets/notification-icon.png`** — 96×96 (xxxhdpi 24dp), pure white on a transparent background, with the prayer cap's brim and the eyes cut out so the mark survives the alpha-mask treatment. Preview, composited on dark, at 4× and at real 24px size: ``` ╱▔╲ ╱▔╲ ears + cap dome │ ▔▔▔▔▔ │ ← brim cut (transparent) │ ● ● │ ← eyes cut (transparent) ╲_______╱ ``` I checked legibility by downsampling to an actual 24px render — the cap band and eyes still read. **Accent color** `#ffffff` → `#67B56F` (`palette.primary500` from `src/constants/colors.ts`), so the silhouette is tinted with the app's green. ## Notes - The icon is geometry I generated to match the app mark's silhouette. It's a functional stand-in — if you'd rather have the real artwork traced by hand, swap the file and nothing else needs to change. - This takes effect on the **next native build** (`expo prebuild` / `expo run:android`), not over OTA updates — the small icon is baked into the Android manifest as a drawable resource. - iOS is unaffected; it always shows the app icon and ignores this setting. - One thing I left alone, since it's outside the icon bug: `src/core/services/notificationService.ts:41` still sets `lightColor: '#FF231F7C'`, the purple from the Expo template. Worth pointing at your primary green too if you want the LED to match. - I couldn't run `npm run checks` — `node_modules` isn't installed in this CI checkout. `prettier --check app.json` passes, and the change touches no TypeScript.

uwayss commented

2026-08-25 20:11:47 +00:00

Author

Owner

@claude your fix is correct but the image you created is.. shit. you gotta find the bg color and then remove it from the original icon and make the notification-icon from the thing left. if that makes sense..

claude-bot commented

2026-08-25 20:11:57 +00:00

Collaborator

Pushed to claude/fix-notification-icon-v2 (open a PR).

What I did differently this time

Your feedback was right — I'd previously hand-drawn a geometric stand-in instead of using the actual mark. This time I derived the notification icon directly from assets/icon.png:

Found the background color: #DDBD8E, a flat tan fill covering ~61% of the pixels (635,651 of 1024×1024), with hard vector edges and no anti-aliasing halo.
Removed it with an exact color match (convert -fuzz 0% -transparent "#DDBD8E") — no fuzz tolerance needed, and importantly no fuzz allowed: I tried 8% first and it also ate the diamond pattern on the cap and the ear-inner shading, since those use tan/gold tones close to the background. At 0% fuzz, all of that linework survives intact and the edges stay clean.
Trimmed the result to the cat+cap content, padded it back to a square (transparent margin, so it isn't cropped edge-to-edge), and resized to 96×96 — same convention as the previous notification-icon.png.
Pointed app.json's expo-notifications plugin at this file with color: "#67B56F" (still palette.primary500, same as before).

Why this fixes the original bug too

Android still only looks at the alpha channel for the status-bar icon and discards color — that part of the original diagnosis was correct. The difference is whose alpha mask it's using now: instead of a shape I invented, it's the real artwork's silhouette. I simulated Android's rendering (extract alpha → fill white → downscale to a real 24px) and it reads clearly as a cat head with pointed ears, not a blob or a square.

Notes

assets/notification-icon.png is still full-color (cat fur orange, cap white, outlines black) rather than pre-flattened to white — I left it that way since it's literally "the thing left" after removing the background, and Android discards the color anyway so it doesn't affect the rendered result.
Same caveats as before: this needs a native rebuild to take effect (baked into the Android drawable resources, not OTA-updatable), and iOS ignores this setting entirely.
Still couldn't run npm run checks — no node_modules in this CI checkout — but I validated app.json parses as JSON and matches the existing 2-space style.
src/core/services/notificationService.ts:41 still has the leftover lightColor: '#FF231F7C' (Expo template purple) — unrelated to this bug, flagging again in case you want it swapped to green too.

Pushed to **`claude/fix-notification-icon-v2`** ([open a PR](https://code.uwayss.com/uwayss/muhsin/compare/main...claude/fix-notification-icon-v2)). ## What I did differently this time Your feedback was right — I'd previously hand-drawn a geometric stand-in instead of using the actual mark. This time I derived the notification icon directly from `assets/icon.png`: 1. **Found the background color**: `#DDBD8E`, a flat tan fill covering ~61% of the pixels (635,651 of 1024×1024), with hard vector edges and no anti-aliasing halo. 2. **Removed it with an exact color match** (`convert -fuzz 0% -transparent "#DDBD8E"`) — no fuzz tolerance needed, and importantly *no fuzz allowed*: I tried 8% first and it also ate the diamond pattern on the cap and the ear-inner shading, since those use tan/gold tones close to the background. At 0% fuzz, all of that linework survives intact and the edges stay clean. 3. **Trimmed** the result to the cat+cap content, **padded** it back to a square (transparent margin, so it isn't cropped edge-to-edge), and resized to 96×96 — same convention as the previous notification-icon.png. 4. Pointed `app.json`'s `expo-notifications` plugin at this file with `color: "#67B56F"` (still `palette.primary500`, same as before). ## Why this fixes the original bug too Android still only looks at the **alpha channel** for the status-bar icon and discards color — that part of the original diagnosis was correct. The difference is *whose* alpha mask it's using now: instead of a shape I invented, it's the real artwork's silhouette. I simulated Android's rendering (extract alpha → fill white → downscale to a real 24px) and it reads clearly as a cat head with pointed ears, not a blob or a square. ## Notes - `assets/notification-icon.png` is still full-color (cat fur orange, cap white, outlines black) rather than pre-flattened to white — I left it that way since it's literally "the thing left" after removing the background, and Android discards the color anyway so it doesn't affect the rendered result. - Same caveats as before: this needs a native rebuild to take effect (baked into the Android drawable resources, not OTA-updatable), and iOS ignores this setting entirely. - Still couldn't run `npm run checks` — no `node_modules` in this CI checkout — but I validated `app.json` parses as JSON and matches the existing 2-space style. - `src/core/services/notificationService.ts:41` still has the leftover `lightColor: '#FF231F7C'` (Expo template purple) — unrelated to this bug, flagging again in case you want it swapped to green too.

uwayss commented

2026-08-25 20:20:57 +00:00

Author

Owner

@claude can't you make the icon be in this color DDBD8E instead of that green thing?

claude-bot commented

2026-08-25 20:21:08 +00:00

Collaborator

Pushed to claude/fix-notification-icon-v3 (open a PR), built on top of claude/fix-notification-icon-v2 (which had the real chroma-keyed cat icon, not the geometric stand-in).

What changed

Just the accent color, per your ask:

- "color": "#67B56F"
+ "color": "#DDBD8E"

That's the same tan (#DDBD8E) that got chroma-keyed out of assets/icon.png as the background fill in the v2 branch — so the notification silhouette will now be tinted with the icon's own original background tone instead of the app's primary green.

Heads up

One thing worth flagging: tan on Android's notification shade may have contrast issues similar to the original white-on-white bug — it can read faintly on light backgrounds, though most stock/AOSP shades are dark enough that it should still be visible. Worth a quick look on a real device or emulator after a native rebuild before merging.

Since claude/fix-notification-icon-v3 branches off v2 (not main), merging it will bring in both the icon-derivation fix and this color change together — the earlier fix-notification-icon (v1, hand-drawn icon) and fix-notification-icon-v2 branches are now superseded and can be deleted once this one merges.

Still unable to run npm run checks (no node_modules in this CI checkout); verified app.json is valid JSON and matches the existing style.

Pushed to **`claude/fix-notification-icon-v3`** ([open a PR](https://code.uwayss.com/uwayss/muhsin/compare/main...claude/fix-notification-icon-v3)), built on top of `claude/fix-notification-icon-v2` (which had the real chroma-keyed cat icon, not the geometric stand-in). ## What changed Just the accent color, per your ask: ```diff - "color": "#67B56F" + "color": "#DDBD8E" ``` That's the same tan (`#DDBD8E`) that got chroma-keyed out of `assets/icon.png` as the background fill in the v2 branch — so the notification silhouette will now be tinted with the icon's own original background tone instead of the app's primary green. ## Heads up One thing worth flagging: tan on Android's notification shade may have contrast issues similar to the original white-on-white bug — it can read faintly on light backgrounds, though most stock/AOSP shades are dark enough that it should still be visible. Worth a quick look on a real device or emulator after a native rebuild before merging. Since `claude/fix-notification-icon-v3` branches off `v2` (not `main`), merging it will bring in both the icon-derivation fix and this color change together — the earlier `fix-notification-icon` (v1, hand-drawn icon) and `fix-notification-icon-v2` branches are now superseded and can be deleted once this one merges. Still unable to run `npm run checks` (no `node_modules` in this CI checkout); verified `app.json` is valid JSON and matches the existing style.

uwayss referenced this issue from a pull request that will close it,

2026-08-25 20:26:14 +00:00

claude/fix-notification-icon-v3 #6

uwayss closed this issue

2026-08-25 20:31:04 +00:00

claude-bot referenced this issue

2026-08-30 20:25:38 +00:00

some claims in PRIVACY.md are wrong #20