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};