diff --git a/static/app/components/events/highlights/highlightsIconSummary.tsx b/static/app/components/events/highlights/highlightsIconSummary.tsx index 79fbe61ea29f1f..14787f2e728df4 100644 --- a/static/app/components/events/highlights/highlightsIconSummary.tsx +++ b/static/app/components/events/highlights/highlightsIconSummary.tsx @@ -2,6 +2,8 @@ import {Fragment} from 'react'; import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; +import {Flex} from '@sentry/scraps/layout'; + import {useFetchEventAttachments} from 'sentry/actionCreators/events'; import {openModal} from 'sentry/actionCreators/modal'; import {Button} from 'sentry/components/core/button'; @@ -156,7 +158,7 @@ export function HighlightsIconSummary({event, group}: HighlightsIconSummaryProps )} {items.map((item, index) => ( - + {item.icon}
{item.title}
@@ -166,7 +168,7 @@ export function HighlightsIconSummary({event, group}: HighlightsIconSummaryProps )} - + ))} {projectSlug && projectId && ( + @@ -213,7 +215,7 @@ function ReleaseHighlight({ - + ); } @@ -223,14 +225,14 @@ function EnvironmentHighlight({environmentTag}: {environmentTag: EventTag | unde } return ( - + {environmentTag.value} - + ); } @@ -239,14 +241,6 @@ const IconBar = styled('div')` padding: 0; `; -const IconContainer = styled('div')` - display: flex; - gap: ${space(1)}; - align-items: center; - flex-shrink: 0; - min-height: 24px; -`; - const IconDescription = styled('div')` display: flex; gap: ${space(0.75)}; diff --git a/static/app/components/events/interfaces/crashContent/exception/actionableItems.tsx b/static/app/components/events/interfaces/crashContent/exception/actionableItems.tsx index a2cbd6948d0b0b..519329c8265d2e 100644 --- a/static/app/components/events/interfaces/crashContent/exception/actionableItems.tsx +++ b/static/app/components/events/interfaces/crashContent/exception/actionableItems.tsx @@ -4,6 +4,8 @@ import styled from '@emotion/styled'; import startCase from 'lodash/startCase'; import moment from 'moment-timezone'; +import {Flex} from '@sentry/scraps/layout'; + import {Alert} from 'sentry/components/core/alert'; import {Button} from 'sentry/components/core/button'; import KeyValueList from 'sentry/components/events/interfaces/keyValueList'; @@ -297,7 +299,7 @@ function ExpandableErrorList({handleExpandClick, errorList}: ExpandableErrorList return ( - + {title} ({numErrors}) @@ -311,7 +313,7 @@ function ExpandableErrorList({handleExpandClick, errorList}: ExpandableErrorList > {expanded ? t('Collapse') : t('Expand')} - + {expanded && (
{desc && {desc}} @@ -499,13 +501,6 @@ const ToggleButton = styled(Button)` } `; -const ErrorTitleFlex = styled('div')` - display: flex; - justify-content: space-between; - align-items: center; - gap: ${space(1)}; -`; - const HiddenDiv = styled('div')` display: none; `; diff --git a/static/app/views/issueDetails/actions/index.tsx b/static/app/views/issueDetails/actions/index.tsx index a4ebee68132e4d..91cfb7d1b87301 100644 --- a/static/app/views/issueDetails/actions/index.tsx +++ b/static/app/views/issueDetails/actions/index.tsx @@ -397,10 +397,10 @@ export function GroupActions({group, project, disabled, event}: GroupActionsProp onUpdate, }); return ( - + {hasStreamlinedUI && (isResolved || isIgnored ? ( - + @@ -443,7 +443,7 @@ export function GroupActions({group, project, disabled, event}: GroupActionsProp {isResolved ? t('Unresolve') : t('Unarchive')} )} - + ) : ( {resolveCap.enabled && ( @@ -679,16 +679,10 @@ export function GroupActions({group, project, disabled, event}: GroupActionsProp )} )} - + ); } -const ActionWrapper = styled('div')` - display: flex; - align-items: center; - gap: ${space(0.5)}; -`; - const ResolvedWrapper = styled('div')` display: flex; gap: ${space(1.5)}; @@ -698,12 +692,6 @@ const ResolvedWrapper = styled('div')` font-size: ${p => p.theme.fontSize.lg}; `; -const ResolvedActionWapper = styled('div')` - display: flex; - gap: ${space(1)}; - align-items: center; -`; - const ReasonBanner = styled('div')` font-weight: normal; color: ${p => p.theme.colors.green500}; diff --git a/static/app/views/issueDetails/actions/shareModal.tsx b/static/app/views/issueDetails/actions/shareModal.tsx index 0f6de2f294607b..ad9206cdf95eb1 100644 --- a/static/app/views/issueDetails/actions/shareModal.tsx +++ b/static/app/views/issueDetails/actions/shareModal.tsx @@ -1,6 +1,8 @@ import {Fragment, useCallback, useRef, useState} from 'react'; import styled from '@emotion/styled'; +import {Stack} from '@sentry/scraps/layout'; + import {bulkUpdate} from 'sentry/actionCreators/group'; import {addErrorMessage} from 'sentry/actionCreators/indicator'; import type {ModalRenderProps} from 'sentry/actionCreators/modal'; @@ -129,7 +131,7 @@ export default function ShareIssueModal({

{t('Share Issue')}

- + {issueUrl} @@ -245,18 +247,12 @@ export default function ShareIssueModal({ )} )} - + ); } -const ModalContent = styled('div')` - display: flex; - gap: ${space(1)}; - flex-direction: column; -`; - const UrlContainer = styled('div')` display: grid; grid-template-columns: 1fr max-content max-content; diff --git a/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx b/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx index 06be062aec0940..3516a09cb9bae6 100644 --- a/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx +++ b/static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx @@ -1,7 +1,7 @@ import {useEffect} from 'react'; import styled from '@emotion/styled'; -import {Flex} from 'sentry/components/core/layout'; +import {Flex, Stack} from 'sentry/components/core/layout'; import EmptyStateWarning from 'sentry/components/emptyStateWarning'; import LoadingError from 'sentry/components/loadingError'; import LoadingIndicator from 'sentry/components/loadingIndicator'; @@ -151,7 +151,7 @@ function GroupEventAttachments({project, group}: GroupEventAttachmentsProps) { }; return ( - + {hasStreamlinedUI ? ( @@ -169,7 +169,7 @@ function GroupEventAttachments({project, group}: GroupEventAttachmentsProps) { ? renderScreenshotGallery() : renderAttachmentsTable()} - + ); } @@ -197,9 +197,3 @@ const ScreenshotGrid = styled('div')` const NoMarginPagination = styled(Pagination)` margin: 0; `; - -const Wrapper = styled('div')` - display: flex; - flex-direction: column; - gap: ${space(2)}; -`; diff --git a/static/app/views/issueDetails/groupEventAttachments/screenshotCard.tsx b/static/app/views/issueDetails/groupEventAttachments/screenshotCard.tsx index 59085608ce4af1..a5871e3222d462 100644 --- a/static/app/views/issueDetails/groupEventAttachments/screenshotCard.tsx +++ b/static/app/views/issueDetails/groupEventAttachments/screenshotCard.tsx @@ -1,6 +1,8 @@ import {useState} from 'react'; import styled from '@emotion/styled'; +import {Flex, Stack} from '@sentry/scraps/layout'; + import {openModal} from 'sentry/actionCreators/modal'; import Card from 'sentry/components/card'; import {openConfirmModal} from 'sentry/components/confirm'; @@ -81,8 +83,8 @@ export function ScreenshotCard({ return ( - - + + {eventAttachment.name} @@ -96,7 +98,7 @@ export function ScreenshotCard({
- + )} /> - + openVisualizationModal()} @@ -158,12 +160,6 @@ export function ScreenshotCard({ ); } -const ScreenshotInfo = styled('div')` - display: flex; - flex-direction: column; - min-width: 0; -`; - const StyledCard = styled(Card)` margin: 0; padding: ${space(1)} ${space(1.5)}; @@ -178,13 +174,6 @@ const AttachmentName = styled('span')` text-overflow: ellipsis; `; -const CardHeader = styled('div')` - display: flex; - justify-content: space-between; - padding-bottom: ${space(1)}; - flex-shrink: 0; -`; - const CardBody = styled('div')` max-height: 250px; min-height: 250px; diff --git a/static/app/views/issueDetails/groupEventCarousel.tsx b/static/app/views/issueDetails/groupEventCarousel.tsx index 2acb3ab99717e3..778670c66851a8 100644 --- a/static/app/views/issueDetails/groupEventCarousel.tsx +++ b/static/app/views/issueDetails/groupEventCarousel.tsx @@ -4,6 +4,8 @@ import styled from '@emotion/styled'; import omit from 'lodash/omit'; import moment from 'moment-timezone'; +import {Flex} from '@sentry/scraps/layout'; + import type {ButtonProps} from 'sentry/components/core/button'; import {Button} from 'sentry/components/core/button'; import {LinkButton} from 'sentry/components/core/button/linkButton'; @@ -369,7 +371,7 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous const {copy} = useCopyToClipboard(); return ( - +
@@ -428,7 +430,7 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
- + - - + + ); } -const CarouselAndButtonsWrapper = styled('div')` - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: ${space(1)}; - margin-bottom: ${space(0.5)}; -`; - const EventHeading = styled('div')` display: flex; align-items: center; @@ -478,12 +472,6 @@ const EventHeading = styled('div')` } `; -const ActionsWrapper = styled('div')` - display: flex; - align-items: center; - gap: ${space(0.5)}; -`; - const StyledNavButton = styled(LinkButton)` border-radius: 0; `; diff --git a/static/app/views/issueDetails/groupMerged/mergedItem.tsx b/static/app/views/issueDetails/groupMerged/mergedItem.tsx index 3132d823fd0547..783055e20f4465 100644 --- a/static/app/views/issueDetails/groupMerged/mergedItem.tsx +++ b/static/app/views/issueDetails/groupMerged/mergedItem.tsx @@ -155,11 +155,11 @@ function MergedItem({fingerprint, totalFingerprint}: Props) { size="xs" style={{marginLeft: space(1)}} /> - + {latestEvent.title} - + ) : null} @@ -205,10 +205,4 @@ const MergedEventList = styled('div')` background-color: ${p => p.theme.tokens.background.primary}; `; -const EventDetails = styled('div')` - display: flex; - justify-content: space-between; - padding: ${space(1)}; -`; - export default MergedItem; diff --git a/static/app/views/issueDetails/groupRelatedIssues/index.tsx b/static/app/views/issueDetails/groupRelatedIssues/index.tsx index 5c0d2392168d36..a5d0f30f9b62de 100644 --- a/static/app/views/issueDetails/groupRelatedIssues/index.tsx +++ b/static/app/views/issueDetails/groupRelatedIssues/index.tsx @@ -2,6 +2,8 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; +import {Flex} from '@sentry/scraps/layout'; + import {LinkButton} from 'sentry/components/core/button/linkButton'; import {Link} from 'sentry/components/core/link'; import GroupList from 'sentry/components/issues/groupList'; @@ -103,10 +105,10 @@ function RelatedIssuesSection({group, relationType}: RelatedIssuesSectionProps) {title} - + {extraInfo} {openIssuesButton} - + p.theme.tokens.content.secondary}; } `; - -const TextButtonWrapper = styled('div')` - align-items: center; - display: flex; - justify-content: space-between; - margin-bottom: ${space(1)}; - width: 100%; -`; diff --git a/static/app/views/issueDetails/groupReplays/groupReplays.tsx b/static/app/views/issueDetails/groupReplays/groupReplays.tsx index 3120d8351f8d87..6da7a4bad3a66f 100644 --- a/static/app/views/issueDetails/groupReplays/groupReplays.tsx +++ b/static/app/views/issueDetails/groupReplays/groupReplays.tsx @@ -3,6 +3,8 @@ import {css} from '@emotion/react'; import styled from '@emotion/styled'; import type {Location, Query} from 'history'; +import {Flex, Stack} from '@sentry/scraps/layout'; + import {Button} from 'sentry/components/core/button'; import * as Layout from 'sentry/components/layouts/thirds'; import Placeholder from 'sentry/components/placeholder'; @@ -121,17 +123,17 @@ function GroupReplaysContent({group}: Props) { // Shown on load and no replay data available return ( - + {hasStreamlinedUI ? : null} - + {isFetching ? ( ) : ( t('No replay data available.') )} - - + + - + {hasStreamlinedUI ? : null} - + {replayCount > 50 ? tn( @@ -163,8 +165,8 @@ function GroupReplaysContent({group}: Props) { tn('is %s replay', 'are %s replays', replayCount), tn('%s event', '%s events', group.count) )} - - + + ` `} `; -const ReplayCountHeader = styled('div')` - display: flex; - align-items: center; - gap: ${space(1)}; -`; - -const ReplayHeader = styled('div')` - display: flex; - flex-direction: column; -`; - const StyledBreak = styled('hr')` margin-top: ${space(1)}; margin-bottom: ${space(1.5)}; diff --git a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/item.tsx b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/item.tsx index 714890c79bfd62..84825deb340098 100644 --- a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/item.tsx +++ b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/item.tsx @@ -3,6 +3,8 @@ import {css} from '@emotion/react'; import styled from '@emotion/styled'; import classNames from 'classnames'; +import {Flex} from '@sentry/scraps/layout'; + import {openDiffModal} from 'sentry/actionCreators/modal'; import {Button} from 'sentry/components/core/button'; import {Checkbox} from 'sentry/components/core/checkbox'; @@ -116,14 +118,14 @@ export function SimilarStackTraceItem(props: Props) { - + - + - + {similarInterfaces.map(interfaceName => { const avgScore = aggregate?.[interfaceName]; @@ -155,7 +157,7 @@ export function SimilarStackTraceItem(props: Props) { ); })} - + ); } @@ -177,14 +179,6 @@ const StyledPanelItem = styled(PanelItem)` padding: ${space(1)} 0; `; -const Columns = styled('div')` - display: flex; - align-items: center; - flex-shrink: 0; - min-width: 350px; - width: 350px; -`; - const columnStyle = css` flex: 1; flex-shrink: 0; @@ -202,13 +196,6 @@ const StyledCount = styled(Count)` font-variant-numeric: tabular-nums; `; -const Diff = styled('div')` - height: 100%; - display: flex; - align-items: center; - margin-right: ${space(0.25)}; -`; - const EventDetails = styled('div')` flex: 1; display: block; diff --git a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/list.tsx b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/list.tsx index b584be44fc64bf..0d33634367cd4c 100644 --- a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/list.tsx +++ b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/list.tsx @@ -1,5 +1,6 @@ import {Fragment, useState} from 'react'; -import styled from '@emotion/styled'; + +import {Flex} from '@sentry/scraps/layout'; import {Button} from 'sentry/components/core/button'; import EmptyStateWarning from 'sentry/components/emptyStateWarning'; @@ -9,7 +10,6 @@ import PanelBody from 'sentry/components/panels/panelBody'; import SimilarSpectrum from 'sentry/components/similarSpectrum'; import {t} from 'sentry/locale'; import type {SimilarItem} from 'sentry/stores/groupingStore'; -import {space} from 'sentry/styles/space'; import type {Project} from 'sentry/types/project'; import useOrganization from 'sentry/utils/useOrganization'; @@ -69,7 +69,7 @@ function List({ return ( -
+ {!hasSimilarityEmbeddingsFeature && ( )} -
+ + - + )} @@ -119,15 +119,3 @@ function List({ } export default List; - -const Header = styled('div')` - display: flex; - justify-content: flex-end; - margin-bottom: ${space(1)}; -`; - -const Footer = styled('div')` - display: flex; - justify-content: center; - padding: ${space(1.5)}; -`; diff --git a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/toolbar.tsx b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/toolbar.tsx index 07c3b641ac28aa..c47996ba8e2c87 100644 --- a/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/toolbar.tsx +++ b/static/app/views/issueDetails/groupSimilarIssues/similarStackTrace/toolbar.tsx @@ -1,6 +1,8 @@ import {Component} from 'react'; import styled from '@emotion/styled'; +import {Flex} from '@sentry/scraps/layout'; + import {addSuccessMessage} from 'sentry/actionCreators/indicator'; import Confirm from 'sentry/components/confirm'; import {Button} from 'sentry/components/core/button'; @@ -82,7 +84,7 @@ class SimilarToolbar extends Component { return ( - + { {t('Merge %s', `(${mergeCount || 0})`)} - + - + {t('Events')} {t('Exception')} {!hasSimilarityEmbeddingsFeature && ( {t('Message')} )} - + ); } } export default SimilarToolbar; -const Columns = styled('div')` - display: flex; - align-items: center; - flex-shrink: 0; - min-width: 325px; - width: 325px; -`; - const StyledToolbarHeader = styled(ToolbarHeader)` flex: 1; flex-shrink: 0; @@ -122,9 +116,3 @@ const StyledToolbarHeader = styled(ToolbarHeader)` justify-content: center; padding: ${space(0.5)} 0; `; - -const ButtonPanel = styled('div')` - display: flex; - align-items: left; - gap: ${space(1)}; -`; diff --git a/static/app/views/issueDetails/header.tsx b/static/app/views/issueDetails/header.tsx index e64c6ad1acc831..b60fdb4a8fb143 100644 --- a/static/app/views/issueDetails/header.tsx +++ b/static/app/views/issueDetails/header.tsx @@ -3,6 +3,8 @@ import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; import omit from 'lodash/omit'; +import {Flex} from '@sentry/scraps/layout'; + import GuideAnchor from 'sentry/components/assistant/guideAnchor'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; import {Badge} from 'sentry/components/core/badge'; @@ -211,7 +213,7 @@ function GroupHeader({baseUrl, group, organization, event, project}: Props) { return (
- + - + @@ -299,14 +301,6 @@ function GroupHeader({baseUrl, group, organization, event, project}: Props) { export default GroupHeader; -const BreadcrumbActionWrapper = styled('div')` - display: flex; - flex-direction: row; - justify-content: space-between; - gap: ${space(1)}; - align-items: center; -`; - const HeaderRow = styled('div')` display: flex; gap: ${space(2)}; diff --git a/static/app/views/issueDetails/shortIdBreadcrumb.tsx b/static/app/views/issueDetails/shortIdBreadcrumb.tsx index f315883f135ffc..549da0e97b8a6d 100644 --- a/static/app/views/issueDetails/shortIdBreadcrumb.tsx +++ b/static/app/views/issueDetails/shortIdBreadcrumb.tsx @@ -1,6 +1,8 @@ import {useCallback} from 'react'; import styled from '@emotion/styled'; +import {Flex} from '@sentry/scraps/layout'; + import {Tooltip} from 'sentry/components/core/tooltip'; import {DropdownMenu} from 'sentry/components/dropdownMenu'; import ProjectBadge from 'sentry/components/idBadge/projectBadge'; @@ -72,7 +74,7 @@ export function ShortIdBreadcrumb({ } return ( - + - + ); } -const Wrapper = styled('div')` - display: flex; - gap: ${space(1)}; - align-items: center; -`; - const StyledShortId = styled(ShortId)` font-family: ${p => p.theme.text.family}; font-size: ${p => p.theme.fontSize.md}; diff --git a/static/app/views/issueDetails/streamline/eventTitle.tsx b/static/app/views/issueDetails/streamline/eventTitle.tsx index 0c712ad47be087..ee8de7de22a181 100644 --- a/static/app/views/issueDetails/streamline/eventTitle.tsx +++ b/static/app/views/issueDetails/streamline/eventTitle.tsx @@ -3,6 +3,8 @@ import {css, useTheme} from '@emotion/react'; import styled from '@emotion/styled'; import Color from 'color'; +import {Flex} from '@sentry/scraps/layout'; + import {Button} from 'sentry/components/core/button'; import {ExternalLink} from 'sentry/components/core/link'; import {useAutofixData} from 'sentry/components/events/autofix/useAutofix'; @@ -162,7 +164,7 @@ export function EventTitle({event, group, ref, ...props}: EventNavigationProps) css={grayText} aria-label={t('Event timestamp')} /> - + - + {actionableItems && actionableItems.length > 0 && ( @@ -251,12 +253,6 @@ const ProcessingErrorButton = styled(Button)` } `; -const JsonLinkWrapper = styled('div')` - display: flex; - align-items: center; - gap: ${p => p.theme.space.xs}; -`; - const JsonLink = styled(ExternalLink)` color: ${p => p.theme.tokens.content.secondary}; text-decoration: underline; diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx index 798059cb4c1da3..a70bbbce215944 100644 --- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx +++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx @@ -4,6 +4,8 @@ import {useTheme, type Theme} from '@emotion/react'; import styled from '@emotion/styled'; import Color from 'color'; +import {Stack} from '@sentry/scraps/layout'; + import {LinkButton} from 'sentry/components/core/button/linkButton'; import {Link} from 'sentry/components/core/link'; import {Text} from 'sentry/components/core/text'; @@ -303,9 +305,9 @@ export default function IssueTagsPreview({ if (isPending || isHighlightPending) { return ( - + - + ); } @@ -314,7 +316,7 @@ export default function IssueTagsPreview({ } return ( - + {tagsToPreview.map(tag => ( @@ -324,18 +326,10 @@ export default function IssueTagsPreview({ tags={tagsToPreview} includeFeatureFlags={includeFeatureFlags} /> - + ); } -const IssueTagPreviewSection = styled('div')` - display: flex; - flex-direction: column; - justify-content: center; - gap: ${p => p.theme.space.xs}; - padding: ${p => p.theme.space.md} ${p => p.theme.space.lg}; -`; - const TagsPreview = styled('div')` width: 340px; display: grid; diff --git a/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx b/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx index 5f1fab7e0d8a75..f153e3a3fd6832 100644 --- a/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx +++ b/static/app/views/issueDetails/streamline/sidebar/seerDrawer.tsx @@ -108,10 +108,10 @@ export function SeerDrawer({group, project, event}: SeerDrawerProps) { crumbs={[ { label: ( - + {group.shortId} - + ), }, {label: getShortEventId(event.id)}, @@ -164,10 +164,10 @@ export function SeerDrawer({group, project, event}: SeerDrawerProps) { crumbs={[ { label: ( - + {group.shortId} - + ), }, {label: getShortEventId(event.id)}, @@ -193,10 +193,10 @@ export function SeerDrawer({group, project, event}: SeerDrawerProps) { crumbs={[ { label: ( - + {group.shortId} - + ), }, {label: getShortEventId(event.id)}, @@ -380,10 +380,10 @@ function LegacySeerDrawer({group, project, event, aiConfig}: LegacySeerDrawerPro crumbs={[ { label: ( - + {group.shortId} - + ), }, {label: getShortEventId(event.id)}, @@ -614,12 +614,6 @@ const NavigationCrumbs = styled(NavigationBreadcrumbs)` padding: 0; `; -const CrumbContainer = styled('div')` - display: flex; - gap: ${space(1)}; - align-items: center; -`; - const ShortId = styled('div')` font-family: ${p => p.theme.text.family}; font-size: ${p => p.theme.fontSize.md}; diff --git a/static/app/views/issueDetails/streamline/sidebar/seerNotices.tsx b/static/app/views/issueDetails/streamline/sidebar/seerNotices.tsx index bd3ff2e3d16b89..211573756e0228 100644 --- a/static/app/views/issueDetails/streamline/sidebar/seerNotices.tsx +++ b/static/app/views/issueDetails/streamline/sidebar/seerNotices.tsx @@ -8,7 +8,7 @@ import feedbackOnboardingImg from 'sentry-images/spot/feedback-onboarding.svg'; import onboardingCompass from 'sentry-images/spot/onboarding-compass.svg'; import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg'; -import {Flex} from '@sentry/scraps/layout'; +import {Flex, Stack} from '@sentry/scraps/layout'; import {Alert} from 'sentry/components/core/alert'; import {Button} from 'sentry/components/core/button'; @@ -212,7 +212,7 @@ export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNotice const anyStepIncomplete = incompleteStepIndices.length > 0; return ( - + {/* Collapsed summary */} {!isLoadingPreferences && anyStepIncomplete && stepsCollapsed && ( setStepsCollapsed(false)}> @@ -248,9 +248,9 @@ export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNotice title={t('Set Up the GitHub Integration')} isCompleted={!needsGithubIntegration} > - - - + + + {tct( 'Seer is [bold:a lot better] when it has your codebase as context.', @@ -287,15 +287,15 @@ export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNotice } )} - - - + + + - - + + - - - + + + {t('Select the repos Seer can explore in this project.')} @@ -329,12 +329,12 @@ export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNotice 'You can also configure working branches and custom instructions so Seer fits your unique workflow.' )} - - - + + + - - + + - - - + + + {t( 'Let Seer automatically deep dive into incoming issues, so you wake up to solutions, not headaches.' )} - - - + + + - - + + - - - + + + {t( 'Seer scans all your issues and highlights the ones that are likely quick to fix.' @@ -409,12 +409,12 @@ export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNotice 'Star the recommended issue view to keep an eye on quick debugging opportunities. You can customize the view later.' )} - - - + + + - - + + - - - + + + {cursorIntegration ? ( @@ -492,15 +492,15 @@ export function SeerNotices({groupId, hasGithubIntegration, project}: SeerNotice )} - - - + + + - - + + )} - + ); } @@ -590,18 +590,6 @@ const StyledAlert = styled(Alert)` margin-bottom: ${space(2)}; `; -const NoticesContainer = styled('div')` - display: flex; - flex-direction: column; - align-items: stretch; -`; - -const CardDescription = styled('div')` - display: flex; - flex-direction: column; - gap: ${space(1)}; -`; - const CardIllustration = styled('img')` width: 100%; max-width: 200px; @@ -620,30 +608,6 @@ const CursorPluginIcon = styled('div')` transform: translateY(3px); `; -const StepContentRow = styled('div')` - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - width: 100%; - gap: ${space(3)}; -`; - -const StepTextCol = styled('div')` - display: flex; - flex-direction: column; - gap: ${space(2)}; - flex: 0 0 75%; - min-width: 0; -`; - -const StepImageCol = styled('div')` - display: flex; - align-items: flex-end; - justify-content: flex-end; - flex-grow: 1; -`; - const StepsHeader = styled('h3')` display: flex; align-items: center; diff --git a/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx b/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx index 813f2eb2087ccc..393be6ad17c641 100644 --- a/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx +++ b/static/app/views/issueDetails/streamline/sidebar/seerSection.tsx @@ -4,6 +4,8 @@ import styled from '@emotion/styled'; import autofixSetupImg from 'sentry-images/features/autofix-setup.svg'; +import {Stack} from '@sentry/scraps/layout'; + import {Button} from 'sentry/components/core/button'; import {Text} from 'sentry/components/core/text'; import { @@ -34,19 +36,19 @@ import {SeerSectionCtaButton} from './seerSectionCtaButton'; function SeerWelcomeEntrypoint() { return ( - + {t('Meet Seer, the AI debugging agent.')} - + Seer AI debugging agent - + {t( 'Find the root cause of the issue, and even open a PR to fix it, in minutes.' )} - + ); } @@ -222,7 +224,7 @@ export default function SeerSection({ sectionKey={SectionKey.SEER} preventCollapse={!hasStreamlinedUI} > - + {renderSectionContent()} {event && showCtaButton && @@ -243,16 +245,11 @@ export default function SeerSection({ hasStreamlinedUI={hasStreamlinedUI} /> ))} - + ); } -const SeerSectionContainer = styled('div')` - display: flex; - flex-direction: column; -`; - const Summary = styled('div')` margin-bottom: ${space(0.5)}; position: relative; @@ -322,9 +319,3 @@ const WelcomeImageContainer = styled('div')` height: auto; } `; - -const WelcomeTextContainer = styled('div')` - display: flex; - flex-direction: column; - gap: ${p => p.theme.space.sm}; -`; diff --git a/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx b/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx index b739a8f363c6e3..c4d83dbe03ec31 100644 --- a/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx +++ b/static/app/views/issueDetails/streamline/sidebar/seerSectionCtaButton.tsx @@ -2,6 +2,8 @@ import {useEffect, useRef} from 'react'; import styled from '@emotion/styled'; import color from 'color'; +import {Flex} from '@sentry/scraps/layout'; + import {addSuccessMessage} from 'sentry/actionCreators/indicator'; import {LinkButton} from 'sentry/components/core/button/linkButton'; import { @@ -230,13 +232,13 @@ export function SeerSectionCtaButton({ priority="primary" > {getButtonText()} - + {isAutofixInProgress ? ( ) : ( )} - + ); } @@ -246,15 +248,6 @@ const StyledButton = styled(LinkButton)` width: 100%; `; -const ChevronContainer = styled('div')` - margin-left: ${space(0.5)}; - height: 16px; - width: 16px; - display: flex; - align-items: center; - justify-content: center; -`; - const StyledLoadingIndicator = styled(LoadingIndicator)` position: relative; margin-left: ${space(1)}; diff --git a/static/app/views/issueList/filters.tsx b/static/app/views/issueList/filters.tsx index 83631744547f77..d03bd6a3a6138c 100644 --- a/static/app/views/issueList/filters.tsx +++ b/static/app/views/issueList/filters.tsx @@ -1,5 +1,7 @@ import styled from '@emotion/styled'; +import {Flex} from '@sentry/scraps/layout'; + import {DatePageFilter} from 'sentry/components/organizations/datePageFilter'; import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter'; import PageFilterBar from 'sentry/components/organizations/pageFilterBar'; @@ -30,7 +32,7 @@ function IssueListFilters({query, sort, onSortChange, onSearch}: Props) { - + - + ); } @@ -87,13 +89,4 @@ const StyledPageFilterBar = styled(PageFilterBar)` } `; -const SortSaveContainer = styled('div')` - display: flex; - align-items: start; - gap: ${space(1)}; - grid-area: sort-save; - - justify-self: end; -`; - export default IssueListFilters; diff --git a/static/app/views/issueList/newViewEmptyState.tsx b/static/app/views/issueList/newViewEmptyState.tsx index 30f37e92dc3d62..71aa7b74f2ae50 100644 --- a/static/app/views/issueList/newViewEmptyState.tsx +++ b/static/app/views/issueList/newViewEmptyState.tsx @@ -1,6 +1,8 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; +import {Stack} from '@sentry/scraps/layout'; + import InteractionStateLayer from 'sentry/components/core/interactionStateLayer'; import {Link} from 'sentry/components/core/link'; import {Tooltip} from 'sentry/components/core/tooltip'; @@ -79,7 +81,7 @@ export function NewViewEmptyState() { ); return ( - + {t('Suggested Queries')}

{t('Here are a few to get you started.')}

@@ -127,7 +129,7 @@ export function NewViewEmptyState() { )} - + ); } @@ -144,14 +146,6 @@ const TooltipSubLink = styled(Link)` } `; -const Wrapper = styled('div')` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-top: ${space(4)}; -`; - const Card = styled(Panel)` width: 80%; background-color: ${p => p.theme.tokens.background.secondary}; diff --git a/static/app/views/issueList/pages/dynamicGrouping.tsx b/static/app/views/issueList/pages/dynamicGrouping.tsx index 8efd44bca30ffe..958805804634e9 100644 --- a/static/app/views/issueList/pages/dynamicGrouping.tsx +++ b/static/app/views/issueList/pages/dynamicGrouping.tsx @@ -2,7 +2,7 @@ import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react import styled from '@emotion/styled'; import * as qs from 'query-string'; -import {Container, Flex} from '@sentry/scraps/layout'; +import {Container, Flex, Stack} from '@sentry/scraps/layout'; import {Heading, Text} from '@sentry/scraps/text'; import {bulkUpdate} from 'sentry/actionCreators/group'; @@ -242,7 +242,7 @@ function ClusterCard({ return ( - + {cluster.impact && ( 0 || clusterStats.hasRegressedIssues || clusterStats.isEscalating) && ( - + {clusterStats.newIssuesCount > 0 && ( @@ -290,11 +290,11 @@ function ClusterCard({ {t('Escalating')} )} - + )} - + - + {clusterStats.isPending ? ( @@ -308,8 +308,8 @@ function ClusterCard({ {tn('event', 'events', clusterStats.totalEvents)} )} - - + + {clusterStats.isPending ? ( @@ -323,13 +323,13 @@ function ClusterCard({ {tn('user', 'users', clusterStats.totalUsers)} )} - + {!clusterStats.isPending && (clusterStats.firstSeen || clusterStats.lastSeen) && ( {clusterStats.lastSeen && ( - + - + )} {clusterStats.firstSeen && ( - + - + )} )} - - + + - + {cluster.error_type && ( {t('Error')} @@ -370,13 +370,13 @@ function ClusterCard({ {cluster.location} )} - + {allTags.length > 0 && ( - + {allTags.map(tag => ( {tag} ))} - + )} @@ -402,7 +402,7 @@ function ClusterCard({ } > - + {clusterProjects.slice(0, 3).map(project => ( 3 && ( +{clusterProjects.length - 3} )} - + )} - + - + ); @@ -706,7 +706,7 @@ function DynamicGrouping() { return ( - + ) : ( - + {displayedClusters .filter((_, index) => index % 2 === 0) .map(cluster => ( @@ -941,8 +941,8 @@ function DynamicGrouping() { onDismiss={handleDismissCluster} /> ))} - - + + {displayedClusters .filter((_, index) => index % 2 === 1) .map(cluster => ( @@ -954,7 +954,7 @@ function DynamicGrouping() { onDismiss={handleDismissCluster} /> ))} - + )} {hasMoreClusters && ( @@ -963,17 +963,11 @@ function DynamicGrouping() { )} - + ); } -const PageWrapper = styled('div')` - display: flex; - flex-direction: column; - min-height: 100%; -`; - const HeaderSection = styled('div')` padding: ${space(4)} ${space(4)} ${space(3)}; background: ${p => p.theme.tokens.background.secondary}; @@ -999,14 +993,6 @@ const CardsGrid = styled('div')` } `; -const CardsColumn = styled('div')` - flex: 1; - display: flex; - flex-direction: column; - gap: ${space(3)}; - min-width: 0; -`; - const CardContainer = styled('div')` position: relative; background: ${p => p.theme.tokens.background.primary}; @@ -1028,13 +1014,6 @@ const CardContainer = styled('div')` } `; -const CardHeader = styled('div')` - padding: ${space(3)} ${space(3)} 0; - display: flex; - flex-direction: column; - gap: ${space(1)}; -`; - const ClusterTitleLink = styled(Link)` margin: 0; font-size: ${p => p.theme.fontSize.xl}; @@ -1051,13 +1030,6 @@ const ClusterTitleLink = styled(Link)` } `; -const StatsRow = styled('div')` - display: flex; - justify-content: space-between; - align-items: center; - gap: ${space(2)}; -`; - const ClusterStats = styled('div')` display: flex; flex-wrap: wrap; @@ -1075,30 +1047,12 @@ const TimeStats = styled('div')` color: ${p => p.theme.tokens.content.secondary}; `; -const StatItem = styled('div')` - display: flex; - align-items: center; - gap: ${space(0.5)}; -`; - -const ProjectAvatars = styled('div')` - display: flex; - align-items: center; - gap: ${space(0.25)}; -`; - const MoreProjectsCount = styled('span')` font-size: ${p => p.theme.fontSize.xs}; color: ${p => p.theme.tokens.content.secondary}; margin-left: ${space(0.25)}; `; -const ClusterStatusTags = styled('div')` - display: flex; - flex-wrap: wrap; - gap: ${space(1)}; -`; - const StatusTag = styled('div')<{color: 'purple' | 'yellow' | 'red'}>` display: inline-flex; align-items: center; @@ -1145,12 +1099,6 @@ const CardFooter = styled('div')` gap: ${space(1)}; `; -const FooterActions = styled('div')` - display: flex; - align-items: center; - gap: ${space(1)}; -`; - const SeerButton = styled(Button)` border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -1162,18 +1110,6 @@ const SeerDropdownTrigger = styled(Button)` border-left: 1px solid rgba(255, 255, 255, 0.15); `; -const StructuredInfo = styled('div')` - display: flex; - flex-direction: column; - gap: ${space(0.5)}; -`; - -const TagsContainer = styled('div')` - display: flex; - flex-wrap: wrap; - gap: ${space(0.5)}; -`; - const TagPill = styled('span')` display: inline-block; padding: ${space(0.25)} ${space(1)}; diff --git a/static/app/views/issueList/pages/topIssuesDrawer.tsx b/static/app/views/issueList/pages/topIssuesDrawer.tsx index 90952b75724375..fbe66d99637843 100644 --- a/static/app/views/issueList/pages/topIssuesDrawer.tsx +++ b/static/app/views/issueList/pages/topIssuesDrawer.tsx @@ -712,7 +712,7 @@ function DenseTagItem({tag, colors}: DenseTagItemProps) { skipWrapper maxWidth={360} > - + - + ) : ( @@ -1148,14 +1148,6 @@ const TagMiniBar = styled('div')` box-shadow: inset 0 0 0 1px ${p => p.theme.tokens.border.secondary}; `; -const TagBarHoverArea = styled('div')` - display: flex; - align-items: center; - height: 100%; - width: 100%; - padding: ${p => p.theme.space.xs} 0; -`; - const DenseTagChip = styled('div')` display: flex; align-items: center; diff --git a/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx b/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx index e3c05ee0009f27..8eb0c325ffd65d 100644 --- a/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx +++ b/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx @@ -116,7 +116,7 @@ export function IssueViewItem({ to={constructViewLink(baseUrl, view)} isActive={isActive} leadingItems={ - + { @@ -136,7 +136,7 @@ export function IssueViewItem({ projectPlatforms={projectPlatforms} allProjects={view.projects.length === 1 && view.projects[0] === -1} /> - + } trailingItems={ @@ -262,13 +262,6 @@ const UnsavedChangesIndicator = styled('div')<{isActive: boolean}>` right: -3px; `; -const LeadingItemsWrapper = styled('div')` - position: relative; - display: flex; - align-items: center; - justify-content: center; -`; - const GrabHandleWrapper = styled(motion.div)` display: flex; align-items: center;