-
+
{contentDescription}
-
+
p.theme.breakpoints.md}) {
- text-align: center;
- }
-`;
-
-const Description = styled(Text)`
- @media (max-width: ${p => p.theme.breakpoints.md}) {
- text-align: center;
- }
-`;
-
const StyledGrid = styled(Grid)`
& > :last-child {
justify-self: end;
@@ -668,14 +662,6 @@ const ReceiptSlot = styled('div')`
${p => Color(p.theme.black).lighten(0.08).alpha(0.15).toString()} inset;
`;
-const ReceiptPaperContainer = styled('div')`
- position: relative;
- left: 62px;
- top: -7px;
- width: 320px;
- overflow: hidden;
-`;
-
const ReceiptPaperShadow = styled('div')`
position: relative;
z-index: 1000;
@@ -686,11 +672,6 @@ const ReceiptPaperShadow = styled('div')`
${p => Color(p.theme.black).lighten(0.05).alpha(0.15).toString()};
`;
-const ReceiptPaper = styled(Container)`
- border-top: none;
- border-bottom: none;
-`;
-
const DateSeparator = styled('div')`
border-top: 1px dashed ${p => p.theme.gray500};
width: 100%;
diff --git a/static/gsApp/views/amCheckout/components/moreFeaturesLink.tsx b/static/gsApp/views/amCheckout/components/moreFeaturesLink.tsx
index 14fda59bdacaa2..b2d752eda51cf4 100644
--- a/static/gsApp/views/amCheckout/components/moreFeaturesLink.tsx
+++ b/static/gsApp/views/amCheckout/components/moreFeaturesLink.tsx
@@ -4,7 +4,6 @@ import {ExternalLink} from 'sentry/components/core/link';
import {IconCheckmark} from 'sentry/icons';
import type {SVGIconProps} from 'sentry/icons/svgIcon';
import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
type Props = {
color?: string;
@@ -24,7 +23,7 @@ function MoreFeaturesLink({color, legacySize}: Props) {
const MoreLink = styled(ExternalLink)<{color?: string}>`
display: grid;
grid-template-columns: max-content auto;
- gap: ${space(1)};
+ gap: ${p => p.theme.space.md};
align-items: center;
align-content: center;
color: ${p => p.color ?? p.theme.subText};
diff --git a/static/gsApp/views/amCheckout/components/unitTypeItem.tsx b/static/gsApp/views/amCheckout/components/unitTypeItem.tsx
index 59b78cf38546f6..b1febc5cc745cb 100644
--- a/static/gsApp/views/amCheckout/components/unitTypeItem.tsx
+++ b/static/gsApp/views/amCheckout/components/unitTypeItem.tsx
@@ -1,8 +1,10 @@
import styled from '@emotion/styled';
+import {Container, Grid} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
import PanelItem from 'sentry/components/panels/panelItem';
import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
type UnitTypeProps = {
description: React.ReactNode;
@@ -10,16 +12,32 @@ type UnitTypeProps = {
weight: string;
};
+function UnitColumn({children}: {children: React.ReactNode}) {
+ return (
+
+ {children}
+
+ );
+}
+
export default function UnitTypeItem({unitName, description, weight}: UnitTypeProps) {
return (
- {unitName}
- {t('Unit')}
+
+ {unitName}
+
+
+ {t('Unit')}
+
- {description}
- {weight}
+ {description}
+
+
+ {weight}
+
+
);
@@ -28,38 +46,5 @@ export default function UnitTypeItem({unitName, description, weight}: UnitTypePr
const UnitTypeContainer = styled(PanelItem)`
display: grid;
grid-auto-flow: row;
- gap: ${space(0.5)};
-`;
-
-const UnitColumn = styled('div')`
- display: grid;
- grid-template-columns: auto max-content;
- justify-content: space-between;
- align-items: center;
- gap: 40px;
-`;
-
-const UnitName = styled('div')`
- font-weight: 600;
- font-size: ${p => p.theme.fontSize.lg};
-`;
-
-const Description = styled('p')`
- font-size: ${p => p.theme.fontSize.md};
- margin-bottom: 0px;
- font-weight: normal;
- color: ${p => p.theme.subText};
-`;
-
-const UnitTitle = styled('div')`
- color: ${p => p.theme.subText};
- font-size: ${p => p.theme.fontSize.sm};
- text-transform: uppercase;
- font-weight: 600;
-`;
-
-const Weight = styled('div')`
- font-size: ${p => p.theme.fontSize.xl};
- color: ${p => p.theme.gray500};
- align-self: start;
+ gap: ${p => p.theme.space.xs};
`;
diff --git a/static/gsApp/views/amCheckout/components/volumeSliders.tsx b/static/gsApp/views/amCheckout/components/volumeSliders.tsx
index 9829c97eb5d27b..5a5c8b34132541 100644
--- a/static/gsApp/views/amCheckout/components/volumeSliders.tsx
+++ b/static/gsApp/views/amCheckout/components/volumeSliders.tsx
@@ -1,7 +1,9 @@
import {Fragment} from 'react';
import styled from '@emotion/styled';
-import {Flex} from 'sentry/components/core/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {Flex, Grid} from 'sentry/components/core/layout';
import RangeSlider from 'sentry/components/forms/controls/rangeSlider';
import {Body, Header, Hovercard} from 'sentry/components/hovercard';
import PanelItem from 'sentry/components/panels/panelItem';
@@ -151,26 +153,24 @@ function VolumeSliders({
{getPlanCategoryName({plan: activePlan, category})}
{eventBucket.price !== 0 && (
-
-
- {tct('[unitPrice]/[category]', {
- category:
- category ===
- DATA_CATEGORY_INFO[DataCategoryExact.ATTACHMENT].plural
- ? 'GB'
- : getSingularCategoryName({
- plan: activePlan,
- category,
- capitalize: false,
- }),
- unitPrice,
- })}
-
-
+
+ {tct('[unitPrice]/[category]', {
+ category:
+ category ===
+ DATA_CATEGORY_INFO[DataCategoryExact.ATTACHMENT].plural
+ ? 'GB'
+ : getSingularCategoryName({
+ plan: activePlan,
+ category,
+ capitalize: false,
+ }),
+ unitPrice,
+ })}
+
)}
-
+
{formatReservedWithUnits(
formData.reserved[category] ?? null,
@@ -188,7 +188,7 @@ function VolumeSliders({
/{billingInterval}
)}
-
+
-
-
+
+
{tct('[min] included', {
min: formatReservedWithUnits(min, category),
})}
-
-
+
+
{formatReservedWithUnits(max, category, {
isAbbreviated: !isByteCategory(category),
})}
-
-
+
+
{showTransactionsDisclaimer && (
@@ -269,21 +269,6 @@ const Title = styled('label')`
font-size: ${p => p.theme.fontSize.md};
`;
-const SpaceBetweenGrid = styled('div')`
- display: grid;
- grid-template-columns: repeat(2, auto);
- justify-content: space-between;
-`;
-
-const Description = styled(SpaceBetweenGrid)`
- font-size: ${p => p.theme.fontSize.sm};
- color: ${p => p.theme.subText};
-`;
-
-const MinMax = styled(Description)`
- font-size: ${p => p.theme.fontSize.sm};
-`;
-
const BaseRow = styled('div')`
display: grid;
grid-auto-flow: column;
diff --git a/static/gsApp/views/amCheckout/index.tsx b/static/gsApp/views/amCheckout/index.tsx
index cb00477a35484b..abe7055c4ac8b1 100644
--- a/static/gsApp/views/amCheckout/index.tsx
+++ b/static/gsApp/views/amCheckout/index.tsx
@@ -10,7 +10,7 @@ import type {Client} from 'sentry/api';
import {Alert} from 'sentry/components/core/alert';
import {Button} from 'sentry/components/core/button';
import {LinkButton} from 'sentry/components/core/button/linkButton';
-import {Flex, Grid, Stack} from 'sentry/components/core/layout';
+import {Container, Flex, Grid, Stack} from 'sentry/components/core/layout';
import {ExternalLink} from 'sentry/components/core/link';
import {Text} from 'sentry/components/core/text';
import LoadingError from 'sentry/components/loadingError';
@@ -664,14 +664,27 @@ class AMCheckout extends Component {
const renderCheckoutContent = () => (
-
+
{this.renderPartnerAlert()}
{this.renderSteps()}
-
+