fixing callouts

Hubs-Foundation · Dec 21, 2023 · 2447a18 · 2447a18
1 parent 0c9816b
commit 2447a18
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 18 deletions.
diff --git a/client/components/modules/plans/plan-cards/BasePlanCard.module.scss b/client/components/modules/plans/plan-cards/BasePlanCard.module.scss
@@ -38,6 +38,9 @@
   &_rainbow {
     background: $gradient-rainbow;
   }
+  &_tree {
+    background: $gradient-tree;
+  }
 }
 
 .title {

diff --git a/client/components/modules/plans/plan-cards/BasePlanCard.tsx b/client/components/modules/plans/plan-cards/BasePlanCard.tsx
@@ -63,7 +63,7 @@ type BasePlanCardPropsT = {
   showDisclaimer?: boolean;
   confirmButton: ReactNode;
   footerClassProp?: string;
-  color: 'silver' | 'warm' | 'rainbow';
+  color: 'silver' | 'warm' | 'rainbow' | 'tree';
   isSoldOut?: boolean;
 };
 

diff --git a/client/components/modules/plans/plan-cards/BusinessPlanCard.tsx b/client/components/modules/plans/plan-cards/BusinessPlanCard.tsx
@@ -14,7 +14,7 @@ type BusinessPlanCardPropsT = {
 
 const BusinessPlanCard = ({ billingPeriod }: BusinessPlanCardPropsT) => {
   const { regionCode } = useSelector(selectRegion);
-  const { planPrice, planUrl, taxDescription, currencySymbol } =
+  const { planPrice, planUrl, taxDescription, currencySymbol, currencyAbbrev } =
     getPricePageData(regionCode, PlansE.BUSINESS, billingPeriod);
 
   /**
@@ -27,11 +27,12 @@ const BusinessPlanCard = ({ billingPeriod }: BusinessPlanCardPropsT) => {
   return (
     <BasePlanCard
       plan={PlansE.BUSINESS}
-      title="Professional"
-      color="rainbow"
+      title="Business"
+      color="tree"
       price={
         <Price
           price={`${currencySymbol}${planPrice}`}
+          currencyAbbrev={currencyAbbrev}
           billingPeriod={`per ${
             billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month'
           }`}

diff --git a/client/components/modules/plans/plan-cards/PersonalPlanCard.tsx b/client/components/modules/plans/plan-cards/PersonalPlanCard.tsx
@@ -13,7 +13,7 @@ type PersonalPlanCardPropsT = {
 
 const PersonalPlanCard = ({ billingPeriod }: PersonalPlanCardPropsT) => {
   const { regionCode } = useSelector(selectRegion);
-  const { planPrice, planUrl, taxDescription, currencySymbol } =
+  const { planPrice, planUrl, taxDescription, currencySymbol, currencyAbbrev } =
     getPricePageData(regionCode, PlansE.PERSONAL, billingPeriod);
 
   /**
@@ -34,6 +34,7 @@ const PersonalPlanCard = ({ billingPeriod }: PersonalPlanCardPropsT) => {
           billingPeriod={`per ${
             billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month'
           }`}
+          currencyAbbrev={currencyAbbrev}
         />
       }
       infoCopyList={PERSONAL_COPY}

diff --git a/client/components/modules/plans/plan-cards/ProfessionalPlanCard.tsx b/client/components/modules/plans/plan-cards/ProfessionalPlanCard.tsx
@@ -16,7 +16,7 @@ const ProfessionalPlanCard = ({
   billingPeriod,
 }: ProfessionalPlanCardPropsT) => {
   const { regionCode } = useSelector(selectRegion);
-  const { planPrice, planUrl, taxDescription, currencySymbol } =
+  const { planPrice, planUrl, taxDescription, currencySymbol, currencyAbbrev } =
     getPricePageData(regionCode, PlansE.PROFESSIONAL, billingPeriod);
 
   /**
@@ -34,6 +34,7 @@ const ProfessionalPlanCard = ({
       price={
         <Price
           price={`${currencySymbol}${planPrice}`}
+          currencyAbbrev={currencyAbbrev}
           billingPeriod={`per ${
             billingPeriod === BillingPeriodE.YEARLY ? 'year' : 'month'
           }`}

diff --git a/client/components/modules/plans/plan.const.ts b/client/components/modules/plans/plan.const.ts
@@ -13,10 +13,25 @@ export const STARTER_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '500MB Asset storage',
+    label: '500MB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
+  {
+    label: 'Publish scenes',
+    description: '',
+    icon: null,
+  },
+  {
+    label: 'Manage avatars, scenes, and identities',
+    description: '',
+    icon: null,
+  },
+  {
+    label: 'Support emails answered weekly',
+    description: '',
+    icon: null,
+  },
 ];
 
 export const PERSONAL_COPY: PlanInfoCopyT[] = [
@@ -26,12 +41,12 @@ export const PERSONAL_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '2GB Asset storage',
+    label: '2GB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
   {
-    label: 'Customize your Hub’s subdomain',
+    label: 'Everything in Starter, plus',
     description: '',
     icon: null,
   },
@@ -41,7 +56,13 @@ export const PERSONAL_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: 'Customize the color scheme of your tools and loading screens',
+    label: 'Customize your Hub’s color scheme',
+    description: '',
+    icon: null,
+  },
+
+  {
+    label: 'Customize your subdomain',
     description: '',
     icon: null,
   },
@@ -54,27 +75,32 @@ export const PROFESSIONAL_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '25GB Asset storage',
+    label: '25GB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
   {
-    label: 'Connect a custom domain to your Hub',
+    label: 'Everything in Personal, plus',
     description: '',
     icon: null,
   },
   {
-    label: 'Add your own logos',
+    label: 'Connect a fully custom domain',
+    description: '',
+    icon: null,
+  },
+  {
+    label: 'Deploy a custom version of the Hubs code base',
     description: '',
     icon: null,
   },
   {
-    label: 'Customize the color scheme of your tools and loading screens',
+    label: 'Support emails answered within 24 business hours',
     description: '',
     icon: null,
   },
   {
-    label: 'Fully control your Hub with access to Mozilla’s codebase',
+    label: '30 minutes of synchronous support per month',
     description: '',
     icon: null,
   },
@@ -87,12 +113,12 @@ export const BUSINESS_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '200GB Asset storage',
+    label: '200GB asset storage',
     description: 'For avatars and scenes',
     icon: null,
   },
   {
-    label: 'Everything in Professional',
+    label: 'Everything in Professional, plus',
     description: '',
     icon: null,
   },
@@ -102,7 +128,7 @@ export const BUSINESS_COPY: PlanInfoCopyT[] = [
     icon: null,
   },
   {
-    label: '90 minutes of synchronous support per month',
+    label: '60 minutes of synchronous support per month',
     description: '',
     icon: null,
   },

diff --git a/client/styles/core/variables.scss b/client/styles/core/variables.scss
@@ -148,6 +148,8 @@ $gradient-rainbow: linear-gradient(
   #a67878 104.75%
 );
 
+$gradient-tree: linear-gradient(107.97deg, #3bb783 36.82%, #72f1bc 100%);
+
 // ---- Utility Colors  ---------------------
 $white: #ffffff;
 $off-white: #ddd;