Skip to content

feat: complete custom app icon integration#220

Open
RONAK-AI647 wants to merge 9 commits into
Whisper-AI-App:mainfrom
RONAK-AI647:RONAK-A1647/Feature---Customise-App-Icon-#172
Open

feat: complete custom app icon integration#220
RONAK-AI647 wants to merge 9 commits into
Whisper-AI-App:mainfrom
RONAK-AI647:RONAK-A1647/Feature---Customise-App-Icon-#172

Conversation

@RONAK-AI647

@RONAK-AI647 RONAK-AI647 commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Overview

This PR completes the custom app icon settings feature, integrates a premium "Customize" tile directly into the icon selection grid, refactors data presets to be config-driven, and aligns the layout style to match the pre-existing Chat Background settings screen.

Changes

1. App Icon Customization Screen & Layout Alignment

  • Refactored app/settings/customize-icon.tsx to use local component state.
  • Aligned layout, spacing, section titles (e.g. PREVIEW), and divider lines (<Separator />) with app/settings/background.tsx.
  • Used global tokens (CORNERS, HEIGHT) from theme/globals.ts to give the apply gradient button and standard "Reset to Default" button matching pill-shaped styles.

2. Live Icon Customization Picker & Modal

  • Fixed initial HSV coordinate mapping inside components/icon-customizer/color-palette-modal.tsx so hue/saturation handles align correctly when the picker is opened.
  • Fixed contrast issues on "Cancel" and "Use this color" buttons by moving label strings into children.
  • Integrated the customizer sheet title with the global FONT_SIZE token.

3. Icon Selection Grid & Alternate App Icons

  • Removed the redundant bottom button from app/settings/app-icon.tsx.
  • Integrated a new dashed-border "Customize" card in the preset selection grid (components/app-icon-grid.tsx), styled with a brand blue-to-purple gradient.
  • Wrapped native imports dynamically inside src/actions/app-icon.ts to prevent runtime crashes in Expo Go environments.

4. Dynamic Preset Mapping

  • Replaced manually hardcoded color codes in src/data/icon-customizer-presets.ts with a map that dynamically derives preset swatches from scripts/icon-config.ts (ICON_VARIANTS), creating a single source of truth.

Testing & Verification

  • Ran npm run test -> Passed all 601 tests across 31 suites.
  • Ran npm run lint -> Passed cleanly with zero syntax or format warnings.

Closes #172

@RONAK-AI647

RONAK-AI647 commented Jul 1, 2026

Copy link
Copy Markdown
Contributor Author

App Color:

Screenshot 2026-07-01 202312

Customization

Screenshot 2026-07-01 202324

Color palette:

image

@mrspence DO test once regarding this feature!! Any if any color , grpahic or font is breaking the global theme/UI , do let me know !!
I have tried my best to maintain the global UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature - Customise App Icon

1 participant