ref(replay): update mobile breadcrumb messages (#72869)

Some updates to the mobile breadcrumb messaging for
`device.connectivity` and `app.foreground` / `app.background`

<img width="179" alt="SCR-20240617-jhka"
src="https://github.com/getsentry/sentry/assets/56095982/7a25dc36-1363-409e-afe8-a75b2c104723">
<img width="277" alt="SCR-20240617-jgzc"
src="https://github.com/getsentry/sentry/assets/56095982/e408795c-0d0e-4a07-a43e-209cd73a2d0e">
<img width="283" alt="SCR-20240617-jgya"
src="https://github.com/getsentry/sentry/assets/56095982/18bc4467-bd19-4805-af3c-9bbcbcfa6e66">

cc @Jesse-Box

static/app/utils/replays/getFrameDetails.tsx

@@ -53,6 +53,13 @@ interface Details {
   title: ReactNode;
 }
 
+const DEVICE_CONNECTIVITY_MESSAGE: Record<string, string> = {
+  wifi: t('Device connected to wifi'),
+  offline: t('Internet connection was lost'),
+  cellular: t('Device connected to cellular network'),
+  ethernet: t('Device connected to ethernet'),
+};
+
 const MAPPER_FOR_FRAME: Record<string, (frame) => Details> = {
   'replay.init': (frame: BreadcrumbFrame) => ({
     color: 'gray300',
@@ -220,14 +227,14 @@ const MAPPER_FOR_FRAME: Record<string, (frame) => Details> = {
   }),
   'app.foreground': () => ({
     color: 'blue300',
-    description: 'Replay started',
+    description: 'The user is currently focused on your application',
     tabKey: TabKey.BREADCRUMBS,
     title: 'App in Foreground',
     icon: <IconUser size="xs" />,
   }),
   'app.background': () => ({
     color: 'blue300',
-    description: 'Replay paused',
+    description: 'The user is preoccupied with another app or activity',
     tabKey: TabKey.BREADCRUMBS,
     title: 'App in Background',
     icon: <IconUser size="xs" />,
@@ -364,7 +371,7 @@ const MAPPER_FOR_FRAME: Record<string, (frame) => Details> = {
   }),
   'device.connectivity': (frame: DeviceConnectivityFrame) => ({
     color: 'pink300',
-    description: frame.data.state,
+    description: DEVICE_CONNECTIVITY_MESSAGE[frame.data.state],
     tabKey: TabKey.BREADCRUMBS,
     title: 'Device Connectivity',
     icon: <IconMobile size="xs" />,