Summary

Notes: documenting where everything lives and how it’s defined

Page Links Component Old modal style New style Status
Standard NUX
1. Hello I’m the Replay Browser http://localhost:8080/browser/welcome OnboardingModalContainer →
OnboardingContent (no wrapper) Solid color 🟧 .modalContainer and .onboardingContent ✅ (dark only)
2. Sign in (no SSO) Logged out: http://localhost:8080 Dark modal 🟦 .modalContainer and .onboardingContent ✅ (dark only)
3. Launch browser (Click link from library when not in Replay browser) Seems pretty custom 🏃‍♂️ ✅ (works with themes)
4. What’s your role? http://localhost:8080/browser/choose-role OnboardingModalContainer → OnboardingContentWrapper (no content) Dark modal 🟦 ✅ (dark only)
5. Let’s time travel OnboardingModalContainer →
OnboardingContentWrapper noLogo →
OnboardingContent Dark modal AND Solid color 🐲 ✅ (dark only)
Invited to Replay
1. Almost there! http://localhost:8080/?teaminvite=true Dark modal 🟦 ✅ (dark only)
2. Welcome to Replay Super custom
Errors
Ready when you are (and other errors) BubbleBackground White (even on dark) 🚩 ModalBackground ✅ (works with themes)
Miscellaneous
Standard loading screen BubbleViewportWrapper Big red box 🚩 DefaultViewportWrapper ✅ (works with themes)
Welcome to Replay — please download http://localhost:8080/team/dzozNTIyYWE1ZS1iYjU4LTRiNTItYWY3MS05NzVjYzQ3Nzg0Mjk=/recordings (?) Solid color 🟧
Sign in with Google (SSO included) OnboardingModalContainer theme="light" →
OnboardingContentWrapper overlay Dark modal but also some props 🚪
New tab (browser) http://localhost:8080/browser/new-tab BubbleBackground Big red box 🚩 ModalBackground ✅ (works with themes)
Free trial expired ?
Replay discarded ?
browser/auth.tsx ?
error.tsx ?
launch.tsx ?

Notes to self

Steps I’m going to take