Skip to content
4 changes: 2 additions & 2 deletions static/app/components/emptyStateWarning.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ export function EmptyStateWarning({
return small ? (
<EmptyMessage className={className}>
<SmallMessage>
{withIcon && <StyledIconSearch variant="muted" size="lg" />}
{withIcon && <StyledIconSearch variant="accent" size="lg" />}
{children}
</SmallMessage>
</EmptyMessage>
) : (
<EmptyStreamWrapper data-test-id="empty-state" className={className}>
{withIcon && <IconSearch variant="muted" legacySize="54px" />}
{withIcon && <IconSearch variant="accent" legacySize="54px" />}
Comment thread
nsdeschenes marked this conversation as resolved.
Outdated
{children}
</EmptyStreamWrapper>
);
Expand Down
30 changes: 15 additions & 15 deletions static/app/views/explore/logs/tables/logsInfiniteTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -666,22 +666,22 @@ function EmptyRenderer({
<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.')}
Comment thread
nsdeschenes marked this conversation as resolved.
</EmptyStateText>
<Container paddingTop="md">
<Button
priority="default"
onClick={resumeAutoFetch}
aria-label={t('continue scanning')}
>
{t('Continue Scanning')}
</Button>
</Container>
</EmptyStateWarning>
</TableStatus>
);
Expand Down
24 changes: 16 additions & 8 deletions static/app/views/explore/tables/tracesTable/styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type {ComponentProps, CSSProperties} from 'react';
import {css} from '@emotion/react';
import styled from '@emotion/styled';

import {Flex} from '@sentry/scraps/layout';
import {Container, Flex} from '@sentry/scraps/layout';
import {Text} from '@sentry/scraps/text';

import {Panel} from 'sentry/components/panels/panel';
Expand Down Expand Up @@ -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}`};
`;
}) {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Praise] Nice use of the design system 🙂 I like this!

return (
<Container>
<Text size={size} style={{textAlign}}>
Comment thread
nsdeschenes marked this conversation as resolved.
Outdated
Comment thread
nsdeschenes marked this conversation as resolved.
Outdated
{children}
</Text>
Comment thread
cursor[bot] marked this conversation as resolved.
</Container>
);
}
Comment thread
nsdeschenes marked this conversation as resolved.

export const EmptyValueContainer = styled('span')`
color: ${p => p.theme.tokens.content.secondary};
Expand Down
Loading