fix: Pricing style adjustments (#988)

pluralsh · Mar 7, 2023 · 75a699e · 75a699e
1 parent 5a9df40
commit 75a699e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 39 deletions.
diff --git a/www/src/components/account/Groups.tsx b/www/src/components/account/Groups.tsx
@@ -160,10 +160,7 @@ export function Groups() {
       <PageTitle heading="Groups">
         <CreateGroup q={q} />
       </PageTitle>
-      <BillingLegacyUserBanner
-        feature="Groups"
-        marginBottom="large"
-      />
+      <BillingLegacyUserBanner feature="Groups" />
       <List>
         <Header
           q={q}

diff --git a/www/src/components/account/Roles.tsx b/www/src/components/account/Roles.tsx
@@ -160,10 +160,7 @@ export function Roles() {
         {' '}
         <CreateRole q={q} />
       </PageTitle>
-      <BillingLegacyUserBanner
-        feature="Roles"
-        marginBottom="large"
-      />
+      <BillingLegacyUserBanner feature="Roles" />
       <List>
         <Header
           q={q}

diff --git a/www/src/components/account/ServiceAccounts.tsx b/www/src/components/account/ServiceAccounts.tsx
@@ -112,10 +112,7 @@ export function ServiceAccounts() {
       <PageTitle heading="Service accounts">
         <CreateServiceAccount q={q} />
       </PageTitle>
-      <BillingLegacyUserBanner
-        feature="Service accounts"
-        marginBottom="large"
-      />
+      <BillingLegacyUserBanner feature="Service accounts" />
       <List>
         <Header
           q={q}

diff --git a/www/src/components/account/billing/BillingFeatureBlockBanner.tsx b/www/src/components/account/billing/BillingFeatureBlockBanner.tsx
@@ -40,8 +40,9 @@ function BillingFeatureBlockBanner({ feature, planFeature }: BillingFeatureBlock
       direction="column"
       borderRadius="large"
       padding="xxlarge"
-      background={`url(${featureToImageUrl[feature]}) no-repeat top center / cover`}
-      backgroundColor="#191d24" // Not defined in the design system because adapted from the background images
+      background={`url(${featureToImageUrl[feature]}) no-repeat top center`}
+      backgroundSize="100% auto"
+      backgroundColor="fill-zero"
     >
       <Card
         padding="large"

diff --git a/www/src/components/account/billing/BillingLayout.tsx b/www/src/components/account/billing/BillingLayout.tsx
@@ -39,7 +39,7 @@ function BillingLayout() {
         </PageTitle>
         {pricingFeaturesEnabled && (
           <>
-            <BillingLegacyUserBanner marginBottom="large" />
+            <BillingLegacyUserBanner withBottomMargin={false} />
             <Div
               flexGrow
               flexShrink={0}

diff --git a/www/src/components/account/billing/BillingLegacyUserBanner.tsx b/www/src/components/account/billing/BillingLegacyUserBanner.tsx
@@ -1,43 +1,48 @@
 import { useContext } from 'react'
 import { Link } from 'react-router-dom'
-import { Banner } from '@pluralsh/design-system'
+import { Callout } from '@pluralsh/design-system'
 import { A, DivProps } from 'honorable'
+import styled from 'styled-components'
 
 import SubscriptionContext from '../../../contexts/SubscriptionContext'
 
 type BillingLegacyUserBannerPropsType = DivProps & {
   feature?: string
+  withBottomMargin?: boolean
 }
 
-function BillingLegacyUserBanner({ feature, ...props }: BillingLegacyUserBannerPropsType) {
+const Wrapper = styled.div<{withBottomMargin: boolean}>(({ theme, withBottomMargin }) => ({ marginBottom: withBottomMargin ? theme.spacing.large : undefined }))
+
+function BillingLegacyUserBanner({ feature, withBottomMargin = true, ...props }: BillingLegacyUserBannerPropsType) {
   const { isProPlan, isEnterprisePlan, isGrandfathered } = useContext(SubscriptionContext)
   const open = !(isProPlan || isEnterprisePlan) && isGrandfathered
 
   if (!open) return null
 
   return (
-    <Banner
-      fullWidth
-      severity="warning"
-      heading="Legacy user access ends soon."
-      {...props}
-    >
-      {!!feature && (
-        <>
-          {feature} are a Professional plan feature.
-          {' '}
-          <A
-            inline
-            as={Link}
-            to="/account/billing"
-          >
-            Upgrade now
-          </A>
-          .
-        </>
-      )}
-      {!feature && 'You have access to Professional features for a short period of time.'}
-    </Banner>
+    <Wrapper withBottomMargin={withBottomMargin}>
+      <Callout
+        severity="warning"
+        title="Legacy user access ends soon."
+        {...props}
+      >
+        {!!feature && (
+          <>
+            {feature} are a Professional plan feature.
+            {' '}
+            <A
+              inline
+              as={Link}
+              to="/account/billing"
+            >
+              Upgrade now
+            </A>
+            .
+          </>
+        )}
+        {!feature && 'You have access to Professional features for a short period of time.'}
+      </Callout>
+    </Wrapper>
   )
 }