diff --git a/static/app/components/forms/fields/segmentedRadioField.tsx b/static/app/components/forms/fields/segmentedRadioField.tsx index 988bf358614af1..02b1965ab2ab0b 100644 --- a/static/app/components/forms/fields/segmentedRadioField.tsx +++ b/static/app/components/forms/fields/segmentedRadioField.tsx @@ -125,7 +125,7 @@ const RadioItem = styled('label', {shouldForwardProp})<{ &[aria-checked='true'] { border-color: ${p => p.theme.tokens.border.accent.vibrant} !important; box-shadow: inset 0 0 0 1px ${p => p.theme.tokens.focus.default}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } &:first-child { diff --git a/static/app/components/infiniteList/infiniteListItems.tsx b/static/app/components/infiniteList/infiniteListItems.tsx index bfc92c7c125246..a697134247db8d 100644 --- a/static/app/components/infiniteList/infiniteListItems.tsx +++ b/static/app/components/infiniteList/infiniteListItems.tsx @@ -153,7 +153,7 @@ const PositionedList = styled('ul')` const Footer = styled('footer')` position: absolute; bottom: 0; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; display: flex; width: 100%; flex-grow: 1; diff --git a/static/app/components/panels/panelTable.tsx b/static/app/components/panels/panelTable.tsx index 28eb677b19991e..af922f1bcfb209 100644 --- a/static/app/components/panels/panelTable.tsx +++ b/static/app/components/panels/panelTable.tsx @@ -193,7 +193,7 @@ const PanelTableHeader = styled('div')<{sticky: boolean}>` css` position: sticky; top: 0; - z-index: ${p.theme.zIndex.initial}; + z-index: 1; `} `; diff --git a/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx b/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx index 617b932510d5b5..6d828bd858d43c 100644 --- a/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx +++ b/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx @@ -106,6 +106,6 @@ const Overlay = styled('div')` grid: auto/50%; gap: ${p => p.theme.space.md}; place-content: center; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; text-align: center; `; diff --git a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx b/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx index ea4cf55fca9d04..0c0f0aba8b430f 100644 --- a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx +++ b/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx @@ -61,7 +61,7 @@ const EventColumn = styled(Timeline.Col)` position: relative; &:hover { - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/components/replays/player/bufferingOverlay.tsx b/static/app/components/replays/player/bufferingOverlay.tsx index 720d2a03f4cbe8..0e63bfa4b5a96d 100644 --- a/static/app/components/replays/player/bufferingOverlay.tsx +++ b/static/app/components/replays/player/bufferingOverlay.tsx @@ -36,5 +36,5 @@ const Message = styled('div')` background: ${p => p.theme.colors.gray400}; border-radius: ${p => p.theme.radius.md}; color: ${p => p.theme.colors.white}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; `; diff --git a/static/app/components/replays/player/fastForwardBadge.tsx b/static/app/components/replays/player/fastForwardBadge.tsx index 7e023f679c1d22..ed6e5364122311 100644 --- a/static/app/components/replays/player/fastForwardBadge.tsx +++ b/static/app/components/replays/player/fastForwardBadge.tsx @@ -35,7 +35,7 @@ const FastForwardTooltip = styled(Tooltip)` color: ${p => p.theme.colors.white}; padding: ${p => p.theme.space.lg} ${p => p.theme.space.xl}; border-top-right-radius: ${p => p.theme.radius.md}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; `; const StyledIconArrow = styled(IconArrow)` diff --git a/static/app/components/replays/player/scrubber.tsx b/static/app/components/replays/player/scrubber.tsx index e32d892763b97e..83e5ea26699c51 100644 --- a/static/app/components/replays/player/scrubber.tsx +++ b/static/app/components/replays/player/scrubber.tsx @@ -199,6 +199,6 @@ export const PlayerScrubber = styled(Scrubber)` top: 0; right: calc((var(--size) + (var(--borderWidth) * 2)) / 2 * -1); translate: 0 calc(-50% + var(--borderWidth)); - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/components/replays/table/replayTableHeader.tsx b/static/app/components/replays/table/replayTableHeader.tsx index 7ab58f6c3b420b..8e9e6e412eb73c 100644 --- a/static/app/components/replays/table/replayTableHeader.tsx +++ b/static/app/components/replays/table/replayTableHeader.tsx @@ -137,7 +137,7 @@ export function ReplayTableHeader({ const TableHeader = styled(SimpleTable.Header)` grid-row: 1; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; height: min-content; `; diff --git a/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx b/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx index 31491819f3ad05..bdb69c3e5ec599 100644 --- a/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx +++ b/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx @@ -57,7 +57,7 @@ const CloseButtonWrapper = styled('div')` right: 0; height: 100%; padding: ${p => p.theme.space.md}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; display: flex; align-items: center; `; @@ -65,6 +65,6 @@ const CloseButtonWrapper = styled('div')` const StyledSplitDivider = styled(SplitDivider)` :hover, &[data-is-held='true'] { - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/components/truncate.tsx b/static/app/components/truncate.tsx index 5d1480edb14529..3b74f50a34ae7e 100644 --- a/static/app/components/truncate.tsx +++ b/static/app/components/truncate.tsx @@ -109,7 +109,7 @@ const FullValue = styled('span')<{ ${p => p.expanded && css` - z-index: ${p.theme.zIndex.truncationFullValue}; + z-index: 1; display: block; `} `; diff --git a/static/app/components/workflowEngine/ui/footer.tsx b/static/app/components/workflowEngine/ui/footer.tsx index 754da9bb761a55..f7b666c21e5c79 100644 --- a/static/app/components/workflowEngine/ui/footer.tsx +++ b/static/app/components/workflowEngine/ui/footer.tsx @@ -19,7 +19,7 @@ const StickyFooterBase = styled('div', { box-shadow: none; justify-content: flex-end; gap: ${p => p.theme.space.lg}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; &[data-stuck] { /* TODO(design-engineering): Replace with a directional shadow token when one exists */ diff --git a/static/app/debug/notifications/views/index.tsx b/static/app/debug/notifications/views/index.tsx index 43d0e30b9c3ab9..062e57db8b585f 100644 --- a/static/app/debug/notifications/views/index.tsx +++ b/static/app/debug/notifications/views/index.tsx @@ -88,7 +88,7 @@ const HeaderContainer = styled('header')` top: 0; left: 0; right: 0; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; background: ${p => p.theme.tokens.background.primary}; `; diff --git a/static/app/stories/view/index.tsx b/static/app/stories/view/index.tsx index 4c89f17e36ca83..7fee59cbc01df8 100644 --- a/static/app/stories/view/index.tsx +++ b/static/app/stories/view/index.tsx @@ -222,7 +222,7 @@ function GlobalStoryStyles() { .messages-container { margin-top: 52px; margin-left: 256px; - z-index: ${theme.zIndex.header}; + z-index: 1; background: ${theme.tokens.background.primary}; } `; @@ -250,7 +250,7 @@ const HeaderContainer = styled('header')` top: 0; left: 0; right: 0; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; background: ${p => p.theme.tokens.background.primary}; `; diff --git a/static/app/stories/view/storySearch.tsx b/static/app/stories/view/storySearch.tsx index 22631dfa31f73b..56602cb5aa43ce 100644 --- a/static/app/stories/view/storySearch.tsx +++ b/static/app/stories/view/storySearch.tsx @@ -286,7 +286,7 @@ const StorySearchContainer = styled('div')` position: relative; width: 320px; flex-grow: 1; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; margin-left: -${p => p.theme.space.xl}; `; diff --git a/static/app/views/admin/installWizard/index.tsx b/static/app/views/admin/installWizard/index.tsx index 018a0814453d15..24eed99cb3f4db 100644 --- a/static/app/views/admin/installWizard/index.tsx +++ b/static/app/views/admin/installWizard/index.tsx @@ -189,5 +189,5 @@ const SetupWizard = styled('div')` padding: 40px 40px 20px; max-width: 1000px; margin: ${p => p.theme.space['2xl']}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; `; diff --git a/static/app/views/detectors/components/forms/common/schedulePreview.tsx b/static/app/views/detectors/components/forms/common/schedulePreview.tsx index 98db16e3da7807..456d0304e0db16 100644 --- a/static/app/views/detectors/components/forms/common/schedulePreview.tsx +++ b/static/app/views/detectors/components/forms/common/schedulePreview.tsx @@ -308,7 +308,7 @@ const OpenPeriodCountLabel = styled('div')` const StyledContainer = styled(Container)` top: 8px; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; /* * Prevent seeing content beneath in the uncovered strip above the sticky element. * Use a solid, zero-blur shadow so we don't paint over the border. diff --git a/static/app/views/discover/miniGraph.tsx b/static/app/views/discover/miniGraph.tsx index 72f77c05b41d13..7790d10cbbfb06 100644 --- a/static/app/views/discover/miniGraph.tsx +++ b/static/app/views/discover/miniGraph.tsx @@ -245,7 +245,7 @@ class MiniGraph extends Component { splitLine: { show: false, }, - zlevel: theme.zIndex.header, + zlevel: 1, }, tooltip: { show: false, diff --git a/static/app/views/explore/components/styles.tsx b/static/app/views/explore/components/styles.tsx index 4ae435fddd6b36..b839a7d6733ff8 100644 --- a/static/app/views/explore/components/styles.tsx +++ b/static/app/views/explore/components/styles.tsx @@ -67,7 +67,7 @@ export const ExploreBodySearch = styled(Layout.Body)` position: sticky; top: var(${TOP_BAR_HEIGHT_CSS_VAR}, 0px); - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; background-color: ${p => p.theme.tokens.background.primary}; border-bottom: 1px solid ${p => p.theme.tokens.border.primary}; diff --git a/static/app/views/explore/replays/detail/network/details/tabs.tsx b/static/app/views/explore/replays/detail/network/details/tabs.tsx index c247a2676937bd..d065e804fa2016 100644 --- a/static/app/views/explore/replays/detail/network/details/tabs.tsx +++ b/static/app/views/explore/replays/detail/network/details/tabs.tsx @@ -50,7 +50,7 @@ export const StyledNetworkDetailsTabs = styled(NetworkDetailsTabs)` margin-right: 0; padding-right: ${p => p.theme.space['2xl']}; background: ${p => p.theme.tokens.background.primary}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } & > li:first-child { padding-left: ${p => p.theme.space.xl}; diff --git a/static/app/views/issueDetails/streamline/eventDetails.tsx b/static/app/views/issueDetails/streamline/eventDetails.tsx index 0fc4773f06675a..74fd41533a120d 100644 --- a/static/app/views/issueDetails/streamline/eventDetails.tsx +++ b/static/app/views/issueDetails/streamline/eventDetails.tsx @@ -69,7 +69,7 @@ function StickyEventNav({event, group}: {event: Event; group: Group}) { const FloatingEventNavigation = styled(Sticky)` background: ${p => p.theme.tokens.background.primary}; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0; &[data-stuck] { diff --git a/static/app/views/issueDetails/streamline/eventListTable.tsx b/static/app/views/issueDetails/streamline/eventListTable.tsx index bbbe0087b5f431..a30c34ef8cd32b 100644 --- a/static/app/views/issueDetails/streamline/eventListTable.tsx +++ b/static/app/views/issueDetails/streamline/eventListTable.tsx @@ -147,7 +147,7 @@ export const Header = styled('div')` border-bottom: 1px solid ${p => p.theme.tokens.border.transparent.neutral.muted}; position: sticky; top: 0; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0; `; diff --git a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx index 0e5a425de53a3c..37f37f8599e748 100644 --- a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx +++ b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx @@ -213,7 +213,7 @@ const EventColumn = styled('div')` position: relative; &:hover { - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/views/issueList/actions/index.tsx b/static/app/views/issueList/actions/index.tsx index d6bddef84c9c49..835ed6d0e7f623 100644 --- a/static/app/views/issueList/actions/index.tsx +++ b/static/app/views/issueList/actions/index.tsx @@ -365,7 +365,7 @@ function shouldConfirm( } const StickyActions = styled(Sticky)` - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; /* Remove border radius from the action bar when stuck. Without this there is * a small gap where color can peek through. */ diff --git a/static/app/views/projectsDashboard/projectChart.tsx b/static/app/views/projectsDashboard/projectChart.tsx index 800aeb860d5444..f80cf7f897ff3b 100644 --- a/static/app/views/projectsDashboard/projectChart.tsx +++ b/static/app/views/projectsDashboard/projectChart.tsx @@ -173,7 +173,7 @@ export function ProjectChart({ splitLine: { show: false, }, - zlevel: theme.zIndex.header, + zlevel: 1, })), axisPointer: { // Link each x-axis together.