From 63a3fa1ef089b68d307585038babf2b64ef2f425 Mon Sep 17 00:00:00 2001 From: Paul Shippy Date: Thu, 23 Jul 2026 02:48:22 +0000 Subject: [PATCH 1/4] Redesign Select bot grid with per-bot colors and icons - Give each bot a stable identity: color and icon derived from a hash of its name (kid-friendly palette of 7 colors, 6 existing IconSymbol mappings) - Restyle tiles: consistent 2-column grid, white icon centered in a translucent circle chip, bot name centered below on a single line with ellipsis, rounded corners, softer shadow - Selected state keeps the bot's color and adds a white border instead of replacing the background with grey - Friendlier header: larger centered 'Select bot' title with a 'Who do you want to learn with today?' subtitle Selection behavior (AsyncStorage, setBotSelected, haptics, skipAutoSelect) is unchanged. --- .../after-dark-home-chat.png | Bin 0 -> 85425 bytes .../after-dark-select-bot.png | Bin 0 -> 85038 bytes .../after-light-home-chat.png | Bin 0 -> 87912 bytes .../after-light-select-bot.png | Bin 0 -> 87591 bytes .../before-dark-home-chat.png | Bin 0 -> 47523 bytes .../before-dark-select-bot.png | Bin 0 -> 47167 bytes .../before-light-home-chat.png | Bin 0 -> 47243 bytes .../before-light-select-bot.png | Bin 0 -> 46934 bytes front/app/selectBot.tsx | 133 +++++++++++++----- 9 files changed, 94 insertions(+), 39 deletions(-) create mode 100644 docs/screenshots/select-bot-redesign/after-dark-home-chat.png create mode 100644 docs/screenshots/select-bot-redesign/after-dark-select-bot.png create mode 100644 docs/screenshots/select-bot-redesign/after-light-home-chat.png create mode 100644 docs/screenshots/select-bot-redesign/after-light-select-bot.png create mode 100644 docs/screenshots/select-bot-redesign/before-dark-home-chat.png create mode 100644 docs/screenshots/select-bot-redesign/before-dark-select-bot.png create mode 100644 docs/screenshots/select-bot-redesign/before-light-home-chat.png create mode 100644 docs/screenshots/select-bot-redesign/before-light-select-bot.png diff --git a/docs/screenshots/select-bot-redesign/after-dark-home-chat.png b/docs/screenshots/select-bot-redesign/after-dark-home-chat.png new file mode 100644 index 0000000000000000000000000000000000000000..4cfe27e45716ec405fbeb05f0bbbdac82bbddecf GIT binary patch literal 85425 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