diff --git a/src/components/Publish/FormPublish/Pricing/Coin.module.css b/src/components/Publish/FormPublish/Pricing/Coin.module.css index f62f2e4a5..777d5102c 100644 --- a/src/components/Publish/FormPublish/Pricing/Coin.module.css +++ b/src/components/Publish/FormPublish/Pricing/Coin.module.css @@ -22,6 +22,11 @@ fill: var(--font-color-text); } +.icon svg { + width: 100%; + height: 100%; +} + .coin:last-child .icon { fill: var(--brand-violet); } diff --git a/src/components/Publish/FormPublish/Pricing/Dynamic.module.css b/src/components/Publish/FormPublish/Pricing/Dynamic.module.css index 2b914baa7..1e157d9b3 100644 --- a/src/components/Publish/FormPublish/Pricing/Dynamic.module.css +++ b/src/components/Publish/FormPublish/Pricing/Dynamic.module.css @@ -42,6 +42,8 @@ @media screen and (min-width: 40rem) { .tokens { grid-template-columns: 1fr 1fr; + margin-left: -4rem; + margin-right: -4rem; } } diff --git a/src/components/Publish/FormPublish/Pricing/Fees.module.css b/src/components/Publish/FormPublish/Pricing/Fees.module.css index f15027a22..35dae6488 100644 --- a/src/components/Publish/FormPublish/Pricing/Fees.module.css +++ b/src/components/Publish/FormPublish/Pricing/Fees.module.css @@ -12,6 +12,13 @@ background: var(--background-highlight); } +@media screen and (min-width: 40rem) { + .fees { + margin-left: -4rem; + margin-right: -4rem; + } +} + .fees > div { margin-bottom: 0; justify-self: center; diff --git a/src/components/Publish/FormPublish/Pricing/Price.module.css b/src/components/Publish/FormPublish/Pricing/Price.module.css index ea452eb12..8cc48872e 100644 --- a/src/components/Publish/FormPublish/Pricing/Price.module.css +++ b/src/components/Publish/FormPublish/Pricing/Price.module.css @@ -14,6 +14,13 @@ border-bottom: 1px solid var(--border-color); } +@media (min-width: 40rem) { + .price { + margin-left: -4rem; + margin-right: -4rem; + } +} + .grid { display: grid; gap: calc(var(--spacer) / 2); diff --git a/src/components/Publish/FormPublish/Pricing/index.module.css b/src/components/Publish/FormPublish/Pricing/index.module.css new file mode 100644 index 000000000..6487f0ef8 --- /dev/null +++ b/src/components/Publish/FormPublish/Pricing/index.module.css @@ -0,0 +1,3 @@ +.pricing input { + text-align: center; +} diff --git a/src/components/Publish/FormPublish/Pricing/index.tsx b/src/components/Publish/FormPublish/Pricing/index.tsx index ccb8f2b62..130549554 100644 --- a/src/components/Publish/FormPublish/Pricing/index.tsx +++ b/src/components/Publish/FormPublish/Pricing/index.tsx @@ -10,6 +10,7 @@ import Dynamic from './Dynamic' import Fixed from './Fixed' import Free from './Free' import content from '../../../../../content/price.json' +import styles from './index.module.css' export default function PricingFields(): ReactElement { const { appConfig } = useSiteMetadata() @@ -72,6 +73,7 @@ export default function PricingFields(): ReactElement { items={tabs} handleTabChange={handleTabChange} defaultIndex={type === 'fixed' ? 0 : 1} + className={styles.pricing} /> ) diff --git a/src/components/Publish/FormPublish/index.module.css b/src/components/Publish/FormPublish/index.module.css index 55c0b5be0..dbff1e924 100644 --- a/src/components/Publish/FormPublish/index.module.css +++ b/src/components/Publish/FormPublish/index.module.css @@ -1,4 +1,5 @@ .form { composes: box from '@shared/atoms/Box.module.css'; margin-bottom: var(--spacer); + padding: 0; }