feat(logs): Move continue scanning into full button (#112351)

This PR refreshes the continue scanning logs experience to really call
out to users that they're able to continue scanning for more data, as
the previous setup was a bit harder to read.

Refs LOGS-644

---------

Co-authored-by: GPT-5.4 <noreply@openai.com>

Author: nsdeschenes

static/app/components/emptyStateWarning.tsx

@@ -2,30 +2,33 @@ import styled from '@emotion/styled';
 
 import {EmptyMessage} from 'sentry/components/emptyMessage';
 import {IconSearch} from 'sentry/icons';
+import type {IconVariant} from 'sentry/icons/svgIcon';
 
 type Props = {
   children?: React.ReactNode;
   className?: string;
   small?: boolean;
+  variant?: IconVariant;
   withIcon?: boolean;
 };
 
 export function EmptyStateWarning({
   small = false,
+  variant = 'muted',
   withIcon = true,
   children,
   className,
 }: Props) {
   return small ? (
     <EmptyMessage className={className}>
       <SmallMessage>
-        {withIcon && <StyledIconSearch variant="muted" size="lg" />}
+        {withIcon && <StyledIconSearch variant={variant} size="lg" />}
         {children}
       </SmallMessage>
     </EmptyMessage>
   ) : (
     <EmptyStreamWrapper data-test-id="empty-state" className={className}>
-      {withIcon && <IconSearch variant="muted" legacySize="54px" />}
+      {withIcon && <IconSearch variant={variant} legacySize="54px" />}
       {children}
     </EmptyStreamWrapper>
   );

static/app/icons/svgIcon.tsx

@@ -4,6 +4,8 @@ import type {ContentVariant, IconSize} from 'sentry/utils/theme';
 
 import {useIconDefaults} from './useIconDefaults';
 
+export type IconVariant = ContentVariant | 'muted';
+
 export interface SVGIconProps extends Omit<
   React.SVGAttributes<SVGSVGElement>,
   'color' | 'type'
@@ -16,7 +18,7 @@ export interface SVGIconProps extends Omit<
   legacySize?: string;
   ref?: React.Ref<SVGSVGElement>;
   size?: IconSize;
-  variant?: ContentVariant | 'muted';
+  variant?: IconVariant;
 }
 
 export function SvgIcon(props: SVGIconProps) {

static/app/views/explore/logs/tables/logsInfiniteTable.tsx

@@ -6,7 +6,7 @@ import type {Virtualizer} from '@tanstack/react-virtual';
 import {useVirtualizer, useWindowVirtualizer} from '@tanstack/react-virtual';
 
 import {Button} from '@sentry/scraps/button';
-import {Flex, Stack} from '@sentry/scraps/layout';
+import {Container, Flex, Stack} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
@@ -662,38 +662,38 @@ function EmptyRenderer({
   if (bytesScanned && canResumeAutoFetch && resumeAutoFetch) {
     return (
       <TableStatus>
-        <EmptyStateWarning withIcon>
+        <EmptyStateWarning withIcon variant="accent">
           <EmptyStateText size="xl">{t('No logs found yet')}</EmptyStateText>
           <EmptyStateText size="md">
             {tct(
-              'We scanned [bytesScanned] already but did not find any matching logs yet.[break]You can narrow your time range or you can [continueScanning].',
-              {
-                bytesScanned: <FileSize bytes={bytesScanned} base={2} />,
-                break: <br />,
-                continueScanning: (
-                  <Button
-                    priority="link"
-                    onClick={resumeAutoFetch}
-                    aria-label={t('continue scanning')}
-                  >
-                    {t('Continue Scanning')}
-                  </Button>
-                ),
-              }
+              'We scanned [bytesScanned] so far but have not found anything matching your filters',
+              {bytesScanned: <FileSize bytes={bytesScanned} base={2} />}
             )}
           </EmptyStateText>
+          <EmptyStateText size="md">
+            {t('We can keep digging or you can narrow down your search.')}
+          </EmptyStateText>
+          <Container paddingTop="md">
+            <Button
+              priority="default"
+              onClick={resumeAutoFetch}
+              aria-label={t('continue scanning')}
+            >
+              {t('Continue Scanning')}
+            </Button>
+          </Container>
         </EmptyStateWarning>
       </TableStatus>
     );
   }
 
   return (
     <TableStatus>
-      <EmptyStateWarning withIcon>
+      <EmptyStateWarning withIcon variant="accent">
         <EmptyStateText size="xl">{t('No logs found')}</EmptyStateText>
         <EmptyStateText size="md">
           {tct(
-            'Try adjusting your filters or get started with sending logs by checking these [instructions]',
+            'Try adjusting your filters or get started with sending logs by checking these [instructions].',
             {
               instructions: (
                 <ExternalLink href={LOGS_INSTRUCTIONS_URL}>

static/app/views/explore/tables/tracesTable/styles.tsx

@@ -1,8 +1,8 @@
-import type {ComponentProps, CSSProperties} from 'react';
+import type {ComponentProps} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {Flex} from '@sentry/scraps/layout';
+import {Container, Flex, type Responsive} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {Panel} from 'sentry/components/panels/panel';
@@ -123,15 +123,23 @@ export const BreakdownPanelItem = styled(StyledPanelItem)<{highlightedSliceName:
         `}
 `;
 
-export const EmptyStateText = styled('div')<{
+export function EmptyStateText({
+  children,
+  size,
+  textAlign,
+}: {
+  children: React.ReactNode;
   size: 'xl' | 'md';
-  textAlign?: CSSProperties['textAlign'];
-}>`
-  color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.font.size[p.size]};
-  padding-bottom: ${p => p.theme.space.md};
-  ${p => p.textAlign && `text-align: ${p.textAlign}`};
-`;
+  textAlign?: Responsive<'left' | 'center' | 'right' | 'justify'>;
+}) {
+  return (
+    <Container>
+      <Text as="div" size={size} align={textAlign} variant="muted">
+        {children}
+      </Text>
+    </Container>
+  );
+}
 
 export const EmptyValueContainer = styled('span')`
   color: ${p => p.theme.tokens.content.secondary};