diff --git a/src/analytics/metrics/types.ts b/src/analytics/metrics/types.ts index 7fba1b9555..a9d7f7bb17 100644 --- a/src/analytics/metrics/types.ts +++ b/src/analytics/metrics/types.ts @@ -1319,7 +1319,7 @@ export type Events = { 'invite:action:scan': {} // user changed the QR card color theme 'invite:theme:change': { - themeKey: 'dawn' | 'day' | 'dusk' | 'night' + themeKey: 'dawn' | 'sunlight' | 'day' | 'dusk' | 'twilight' | 'night' } // QR scanner decoded a code; result indicates whether it resolved to a profile 'invite:scanner:scanned': { diff --git a/src/features/inviteFriends/components/ThemePicker.tsx b/src/features/inviteFriends/components/ThemePicker.tsx index 179c80d815..064fcf0ab3 100644 --- a/src/features/inviteFriends/components/ThemePicker.tsx +++ b/src/features/inviteFriends/components/ThemePicker.tsx @@ -26,8 +26,10 @@ export function ThemePicker({ const labels: Record = { dawn: l`Dawn`, + sunlight: l`Sunlight`, day: l`Day`, dusk: l`Dusk`, + twilight: l`Twilight`, night: l`Night`, } diff --git a/src/features/inviteFriends/themes.test.ts b/src/features/inviteFriends/themes.test.ts index 6dbdfb2e9c..607217dc5a 100644 --- a/src/features/inviteFriends/themes.test.ts +++ b/src/features/inviteFriends/themes.test.ts @@ -3,8 +3,15 @@ import {describe, expect, it} from '@jest/globals' import {getInviteTheme, INVITE_THEME_KEYS, INVITE_THEMES} from './themes' describe('invite themes', () => { - it('exposes four themes in canonical order', () => { - expect(INVITE_THEME_KEYS).toEqual(['dawn', 'day', 'dusk', 'night']) + it('exposes six themes in canonical order', () => { + expect(INVITE_THEME_KEYS).toEqual([ + 'dawn', + 'sunlight', + 'day', + 'dusk', + 'twilight', + 'night', + ]) }) it('has light and dark variants for every theme', () => { diff --git a/src/features/inviteFriends/themes.ts b/src/features/inviteFriends/themes.ts index 6b71217372..7cb64131e1 100644 --- a/src/features/inviteFriends/themes.ts +++ b/src/features/inviteFriends/themes.ts @@ -5,7 +5,13 @@ * matching primary color; the QR data uses qrPrimary; the avatar handle text * follows handleColor. */ -export type InviteThemeKey = 'dawn' | 'day' | 'dusk' | 'night' +export type InviteThemeKey = + | 'dawn' + | 'sunlight' + | 'day' + | 'dusk' + | 'twilight' + | 'night' export type InviteThemeVariant = { /** QR data + eye color */ @@ -30,8 +36,10 @@ export type InviteTheme = { export const INVITE_THEME_KEYS: readonly InviteThemeKey[] = [ 'dawn', + 'sunlight', 'day', 'dusk', + 'twilight', 'night', ] as const @@ -54,6 +62,24 @@ export const INVITE_THEMES: Record = { handleColor: '#ffffff', }, }, + sunlight: { + key: 'sunlight', + swatch: '#ff8159', + light: { + qrPrimary: '#ff8159', + gradientFrom: '#ffc785', + gradientTo: '#ff8159', + shadowColor: '#ff8159', + handleColor: '#ffffff', + }, + dark: { + qrPrimary: '#ff8159', + gradientFrom: '#ffc785', + gradientTo: '#ff8159', + shadowColor: '#ff8159', + handleColor: '#ffffff', + }, + }, day: { key: 'day', swatch: '#006aff', @@ -90,6 +116,24 @@ export const INVITE_THEMES: Record = { handleColor: '#ffffff', }, }, + twilight: { + key: 'twilight', + swatch: '#8b60f7', + light: { + qrPrimary: '#8b60f7', + gradientFrom: '#8ec1ff', + gradientTo: '#8b60f7', + shadowColor: '#8b60f7', + handleColor: '#ffffff', + }, + dark: { + qrPrimary: '#8b60f7', + gradientFrom: '#8ec1ff', + gradientTo: '#8b60f7', + shadowColor: '#8b60f7', + handleColor: '#ffffff', + }, + }, night: { key: 'night', swatch: '#0048ad',