diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index 2909818ec1..fcfb82d1c3 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -10,8 +10,8 @@ [app.main.store :as st] [app.main.ui.components.dropdown-menu :refer [dropdown-menu-item*]] [app.main.ui.ds.buttons.button :refer [button*]] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.product.cta :refer [cta*]] - [app.main.ui.icons :as deprecated-icon] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -48,7 +48,10 @@ [:div {:class (stl/css :content)} [:span {:class (stl/css :cta-title)} top-title] [:span {:class (stl/css :cta-text) :data-testid "subscription-name"} top-description]] - (when has-dropdown [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow])] + (when has-dropdown + [:> icon* {:icon-id (if (and has-dropdown show-data) i/arrow-up i/arrow-down) + :class (stl/css :icon-dropdown) + :size "s"}])] (when (and has-dropdown show-data) [:div {:class (stl/css :cta-bottom-section)} @@ -154,8 +157,8 @@ (tr "subscription.dashboard.power-up.enterprise-plan")) :data-testid "subscription-icon"} (case subscription-type - "unlimited" deprecated-icon/character-u - "enterprise" deprecated-icon/character-e)]) + "unlimited" i/character-u + "enterprise" i/character-e)]) (mf/defc main-menu-power-up* [{:keys [close-sub-menu]}] diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss index d46b5e4155..a473ea45a9 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.scss +++ b/frontend/src/app/main/ui/dashboard/subscription.scss @@ -93,6 +93,7 @@ .highlighted .cta-title { @include t.use-typography("body-medium"); + margin-block-end: 0; } .cta-text { diff --git a/frontend/src/app/main/ui/settings/subscription.cljs b/frontend/src/app/main/ui/settings/subscription.cljs index fcea0e48b8..1d2a2f2b9d 100644 --- a/frontend/src/app/main/ui/settings/subscription.cljs +++ b/frontend/src/app/main/ui/settings/subscription.cljs @@ -13,7 +13,8 @@ [app.main.ui.components.forms :as fm] [app.main.ui.dashboard.subscription :refer [get-subscription-type]] [app.main.ui.ds.buttons.button :refer [button*]] - [app.main.ui.icons :as deprecated-icon] + [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] + [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]] [app.main.ui.notifications.badge :refer [badge-notification]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr c]] @@ -40,7 +41,10 @@ :plan-card-highlight recommended)} [:div {:class (stl/css :plan-card-header)} [:div {:class (stl/css :plan-card-title-container)} - (when card-title-icon [:span {:class (stl/css :plan-title-icon)} card-title-icon]) + (when card-title-icon + [:> icon* {:icon-id card-title-icon + :class (stl/css :plan-title-icon) + :size "s"}]) [:h4 {:class (stl/css :plan-card-title)} card-title] (when recommended [:& badge-notification {:content (tr "subscription.settings.recommended") @@ -55,8 +59,11 @@ [:ul {:class (stl/css :benefits-list)} (for [benefit benefits] [: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-with-icon cta-text-with-icon) + [:button {:class (stl/css :cta-button :more-info) + :on-click cta-link-with-icon} cta-text-with-icon + [:> icon* {:icon-id "open-link" + :size "s"}]]) (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]) @@ -135,7 +142,9 @@ [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog)} - [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close] + [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} + [:> icon* {:icon-id "close" + :size "m"}]] [:div {:class (stl/css :modal-title :subscription-title)} (tr "subscription.settings.management.dialog.title" subscription-name)] @@ -145,7 +154,9 @@ (tr "subscription.settings.management.dialog.currently-editors-title" (c (count editors)))] [:button {:class (stl/css :cta-button :show-editors-button) :on-click handle-click} (tr "subscription.settings.management.dialog.editors") - [:span {:class (stl/css :icon-dropdown)} deprecated-icon/arrow]] + [:> icon* {:icon-id (if show-editors-list i/arrow-up i/arrow-down) + :class (stl/css :icon-dropdown) + :size "s"}]] (when show-editors-list [:* [:p {:class (stl/css :editors-text :editors-list-warning)} @@ -239,12 +250,12 @@ [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-dialog :subscription-success)} - [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} deprecated-icon/close] + [:button {:class (stl/css :close-btn) :on-click handle-close-dialog} + [:> icon* {:icon-id "close" + :size "m"}]] [:div {:class (stl/css :modal-success-content)} [:div {:class (stl/css :modal-start)} - (if (= "light" (:theme profile)) - deprecated-icon/logo-subscription-light - deprecated-icon/logo-subscription)] + [:> raw-svg* {:id (if (= "light" (:theme profile)) "logo-subscription-light" "logo-subscription")}]] [:div {:class (stl/css :modal-end)} [:div {:class (stl/css :modal-title)} (tr "subscription.settings.sucess.dialog.title" subscription-name)] @@ -377,7 +388,7 @@ "unlimited" (if subscription-is-trial? [:> plan-card* {:card-title (tr "subscription.settings.unlimited-trial") - :card-title-icon deprecated-icon/character-u + :card-title-icon i/character-u :benefits-title (tr "subscription.settings.benefits.all-professional-benefits"), :benefits [(tr "subscription.settings.unlimited.storage-benefit") (tr "subscription.settings.unlimited.autosave-benefit"), @@ -389,7 +400,7 @@ :editors (-> profile :props :subscription :quantity)}] [:> plan-card* {:card-title (tr "subscription.settings.unlimited") - :card-title-icon deprecated-icon/character-u + :card-title-icon i/character-u :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits") :benefits [(tr "subscription.settings.unlimited.storage-benefit"), (tr "subscription.settings.unlimited.autosave-benefit"), @@ -401,7 +412,7 @@ "enterprise" (if subscription-is-trial? [:> plan-card* {:card-title (tr "subscription.settings.enterprise-trial") - :card-title-icon deprecated-icon/character-e + :card-title-icon i/character-e :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"), :benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"), (tr "subscription.settings.enterprise.autosave"), @@ -411,7 +422,7 @@ :cta-text-trial (tr "subscription.settings.add-payment-to-continue") :cta-link-trial go-to-payments}] [:> plan-card* {:card-title (tr "subscription.settings.enterprise") - :card-title-icon deprecated-icon/character-e + :card-title-icon i/character-e :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits"), :benefits [(tr "subscription.settings.enterprise.unlimited-storage-benefit"), (tr "subscription.settings.enterprise.autosave"), @@ -422,12 +433,16 @@ [:div {:class (stl/css :membership-container)} (when (and subscribed-since (not= subscription-type "professional")) [:div {:class (stl/css :membership)} - [:span {:class (stl/css :subscription-member)} deprecated-icon/crown] + [:> icon* {:class (stl/css :subscription-member) + :icon-id "crown" + :size "m"}] [:span {:class (stl/css :membership-date)} (tr "subscription.settings.support-us-since" subscribed-since)]]) [:div {:class (stl/css :membership)} - [:span {:class (stl/css :penpot-member)} deprecated-icon/user] + [:> icon* {:class (stl/css :penpot-member) + :icon-id "user" + :size "m"}] [:span {:class (stl/css :membership-date)} (tr "subscription.settings.member-since" member-since)]]]] @@ -447,7 +462,7 @@ (when (not= subscription-type "unlimited") [:> plan-card* {:card-title (tr "subscription.settings.unlimited") - :card-title-icon deprecated-icon/character-u + :card-title-icon i/character-u :price-value "$7" :price-period (tr "subscription.settings.price-editor-month") :benefits-title (tr "subscription.settings.benefits.all-professional-benefits") @@ -463,7 +478,7 @@ (when (not= subscription-type "enterprise") [:> plan-card* {:card-title (tr "subscription.settings.enterprise") - :card-title-icon deprecated-icon/character-e + :card-title-icon i/character-e :price-value "$950" :price-period (tr "subscription.settings.price-organization-month") :benefits-title (tr "subscription.settings.benefits.all-unlimited-benefits")