feat(issue-details): Make View JSON button more visible (#83145)

this pr makes the view JSON button more visible in the streamlined issue
details experience, which addresses a common piece of feedback. design
follows what we are doing for the "Processing Error" button in the same
section of the page

<img width="304" alt="Screenshot 2025-01-09 at 11 15 35 AM"
src="https://github.com/user-attachments/assets/c4a94475-8c72-4f45-8ce7-4d0776ed243e"
/>

static/app/views/issueDetails/streamline/eventTitle.tsx

@@ -6,6 +6,7 @@ import {Button, LinkButton} from 'sentry/components/button';
 import DropdownButton from 'sentry/components/dropdownButton';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {useActionableItems} from 'sentry/components/events/interfaces/crashContent/exception/useActionableItems';
+import ExternalLink from 'sentry/components/links/externalLink';
 import {ScrollCarousel} from 'sentry/components/scrollCarousel';
 import TimeSince from 'sentry/components/timeSince';
 import {IconWarning} from 'sentry/icons';
@@ -88,9 +89,10 @@ export const EventTitle = forwardRef<HTMLDivElement, EventNavigationProps>(
       font-weight: ${theme.fontWeightNormal};
     `;
 
+    const host = organization.links.regionUrl;
+    const jsonUrl = `${host}/api/0/projects/${organization.slug}/${group.project.slug}/events/${event.id}/json/`;
+
     const downloadJson = () => {
-      const host = organization.links.regionUrl;
-      const jsonUrl = `${host}/api/0/projects/${organization.slug}/${group.project.slug}/events/${event.id}/json/`;
       window.open(jsonUrl);
       trackAnalytics('issue_details.event_json_clicked', {
         organization,
@@ -156,6 +158,7 @@ export const EventTitle = forwardRef<HTMLDivElement, EventNavigationProps>(
                   key: 'view-json',
                   label: t('View JSON'),
                   onAction: downloadJson,
+                  className: 'hidden-sm hidden-md hidden-lg',
                 },
               ]}
             />
@@ -166,6 +169,21 @@ export const EventTitle = forwardRef<HTMLDivElement, EventNavigationProps>(
               css={grayText}
               aria-label={t('Event timestamp')}
             />
+            <JsonLinkWrapper className="hidden-xs">
+              <Divider />
+              <JsonLink
+                href={jsonUrl}
+                onClick={() =>
+                  trackAnalytics('issue_details.event_json_clicked', {
+                    organization,
+                    group_id: parseInt(`${event.groupID}`, 10),
+                    streamline: true,
+                  })
+                }
+              >
+                {t('JSON')}
+              </JsonLink>
+            </JsonLinkWrapper>
             {hasEventError && (
               <Fragment>
                 <Divider />
@@ -299,3 +317,18 @@ const ProcessingErrorButton = styled(Button)`
     color: ${p => p.theme.red300};
   }
 `;
+
+const JsonLinkWrapper = styled('div')`
+  display: flex;
+  gap: ${space(0.5)};
+`;
+
+const JsonLink = styled(ExternalLink)`
+  color: ${p => p.theme.gray300};
+  text-decoration: underline;
+  text-decoration-color: ${p => p.theme.translucentGray200};
+
+  :hover {
+    color: ${p => p.theme.gray300};
+  }
+`;