diff --git a/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.scss b/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.scss index 424603394e..bfeef28c4c 100644 --- a/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.scss +++ b/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.scss @@ -2,6 +2,7 @@ .fy-badge { display: flex; + align-items: center; font-weight: 600; border-radius: 0.5rem; font-size: 13px; diff --git a/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.tsx b/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.tsx index e13d795362..54ce8e1e07 100644 --- a/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.tsx +++ b/src/website/packages/fakeyou.com/src/components/common/Badge/Badge.tsx @@ -1,5 +1,7 @@ import React from "react"; import "./Badge.scss"; +import { IconDefinition } from "@fortawesome/fontawesome-common-types"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface BadgeProps { label: string; @@ -7,18 +9,25 @@ interface BadgeProps { overlay?: boolean; className?: string; small?: boolean; + icon?: IconDefinition; } export default function Badge({ label, - color = "gray", // should default to a visible state + color = "gray", overlay = false, className = "", small = false, + icon, }: BadgeProps) { const badgeClass = `fy-badge badge-${color} ${ overlay ? "shadow" : "" } mb-0 ${className} ${small ? "badge-small" : ""}`.trim(); - return {label}; + return ( + + {icon && } + {label} + + ); } diff --git a/src/website/packages/fakeyou.com/src/scss/site-refresh.scss b/src/website/packages/fakeyou.com/src/scss/site-refresh.scss index e856ead2a2..39a47d31af 100644 --- a/src/website/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/src/website/packages/fakeyou.com/src/scss/site-refresh.scss @@ -686,7 +686,7 @@ styles with important tags: .pricing-border { box-sizing: border-box; - box-shadow: inset 0px 0px 0px 3px $primary; + box-shadow: inset 0px 0px 0px 3px $primary !important; } ul.pricing-list { diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx index c0602da34e..3569a58a23 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/premium/PricingPage.tsx @@ -17,9 +17,9 @@ import { WebUrl } from "../../../../common/WebUrl"; import { BeginStripeCheckoutFlow } from "../../../../common/BeginStripeCheckoutFlow"; import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient"; -import { Container, Panel } from "components/common"; +import { Badge, Container, Panel } from "components/common"; import MentionsSection from "components/common/MentionsSection"; -import StorytellerStudioCTA from "components/common/StorytellerStudioCTA"; +import { faStar } from "@fortawesome/pro-solid-svg-icons"; interface Props { sessionWrapper: SessionWrapper; @@ -91,7 +91,8 @@ function PricingPage(props: Props) { let proButtonText = "Buy Pro"; let proButtonDisabled = false; - let proBorderCss = "rounded panel padding h-100"; + let proBorderCss = + "rounded panel padding h-100 pricing-border position-relative"; let eliteButtonText = "Buy Elite"; let eliteButtonDisabled = false; @@ -146,12 +147,12 @@ function PricingPage(props: Props) { // Highlight the mid-tier plan if nothing is subscribed if (!userHasPaidPremium) { - proBorderCss = "rounded panel padding h-100 pricing-border"; + proBorderCss = "rounded panel padding h-100 pricing-border"; } return ( <> - +

Pricing

{/*

@@ -221,7 +222,7 @@ function PricingPage(props: Props) { */} {/* Plus Tier */} -

+

{FYP.plus.tier} @@ -325,6 +326,17 @@ function PricingPage(props: Props) { {/* Pro Tier */}
+
+ +
+

{FYP.pro.tier}

@@ -475,7 +487,7 @@ function PricingPage(props: Props) {
{/* Elite Tier */} -
+

{FYP.elite.tier} @@ -753,7 +765,7 @@ function PricingPage(props: Props) { - + {/* */} );