[pricing]: add per user/month to the cloud plans.

Author: nisarhassan12

src/components/PricingBox.tsx

@@ -19,7 +19,7 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
     margin: 2rem 1rem;
     padding: 3rem 2.8rem;
     font-size: 95%;
-    min-height: ${({ isTitleOutside }) => (isTitleOutside ? '42rem' : '48rem')};
+    min-height: ${({ isTitleOutside }) => (isTitleOutside ? '42rem' : '51rem')};
     min-width: 20rem;
     max-width: 26rem;
     width: 25%;
@@ -261,6 +261,7 @@ export interface PricingBoxProps {
   info?: string
   areFeaturesBold?: boolean
   boldFeaturesCount?: number
+  perUserMonth?: boolean
 }
 
 const PricingBox: React.SFC<PricingBoxProps> = ({
@@ -284,7 +285,8 @@ const PricingBox: React.SFC<PricingBoxProps> = ({
   isTitleOutside,
   info,
   areFeaturesBold,
-  boldFeaturesCount = 0
+  boldFeaturesCount = 0,
+  perUserMonth
 }) => (
   <StyledPricingBox
     transform={transform}
@@ -298,6 +300,7 @@ const PricingBox: React.SFC<PricingBoxProps> = ({
     <h4>{title}</h4>
     {img ? img : null}
     {price ? <div className="price">{price}</div> : null}
+    { perUserMonth ? <div className="duration" style={{fontWeight: 400}}>per user/month</div> : null }
     {duration ? <div className="duration">{duration}</div> : null}
     {feature ? <div className="feature">{feature}</div> : null}
     {features && features.length ? (

src/components/pricing/PricingBoxes.tsx

@@ -56,7 +56,7 @@ const selfHostedPlans: PricingBoxProps[] = [
     features: ['Unlimited Use', 'Private & Public Repos'],
     price: (
       <>
-        {isEurope() ? '€0' : '$0'} <span>/ month</span>
+        {isEurope() ? '€0' : '$0'}
       </>
     ),
     btnText: 'Install Now',
@@ -70,7 +70,7 @@ const selfHostedPlans: PricingBoxProps[] = [
     features: ['Unlimited Prebuilds', 'Shared Workspaces', 'Snapshots', 'Admin Dashboard', 'Unlimited Use', 'Private & Public Repos'],
     price: (
       <>
-        {isEurope() ? '€18' : '$20'} <span>/ month</span>
+        {isEurope() ? '€18' : '$20'}
       </>
     ),
     duration: 'Per user',
@@ -88,23 +88,22 @@ const plans: PricingBoxProps[] = [
     price: (
       <>
         {isEurope() ? '€0' : '$0'}
-        <span> / month</span>
       </>
     ),
-    duration: '50 hours / month',
-    features: ['Public Repos', 'Private Repos (30-Day Trial)']
+    perUserMonth: true,
+    features: [<strong>50 hours/month</strong>, 'Public Repos', 'Private Repos (30-Day Trial)']
   },
   {
     title: 'Personal',
     img: <object role="presentation" tabIndex={-1} data={LightBulb} />,
     price: (
       <>
         {isEurope() ? '€8' : '$9'}
-        <span> / month</span>
       </>
     ),
-    duration: '100 hours / month',
+    perUserMonth: true,
     features: [
+      <strong>100 hours / month</strong>,
       'Private & Public Repos',
       <span className="span">
         4 Parallel Workspaces <PopOver description="The maximum number of workspaces a user can run at the same time" />
@@ -122,11 +121,11 @@ const plans: PricingBoxProps[] = [
     price: (
       <>
         {isEurope() ? '€23' : '$25'}
-        <span> / month</span>
       </>
     ),
-    duration: 'Unlimited hours',
+    perUserMonth: true,
     features: [
+      <strong>Unlimited hours</strong>,
       'Private & Public Repos',
       <span className="span">
         8 Parallel Workspaces <PopOver description="The maximum number of workspaces a user can run at the same time" />
@@ -150,11 +149,11 @@ const plans: PricingBoxProps[] = [
     price: (
       <>
         {isEurope() ? '€35' : '$39'}
-        <span> / month</span>
       </>
     ),
-    duration: 'Unlimited hours',
+    perUserMonth: true,
     features: [
+      <strong>Unlimited hours</strong>,
       'Private & Public Repos',
       <span className="span">
         16 Parallel Workspaces <PopOver description="The maximum number of workspaces a user can run at the same time" />