diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx index 9a95cfa58e4c84..bd66979cb3ab9f 100644 --- a/static/app/components/stream/group.tsx +++ b/static/app/components/stream/group.tsx @@ -442,15 +442,20 @@ function BaseGroupRow({ } > - - {secondaryCount !== undefined && useFilteredStats && ( - + {hasNewLayout ? ( + + + {secondaryCount !== undefined && useFilteredStats && ( + + )} + + ) : ( + + + {secondaryCount !== undefined && useFilteredStats && ( + + )} + )} @@ -488,16 +493,20 @@ function BaseGroupRow({ } > - - {secondaryUserCount !== undefined && useFilteredStats && ( - + {hasNewLayout ? ( + + + {secondaryUserCount !== undefined && useFilteredStats && ( + + )} + + ) : ( + + + {secondaryUserCount !== undefined && useFilteredStats && ( + + )} + )} ); @@ -542,17 +551,14 @@ function BaseGroupRow({ query={query} source={referrer} /> - + {hasGuideAnchor && issueStreamAnchor} {withChart && !displayReprocessingLayout && issueTypeConfig.stats.enabled && - organization.features.includes('issue-stream-table-layout') ? ( + hasNewLayout ? ( {groupCount} @@ -609,7 +615,7 @@ function BaseGroupRow({ )} {withColumns.includes('users') && issueTypeConfig.stats.enabled && - organization.features.includes('issue-stream-table-layout') ? ( + hasNewLayout ? ( {groupUsersCount} @@ -617,7 +623,7 @@ function BaseGroupRow({ {groupUsersCount} )} {withColumns.includes('priority') ? ( - organization.features.includes('issue-stream-table-layout') ? ( + hasNewLayout ? ( {group.priority ? ( @@ -632,7 +638,7 @@ function BaseGroupRow({ ) ) : null} {withColumns.includes('assignee') && - (organization.features.includes('issue-stream-table-layout') ? ( + (hasNewLayout ? ( ` `} `; -const PrimaryCount = styled(Count)<{hasNewLayout: boolean}>` +const CountsWrapper = styled('div')` + display: flex; + flex-direction: column; +`; + +const PrimaryCount = styled(Count)<{hasNewLayout?: boolean}>` font-size: ${p => (p.hasNewLayout ? p.theme.fontSizeMedium : p.theme.fontSizeLarge)}; + ${p => + p.hasNewLayout && + ` + display: flex; + justify-content: right; + margin-bottom: ${space(0.25)}; + `} font-variant-numeric: tabular-nums; `; const SecondaryCount = styled(({value, ...p}) => )<{ - hasNewLayout: boolean; + hasNewLayout?: boolean; }>` - font-size: ${p => (p.hasNewLayout ? p.theme.fontSizeMedium : p.theme.fontSizeLarge)}; + font-size: ${p => (p.hasNewLayout ? p.theme.fontSizeSmall : p.theme.fontSizeLarge)}; + ${p => + p.hasNewLayout && + css` + display: flex; + justify-content: right; + color: ${p.theme.subText}; + `} + font-variant-numeric: tabular-nums; :before {