github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-11-15 06:31:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Update promotional banner (#12944)

Browse Source
This commit is contained in:
Marina López 2026-11-12 12:35:13 +01:00 committed by GitHub
parent df0092fc60
commit b5eab6a949
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 174 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/resources/images/icons/pencil.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16">
<path d="M10.000089645385742,6.791984558105469L5.012907028198242,0.00038909720024093986L0.00008960580453276634,6.818962097167969L0.00008960580453276634,15.989189147949219L10.000089645385742,16.000358581542969L10.000089645385742,6.791984558105469M5.901090621948242,3.9651718139648438L7.837614059448242,6.597831726074219L2.187589645385742,6.597831726074219L4.104093551635742,3.993461608886719L5.901090621948242,3.9651718139648438M1.6542644500732422,7.930595397949219L4.333707809448242,7.930595397949219L4.333707809448242,15.983268737792969L1.6542644500732422,15.995780944824219L1.6542644500732422,7.930595397949219M5.708829879760742,7.930595397949219L8.374113082885742,7.930595397949219L8.374113082885742,15.996421813964844L5.708829879760742,15.991172790527344" fill="currentColor" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 853 B

2
frontend/src/app/main/ui/dashboard/sidebar.cljs
View File

@ -656,7 +656,7 @@
[:*
(if (contains? cf/flags :admin-console)
[:*
[:> nitrate-sidebar* {:profile profile :teams teams}]
[:> nitrate-sidebar* {:profile profile :teams teams :team team}]
[:> nitrate-current-plan* {:profile profile}]]
(when (contains? cf/flags :subscriptions)
(if (show-subscription-dashboard-banner? profile)

66
frontend/src/app/main/ui/dashboard/subscription.cljs
View File

@ -118,8 +118,46 @@
:has-dropdown false
:is-highlighted false}]))))
(mf/defc nitrate-enterprise-banner*
[{:keys [on-click button-label]}]
(let [collapsed* (mf/use-state false)
collapsed? (deref collapsed*)
toggle-collapse
(mf/use-fn #(swap! collapsed* not))]
[:div {:class (stl/css-case :nitrate-banner true
:nitrate-enterprise-banner true
:collapsed collapsed?)}
[:button {:class (stl/css :nitrate-enterprise-toggle)
:type "button"
:aria-controls "nitrate-enterprise-content"
:aria-expanded (not collapsed?)
:on-click toggle-collapse}
[:> icon* {:icon-id i/pencil
:size "m"
:class (stl/css :nitrate-enterprise-pencil)
:aria-hidden true}]
[:span {:class (stl/css :nitrate-enterprise-title)}
(tr "subscription.dashboard.banner.unlock-enterprise")]
[:> icon* {:icon-id i/arrow-down
:size "m"
:class (stl/css :nitrate-enterprise-chevron)
:aria-hidden true}]]
[:div {:id "nitrate-enterprise-content"
:class (stl/css :nitrate-enterprise-panel)
:aria-hidden collapsed?}
[:div {:class (stl/css :nitrate-enterprise-panel-inner)}
[:span {:class (stl/css :nitrate-enterprise-description)}
(tr "subscription.dashboard.banner.unlock-features-description")]
[:> button* {:variant "primary"
:type "button"
:class (stl/css :nitrate-bottom-button)
:on-click on-click
:disabled collapsed?}
button-label]]]]))
(mf/defc nitrate-sidebar*
[{:keys [profile teams]}]
[{:keys [profile teams team]}]
(let [nitrate? (dnt/is-valid-license? profile)
nitrate-license (:subscription profile)
manual-license? (:manual nitrate-license)
@ -151,6 +189,12 @@
subscription-type
(if nitrate? (:type nitrate-license) (get-subscription-type (-> profile :props :subscription)))
show-unlock-features?
(and (contains? cf/flags :admin-console)
(not nitrate?)
(contains? #{"professional" "unlimited"} subscription-type)
(nil? (dm/get-in team [:organization :id])))
team-count (count teams)
account-age-days (dnt/account-age-days profile)
@ -210,19 +254,13 @@
:class (stl/css :nitrate-bottom-button)
:on-click handle-go-to-cc} (tr "nitrate.activation-success.create-organization")]]]
;; Banner for users without nitrate license
(when (not nitrate?)
[:div {:class (stl/css :nitrate-banner :highlighted)}
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-title)} (tr "subscription.dashboard.banner.unlock-features")]]
[:div {:class (stl/css :nitrate-content)}
[:span {:class (stl/css :nitrate-info)} (tr "subscription.dashboard.banner.unlock-features-description-text")]
[:> button* {:variant "primary"
:type "button"
:class (stl/css :nitrate-bottom-button)
:on-click handle-click} (if (:subscription profile)
(tr "subscription.dashboard.banner.upgrade-nitrate")
(tr "nitrate.form.try-free"))]]]))
;; Banner for Professional/Unlimited users outside an organization
(when show-unlock-features?
[:> nitrate-enterprise-banner*
{:on-click handle-click
:button-label (if (:subscription profile)
(tr "subscription.dashboard.banner.upgrade-nitrate")
(tr "nitrate.form.try-free"))}]))
;; Banner for users with nitrate license almost expired or expired
(when show-subscription-warning?

111
frontend/src/app/main/ui/dashboard/subscription.scss
View File

@ -208,25 +208,132 @@
}
.nitrate-banner {
--nitrate-enterprise-gradient-start: var(--color-accent-success);
--nitrate-enterprise-gradient-end: var(--color-token-border);
:global(.light) & {
--nitrate-enterprise-gradient-start: var(--color-background-info);
--nitrate-enterprise-gradient-end: var(--color-accent-primary-muted);
}
display: flex;
border-radius: var(--sp-s);
flex-direction: column;
margin: var(--sp-m) var(--sp-m) 0;
background: var(--color-accent-select);
background: linear-gradient(
110deg,
var(--nitrate-enterprise-gradient-start),
var(--nitrate-enterprise-gradient-end)
);
border: $b-1 solid var(--color-accent-primary-muted);
padding: var(--sp-l);
}
.nitrate-enterprise-banner {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background: linear-gradient(
110deg,
var(--nitrate-enterprise-gradient-start),
var(--nitrate-enterprise-gradient-end)
);
transition: grid-template-rows 240ms ease;
}
.nitrate-enterprise-banner.collapsed {
grid-template-rows: auto minmax(0, 0fr);
}
.nitrate-enterprise-toggle {
appearance: none;
background: transparent;
border: 0;
color: var(--color-foreground-primary);
cursor: pointer;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sp-s);
inline-size: 100%;
padding: 0;
text-align: start;
font: inherit;
&:focus-visible {
outline: var(--color-accent-primary) solid $b-2;
outline-offset: var(--sp-xxs);
border-radius: $br-4;
}
}
.nitrate-enterprise-title {
@include use-typography("body-large");
color: var(--color-foreground-primary);
font-weight: 600;
}
.nitrate-enterprise-pencil {
--icon-fill-color: currentcolor;
--icon-stroke-color: none;
color: var(--color-foreground-primary);
}
.nitrate-enterprise-chevron {
color: var(--color-foreground-secondary);
transition: transform 240ms ease;
}
.collapsed .nitrate-enterprise-chevron {
transform: rotate(180deg);
}
.nitrate-enterprise-panel {
min-block-size: 0;
overflow: hidden;
opacity: 1;
transition: opacity 180ms ease;
}
.collapsed .nitrate-enterprise-panel {
opacity: 0;
pointer-events: none;
}
.nitrate-enterprise-panel-inner {
display: flex;
flex-direction: column;
min-block-size: 0;
padding-block-start: var(--sp-s);
}
.nitrate-enterprise-description {
@include use-typography("body-medium");
color: var(--color-foreground-primary);
margin-block-end: var(--sp-l);
}
@media (prefers-reduced-motion: reduce) {
.nitrate-enterprise-banner,
.nitrate-enterprise-chevron,
.nitrate-enterprise-panel {
transition: none;
}
}
.nitrate-title {
@include use-typography("body-large");
color: var(--color-foreground-primary);
font-weight: 600;
}
.nitrate-info {
@include use-typography("body-medium");
color: var(--color-foreground-secondary);
color: var(--color-foreground-primary);
margin-block: var(--sp-s) var(--sp-xxl);
}

1
frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View File

@ -223,6 +223,7 @@
(def ^:icon-id padding-top "padding-top")
(def ^:icon-id padding-top-bottom "padding-top-bottom")
(def ^:icon-id path "path")
(def ^:icon-id pencil "pencil")
(def ^:icon-id pentool "pentool")
(def ^:icon-id percentage "percentage")
(def ^:icon-id picker "picker")

10
frontend/translations/en.po
View File

@ -5803,14 +5803,12 @@ msgid "subscription.dashboard.banner.subscription-expired"
msgstr "Your Enterprise subscription has expired. (%s)"
#: src/app/main/ui/dashboard/subscription.cljs:217
msgid "subscription.dashboard.banner.unlock-features"
msgstr "Unlock Enterprise features"
msgid "subscription.dashboard.banner.unlock-enterprise"
msgstr "Unlock Enterprise"
#: src/app/main/ui/dashboard/subscription.cljs:219
msgid "subscription.dashboard.banner.unlock-features-description-text"
msgstr ""
"Set fine-grained permissions and stay in control, without compromising the "
"open-source freedom your team loves."
msgid "subscription.dashboard.banner.unlock-features-description"
msgstr "For organizations that need advanced governance, centralized administration, and secure collaboration."
#: src/app/main/ui/dashboard/subscription.cljs:224
msgid "subscription.dashboard.banner.upgrade-nitrate"

10
frontend/translations/es.po
View File

@ -5853,14 +5853,12 @@ msgid "subscription.dashboard.banner.subscription-expired"
msgstr "Tu suscripción Enterprise ha caducado. (%s)"
#: src/app/main/ui/dashboard/subscription.cljs:217
msgid "subscription.dashboard.banner.unlock-features"
msgstr "Desbloquea las funciones Enterprise"
msgid "subscription.dashboard.banner.unlock-enterprise"
msgstr "Desbloquea Enterprise"
#: src/app/main/ui/dashboard/subscription.cljs:219
msgid "subscription.dashboard.banner.unlock-features-description-text"
msgstr ""
"Establece permisos detallados y mantén el control, sin renunciar a la "
"libertad del código abierto que tanto valora tu equipo."
msgid "subscription.dashboard.banner.unlock-features-description"
msgstr "Para organizaciones que necesitan una gobernanza avanzada, una administración centralizada y una colaboración segura."
#: src/app/main/ui/dashboard/subscription.cljs:224
msgid "subscription.dashboard.banner.upgrade-nitrate"