diff --git a/static/app/components/emptyStateWarning.tsx b/static/app/components/emptyStateWarning.tsx
index eb366294bfaaf3..6f2df843fb4606 100644
--- a/static/app/components/emptyStateWarning.tsx
+++ b/static/app/components/emptyStateWarning.tsx
@@ -2,16 +2,19 @@ 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,
@@ -19,13 +22,13 @@ export function EmptyStateWarning({
return small ? (
- {withIcon && }
+ {withIcon && }
{children}
) : (
- {withIcon && }
+ {withIcon && }
{children}
);
diff --git a/static/app/icons/svgIcon.tsx b/static/app/icons/svgIcon.tsx
index 8ac1f9d8960eca..d17ba35473e14c 100644
--- a/static/app/icons/svgIcon.tsx
+++ b/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,
'color' | 'type'
@@ -16,7 +18,7 @@ export interface SVGIconProps extends Omit<
legacySize?: string;
ref?: React.Ref;
size?: IconSize;
- variant?: ContentVariant | 'muted';
+ variant?: IconVariant;
}
export function SvgIcon(props: SVGIconProps) {
diff --git a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx b/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
index 2741399e6abf02..ef55e746115331 100644
--- a/static/app/views/explore/logs/tables/logsInfiniteTable.tsx
+++ b/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,26 +662,26 @@ function EmptyRenderer({
if (bytesScanned && canResumeAutoFetch && resumeAutoFetch) {
return (
-
+
{t('No logs found yet')}
{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: ,
- break:
,
- continueScanning: (
-
- ),
- }
+ 'We scanned [bytesScanned] so far but have not found anything matching your filters',
+ {bytesScanned: }
)}
+
+ {t('We can keep digging or you can narrow down your search.')}
+
+
+
+
);
@@ -689,11 +689,11 @@ function EmptyRenderer({
return (
-
+
{t('No logs found')}
{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: (
diff --git a/static/app/views/explore/tables/tracesTable/styles.tsx b/static/app/views/explore/tables/tracesTable/styles.tsx
index 89df37c1715811..42d9d3f68c8e72 100644
--- a/static/app/views/explore/tables/tracesTable/styles.tsx
+++ b/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 (
+
+
+ {children}
+
+
+ );
+}
export const EmptyValueContainer = styled('span')`
color: ${p => p.theme.tokens.content.secondary};