diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index fcd47d1cef..2909818ec1 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -26,7 +26,7 @@ "professional")) (mf/defc cta-power-up* - [{:keys [top-title top-description bottom-description bottom-button bottom-button-href has-dropdown]}] + [{:keys [top-title top-description bottom-description bottom-button bottom-button-href has-dropdown is-highlighted]}] (let [show-data* (mf/use-state false) show-data (deref show-data*) handle-click @@ -40,7 +40,8 @@ (dom/stop-propagation event) (st/emit! (rt/nav-raw :href bottom-button-href))))] - [:div {:class (stl/css :cta-power-up) + [:div {:class (stl/css-case :cta-power-up true + :highlighted is-highlighted) :on-click handle-click} [:button {:class (stl/css-case :cta-top-section true :cta-without-dropdown (not has-dropdown))} @@ -79,7 +80,8 @@ :bottom-description (tr "subscription.dashboard.power-up.professional.bottom-description") :bottom-button (tr "subscription.dashboard.power-up.professional.bottom-button") :bottom-button-href subscription-href - :has-dropdown false}] + :has-dropdown false + :is-highlighted true}] "unlimited" (if subscription-is-trial @@ -87,24 +89,28 @@ {:top-title (tr "subscription.dashboard.power-up.your-subscription") :top-description (tr "subscription.dashboard.power-up.trial.top-title") :bottom-description (tr "subscription.dashboard.power-up.trial.bottom-description" subscription-href) - :has-dropdown true}] + :has-dropdown true + :is-highlighted false}] [:> cta-power-up* {:top-title (tr "subscription.dashboard.power-up.your-subscription") :top-description (tr "subscription.dashboard.power-up.unlimited-plan") :bottom-description (tr "subscription.dashboard.power-up.unlimited.bottom-text" subscription-href) - :has-dropdown true}]) + :has-dropdown true + :is-highlighted false}]) "enterprise" (if subscription-is-trial [:> cta-power-up* {:top-title (tr "subscription.dashboard.power-up.your-subscription") :top-description (tr "subscription.dashboard.power-up.enterprise-trial.top-title") - :has-dropdown false}] + :has-dropdown false + :is-highlighted false}] [:> cta-power-up* {:top-title (tr "subscription.dashboard.power-up.your-subscription") :top-description (tr "subscription.dashboard.power-up.enterprise-plan") - :has-dropdown false}])))) + :has-dropdown false + :is-highlighted false}])))) (mf/defc team* [{:keys [is-owner team]}] diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss index 95d131d066..d46b5e4155 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.scss +++ b/frontend/src/app/main/ui/dashboard/subscription.scss @@ -19,6 +19,12 @@ padding: var(--sp-m); } +.cta-power-up.highlighted { + background: var(--color-background-quaternary); + border: $b-1 solid var(--color-accent-primary-muted); + padding: var(--sp-l); +} + .cta-top-section { @include deprecated.buttonStyle; display: grid; @@ -54,6 +60,11 @@ margin-block-start: var(--sp-m); padding-block-start: var(--sp-m); } + +.highlighted .cta-bottom-section { + border-block-start: $b-1 solid var(--color-accent-primary-muted); +} + .cta-bottom-section .content { @include t.use-typography("body-medium"); @include deprecated.buttonStyle; @@ -66,6 +77,10 @@ margin-block-start: var(--sp-s); } +.highlighted .cta-bottom-button { + margin-block-start: var(--sp-m); +} + .cta-text, .cta-title { text-align: left; @@ -76,10 +91,19 @@ margin-block-end: var(--sp-xs); } +.highlighted .cta-title { + @include t.use-typography("body-medium"); +} + .cta-text { @include t.use-typography("title-small"); } +.highlighted .cta-text { + @include t.use-typography("body-large"); + color: var(--color-foreground-primary); +} + .cta-bottom-section .content a { @include t.use-typography("body-medium"); color: var(--color-accent-tertiary); diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index 532d52b2b2..fcea0e48b8 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -34,7 +34,7 @@ cta-link-with-icon editors recommended - has-trial-cta]}] + show-button-cta]}] [:div {:class (stl/css-case :plan-card true :plan-card-highlight recommended)} @@ -57,13 +57,13 @@ [:li {:key (dm/str benefit) :class (stl/css :benefit)} "- " benefit])] (when (and cta-link-with-icon cta-text-with-icon) [:button {:class (stl/css :cta-button :more-info) :on-click cta-link-with-icon} cta-text-with-icon deprecated-icon/open-link]) - (when (and cta-link cta-text (not has-trial-cta)) [:button {:class (stl/css-case :cta-button true - :bottom-link (not (and cta-link-trial cta-text-trial))) - :on-click cta-link} cta-text]) - (when (and cta-link cta-text has-trial-cta) [:> button* {:variant "primary" - :type "button" - :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial))) - :on-click cta-link} cta-text]) + (when (and cta-link cta-text (not show-button-cta)) [:button {:class (stl/css-case :cta-button true + :bottom-link (not (and cta-link-trial cta-text-trial))) + :on-click cta-link} cta-text]) + (when (and cta-link cta-text show-button-cta) [:> button* {:variant "primary" + :type "button" + :class (stl/css-case :bottom-button (not (and cta-link-trial cta-text-trial))) + :on-click cta-link} cta-text]) (when (and cta-link-trial cta-text-trial) [:button {:class (stl/css :cta-button :bottom-link) :on-click cta-link-trial} cta-text-trial])]) (defn schema:seats-form [min-editors] @@ -459,7 +459,7 @@ :cta-text-with-icon (tr "subscription.settings.more-information") :cta-link-with-icon go-to-pricing-page :recommended (= subscription-type "professional") - :has-trial-cta (not (:type subscription))}]) + :show-button-cta (= subscription-type "professional")}]) (when (not= subscription-type "enterprise") [:> plan-card* {:card-title (tr "subscription.settings.enterprise") @@ -474,5 +474,5 @@ :cta-link #(open-subscription-modal "enterprise" subscription) :cta-text-with-icon (tr "subscription.settings.more-information") :cta-link-with-icon go-to-pricing-page - :has-trial-cta (not (:type subscription))}])]]])) + :show-button-cta (= subscription-type "professional")}])]]]))