Skip to content

Replace crown icons with new pro-badge SVG and update branding colors #1734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Replace crown icons with new pro-badge SVG and update branding colors #1734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21063fb
Replace crown icons with new pro-badge SVG and update branding colors
arifulhoque7 Nov 4, 2025
3767ffd
fix: crown svg change in subscription page
arifulhoque7 Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 43 additions & 14 deletions assets/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -671,11 +671,12 @@ tr.pro-preview .pro-field-overlay,
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
background: rgba(236, 253, 245, 0.5);
border-radius: 5px;
top: 0;
left: 0;
display: none;
border: 1px dashed #10b981;
}
tr.pro-preview-html th {
width: 50%;
Expand All @@ -688,17 +689,22 @@ tr.pro-preview-html th {
}
.wpuf-subscription-pack-settings nav .tab-current a.wpuf-button.button-upgrade-to-pro,
a.wpuf-button.button-upgrade-to-pro {
padding: 10px 15px;
background: #ff9000;
padding: 8px 16px;
background: #059669;
color: #fff;
min-height: auto;
border-radius: 5px;
border-radius: 6px;
text-decoration: none;
border: none;
display: inline-flex;
align-items: center;
gap: 5px;
justify-content: center;
gap: 8px;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
transition: background-color 0.2s ease;
}
.pro-field-overlay a.wpuf-button.button-upgrade-to-pro {
position: absolute;
Expand All @@ -709,22 +715,26 @@ a.wpuf-button.button-upgrade-to-pro {
}
.wpuf-subscription-pack-settings nav .tab-current a.wpuf-button.button-upgrade-to-pro:hover,
a.wpuf-button.button-upgrade-to-pro:hover {
background: #d07805;
background: #10b981;
}
span.pro-icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
span.pro-icon svg {
height: 1em;
span.pro-icon svg,
span.pro-icon img {
max-width: 100%;
height: auto;
margin-left: 5px;
vertical-align: middle;
}
span.pro-icon.icon-white svg path {
/* span.pro-icon.icon-white svg path {
fill: #fff;
}
label span.pro-icon svg path {
fill: #fB9a28;
}
} */
/* label span.pro-icon svg path {
fill: #10b981;
} */
img.profile-header,
img.user-listing {
display: block;
Expand Down Expand Up @@ -830,11 +840,22 @@ tr.pro-preview.wpuf-subscription-recurring td {
tr.pro-preview span.pro-icon,
tr span.pro-icon-title {
position: relative;
padding-top: 10px;
}
a span.pro-icon-title {
position: relative;
}
span.pro-icon-title {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
span.pro-icon-title svg,
span.pro-icon-title img {
max-width: 100%;
height: auto;
margin-left: 5px;
vertical-align: middle;
}
a span.pro-icon-title .wpuf-pro-field-tooltip {
left: 185px;
}
Expand All @@ -848,6 +869,14 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
-webkit-opacity: 1;
opacity: 1;
}
.wpuf-module-pro-badge {
display: block;
width: 39px;
height: 22px;
position: absolute;
top: 10px;
right: 10px;
}
.wpuf-xmp-tag {
display: inline;
}
Expand Down
4 changes: 3 additions & 1 deletion assets/css/admin/wpuf-module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,12 @@
width: 100%;
height: 100%;
content: "";
background: rgba(0, 0, 0, .5);
background: rgba(236, 253, 245, 0.5);
border-radius: 5px;
top: 0;
left: 0;
z-index: -1;
border: 1px dashed #10b981;
}

.form-create-overlay a.wpuf-button.button-upgrade-to-pro {
Expand Down
15 changes: 10 additions & 5 deletions assets/js/components/ProBadge.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
<script setup></script>
<script setup>
import { computed } from 'vue';

const assetUrl = computed(() => {
return window.wpufSubscriptions?.assetUrl || '/wp-content/plugins/wp-user-frontend/assets';
});

const badgeUrl = computed(() => `${assetUrl.value}/images/pro-badge.svg`);
</script>

<template>
<svg
width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.2131 4.11564C19.2161 4.16916 19.2121 4.22364 19.1983 4.27775L17.9646 10.5323C17.9024 10.7741 17.6796 10.9441 17.4235 10.9455L10.0216 10.9818H10.0188H2.61682C2.35933 10.9818 2.13495 10.8112 2.07275 10.5681L0.839103 4.29542C0.824897 4.23985 0.820785 4.18385 0.824374 4.12895C0.34714 3.98269 0 3.54829 0 3.03636C0 2.40473 0.528224 1.89091 1.17757 1.89091C1.82692 1.89091 2.35514 2.40473 2.35514 3.03636C2.35514 3.39207 2.18759 3.71033 1.92523 3.92058L3.46976 5.43433C3.86011 5.81695 4.40179 6.03629 4.95596 6.03629C5.61122 6.03629 6.23596 5.7336 6.62938 5.22647L9.1677 1.95491C8.95447 1.74764 8.82243 1.46124 8.82243 1.14545C8.82243 0.513818 9.35065 0 10 0C10.6493 0 11.1776 0.513818 11.1776 1.14545C11.1776 1.45178 11.0526 1.72982 10.8505 1.93556L10.8526 1.93811L13.3726 5.21869C13.7658 5.73069 14.3928 6.03636 15.0499 6.03636C15.6092 6.03636 16.1351 5.82451 16.5305 5.43978L18.0848 3.92793C17.8169 3.71775 17.6449 3.39644 17.6449 3.03636C17.6449 2.40473 18.1731 1.89091 18.8224 1.89091C19.4718 1.89091 20 2.40473 20 3.03636C20 3.53462 19.6707 3.9584 19.2131 4.11564ZM17.8443 12.6909C17.8443 12.3897 17.5932 12.1455 17.2835 12.1455H2.77884C2.46916 12.1455 2.21809 12.3897 2.21809 12.6909V14C2.21809 14.3012 2.46916 14.5455 2.77884 14.5455H17.2835C17.5932 14.5455 17.8443 14.3012 17.8443 14V12.6909Z" fill="#FB9A28"/>
</svg>
<img :src="badgeUrl" alt="PRO" width="39" height="22" />
</template>
9 changes: 1 addition & 8 deletions assets/js/components/ProTooltip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,6 @@
</ul>
<div class="pro-link"><a
href="https://wedevs.com/wp-user-frontend-pro/pricing/?utm_source=wpdashboard&amp;utm_medium=popup"
target="_blank" class="wpuf-button button-upgrade-to-pro wpuf-flex wpuf-items-center wpuf-w-[calc(100%-2rem)] wpuf-justify-around">Upgrade to PRO<span
class="pro-icon icon-white"> <svg width="20" height="15" viewBox="0 0 20 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.2131 4.11564C19.2161 4.16916 19.2121 4.22364 19.1983 4.27775L17.9646 10.5323C17.9024 10.7741 17.6796 10.9441 17.4235 10.9455L10.0216 10.9818H10.0188H2.61682C2.35933 10.9818 2.13495 10.8112 2.07275 10.5681L0.839103 4.29542C0.824897 4.23985 0.820785 4.18385 0.824374 4.12895C0.34714 3.98269 0 3.54829 0 3.03636C0 2.40473 0.528224 1.89091 1.17757 1.89091C1.82692 1.89091 2.35514 2.40473 2.35514 3.03636C2.35514 3.39207 2.18759 3.71033 1.92523 3.92058L3.46976 5.43433C3.86011 5.81695 4.40179 6.03629 4.95596 6.03629C5.61122 6.03629 6.23596 5.7336 6.62938 5.22647L9.1677 1.95491C8.95447 1.74764 8.82243 1.46124 8.82243 1.14545C8.82243 0.513818 9.35065 0 10 0C10.6493 0 11.1776 0.513818 11.1776 1.14545C11.1776 1.45178 11.0526 1.72982 10.8505 1.93556L10.8526 1.93811L13.3726 5.21869C13.7658 5.73069 14.3928 6.03636 15.0499 6.03636C15.6092 6.03636 16.1351 5.82451 16.5305 5.43978L18.0848 3.92793C17.8169 3.71775 17.6449 3.39644 17.6449 3.03636C17.6449 2.40473 18.1731 1.89091 18.8224 1.89091C19.4718 1.89091 20 2.40473 20 3.03636C20 3.53462 19.6707 3.9584 19.2131 4.11564ZM17.8443 12.6909C17.8443 12.3897 17.5932 12.1455 17.2835 12.1455H2.77884C2.46916 12.1455 2.21809 12.3897 2.21809 12.6909V14C2.21809 14.3012 2.46916 14.5455 2.77884 14.5455H17.2835C17.5932 14.5455 17.8443 14.3012 17.8443 14V12.6909Z"
fill="#FB9A28"></path>
</svg>
</span></a></div><i style="left: 50%; top: 100%; transform: initial;"></i>
target="_blank" class="wpuf-button button-upgrade-to-pro wpuf-flex wpuf-items-center wpuf-w-[calc(100%-2rem)] wpuf-justify-around">Upgrade to PRO</a></div><i style="left: 50%; top: 100%; transform: initial;"></i>
</div>
</template>
9 changes: 2 additions & 7 deletions assets/js/components/subscriptions/SectionInputField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,16 +307,11 @@ onMounted(() => {
class="wpuf-w-full wpuf-col-span-2 wpuf-relative wpuf-group">
<div
v-if="showProBadge"
class="wpuf-hidden wpuf-rounded-md group-hover:wpuf-flex group-hover:wpuf-cursor-pointer wpuf-absolute wpuf-items-center wpuf-justify-center wpuf-bg-black/25 wpuf-z-10 wpuf-p-4 wpuf-w-[104%] wpuf-h-[180%] wpuf-top-[-40%] wpuf-left-[-2%]">
class="wpuf-hidden wpuf-rounded-md wpuf-border wpuf-border-dashed wpuf-border-emerald-200 group-hover:wpuf-flex group-hover:wpuf-cursor-pointer wpuf-absolute wpuf-items-center wpuf-justify-center wpuf-bg-emerald-50/50 wpuf-backdrop-blur-sm wpuf-z-10 wpuf-p-4 wpuf-w-[104%] wpuf-h-[180%] wpuf-top-[-40%] wpuf-left-[-2%]">
<a href="https://wedevs.com/wp-user-frontend-pro/pricing/?utm_source=wpdashboard&amp;utm_medium=popup"
target="_blank"
class="wpuf-inline-flex wpuf-align-center wpuf-p-2 wpuf-bg-amber-500 focus:wpuf-bg-amber-600 hover:wpuf-bg-amber-600 wpuf-text-white hover:wpuf-text-white wpuf-rounded-md">
class="wpuf-button button-upgrade-to-pro wpuf-inline-flex wpuf-items-center wpuf-px-4 wpuf-py-2 wpuf-bg-emerald-600 focus:wpuf-bg-emerald-700 hover:wpuf-bg-emerald-700 wpuf-text-white hover:wpuf-text-white wpuf-rounded-md wpuf-gap-2 wpuf-font-medium wpuf-text-sm">
{{ __( 'Upgrade to Pro', 'wp-user-frontend' ) }}
<span class="pro-icon icon-white">
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.2131 4.11564C19.2161 4.16916 19.2121 4.22364 19.1983 4.27775L17.9646 10.5323C17.9024 10.7741 17.6796 10.9441 17.4235 10.9455L10.0216 10.9818H10.0188H2.61682C2.35933 10.9818 2.13495 10.8112 2.07275 10.5681L0.839103 4.29542C0.824897 4.23985 0.820785 4.18385 0.824374 4.12895C0.34714 3.98269 0 3.54829 0 3.03636C0 2.40473 0.528224 1.89091 1.17757 1.89091C1.82692 1.89091 2.35514 2.40473 2.35514 3.03636C2.35514 3.39207 2.18759 3.71033 1.92523 3.92058L3.46976 5.43433C3.86011 5.81695 4.40179 6.03629 4.95596 6.03629C5.61122 6.03629 6.23596 5.7336 6.62938 5.22647L9.1677 1.95491C8.95447 1.74764 8.82243 1.46124 8.82243 1.14545C8.82243 0.513818 9.35065 0 10 0C10.6493 0 11.1776 0.513818 11.1776 1.14545C11.1776 1.45178 11.0526 1.72982 10.8505 1.93556L10.8526 1.93811L13.3726 5.21869C13.7658 5.73069 14.3928 6.03636 15.0499 6.03636C15.6092 6.03636 16.1351 5.82451 16.5305 5.43978L18.0848 3.92793C17.8169 3.71775 17.6449 3.39644 17.6449 3.03636C17.6449 2.40473 18.1731 1.89091 18.8224 1.89091C19.4718 1.89091 20 2.40473 20 3.03636C20 3.53462 19.6707 3.9584 19.2131 4.11564ZM17.8443 12.6909C17.8443 12.3897 17.5932 12.1455 17.2835 12.1455H2.77884C2.46916 12.1455 2.21809 12.3897 2.21809 12.6909V14C2.21809 14.3012 2.46916 14.5455 2.77884 14.5455H17.2835C17.5932 14.5455 17.8443 14.3012 17.8443 14V12.6909Z" fill="#FB9A28" />
</svg>
</span>
</a>
</div>
<input
Expand Down
2 changes: 1 addition & 1 deletion assets/js/components/subscriptions/Subsection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const toggleDependentFields = ( fieldId, status ) => {
<span v-if="subSection.sub_label" class="wpuf-relative wpuf-m-0 wpuf-p-0 wpuf-ml-2 wpuf-mt-[1px] wpuf-italic wpuf-text-[11px] wpuf-text-gray-400">
{{ subSection.sub_label }}
</span>
<span class="pro-icon-title wpuf-relative wpuf-pt-1 wpuf-group wpuf-ml-2">
<span class="pro-icon-title wpuf-relative wpuf-group wpuf-ml-2">
<ProBadge v-if="subSection.is_pro" />
<ProTooltip />
</span>
Expand Down
70 changes: 56 additions & 14 deletions assets/less/admin.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -871,11 +871,12 @@ tr.pro-preview .pro-field-overlay,
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
background: rgba(236, 253, 245, 0.5);
border-radius: 5px;
top: 0;
left: 0;
display: none;
border: 1px dashed #10b981;
}

tr.pro-preview-html th {
Expand All @@ -892,17 +893,22 @@ tr.pro-preview-html th {

.wpuf-subscription-pack-settings nav .tab-current a.wpuf-button.button-upgrade-to-pro,
a.wpuf-button.button-upgrade-to-pro {
padding: 10px 15px;
background: #ff9000;
padding: 8px 16px;
background: #059669;
color: #fff;
min-height: auto;
border-radius: 5px;
border-radius: 6px;
text-decoration: none;
border: none;
display: inline-flex;
align-items: center;
gap: 5px;
justify-content: center;
gap: 8px;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
transition: background-color 0.2s ease;
}

.pro-field-overlay a.wpuf-button.button-upgrade-to-pro {
Expand All @@ -915,26 +921,40 @@ a.wpuf-button.button-upgrade-to-pro {

.wpuf-subscription-pack-settings nav .tab-current a.wpuf-button.button-upgrade-to-pro:hover,
a.wpuf-button.button-upgrade-to-pro:hover {
background: #d07805;
background: #10b981;
}

span.pro-icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
}

span.pro-icon svg {
height: 1em;
span.pro-icon svg,
span.pro-icon img {
max-width: 100%;
height: auto;
margin-left: 5px;
vertical-align: middle;
}

span.pro-icon.icon-white svg path {
fill: #fff;
.form-table th span.pro-icon,
.form-table label span.pro-icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
line-height: 0;
position: relative;
top: -1px;
}

label span.pro-icon svg path {
fill: #fB9a28;
}
/* span.pro-icon.icon-white svg path {
fill: #fff;
} */

/* label span.pro-icon svg path {
fill: #10b981;
} */

img.profile-header, img.user-listing {
display: block;
Expand Down Expand Up @@ -1047,13 +1067,26 @@ tr.pro-preview.wpuf-subscription-recurring td {
tr.pro-preview span.pro-icon,
tr span.pro-icon-title {
position: relative;
padding-top: 10px;
}

a span.pro-icon-title {
position: relative;
}

span.pro-icon-title {
display: inline-flex;
align-items: center;
vertical-align: middle;
}

span.pro-icon-title svg,
span.pro-icon-title img {
max-width: 100%;
height: auto;
margin-left: 5px;
vertical-align: middle;
}

a span.pro-icon-title .wpuf-pro-field-tooltip {
left: 185px;
}
Expand All @@ -1070,6 +1103,15 @@ span.pro-icon:hover .wpuf-pro-field-tooltip {
opacity: 1;
}

.wpuf-module-pro-badge {
display: block;
width: 39px;
height: 22px;
position: absolute;
top: 10px;
right: 10px;
}

.wpuf-xmp-tag{
display: inline;
}
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Artwork.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class Pro_Form_Preview_Artwork {
public function __construct() {
$this->title = __( 'Professional Artwork Submission', 'wp-user-frontend' );
$this->image = WPUF_ASSET_URI . '/images/templates/artwork.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/crown.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/pro-badge.svg';
}

/**
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/Forms/Post/Templates/Pro_Form_Preview_EDD.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class Pro_Form_Preview_EDD {
public function __construct() {
$this->title = __( 'EDD Download', 'wp-user-frontend' );
$this->image = WPUF_ASSET_URI . '/images/templates/edd.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/crown.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/pro-badge.svg';
}

/**
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Press_Release.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class Pro_Form_Preview_Press_Release {
public function __construct() {
$this->title = __( 'News/Press Release Submission', 'wp-user-frontend' );
$this->image = WPUF_ASSET_URI . '/images/templates/press-release.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/crown.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/pro-badge.svg';
}

/**
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Professional_Video.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class Pro_Form_Preview_Professional_Video {
public function __construct() {
$this->title = __( 'Professional Video Submission', 'wp-user-frontend' );
$this->image = WPUF_ASSET_URI . '/images/templates/professional-video.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/crown.svg';
$this->pro_icon = WPUF_ASSET_URI . '/images/templates/pro-badge.svg';
}

/**
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/template-parts/modal-v4.1.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ class="wpuf-absolute wpuf-right-4 wpuf-top-4 wpuf-text-gray-400 hover:wpuf-text-
</div>

<?php
$crown_icon = WPUF_ROOT . '/assets/images/crown.svg';
$crown_icon = WPUF_ROOT . '/assets/images/pro-badge.svg';
$pro_badge = WPUF_ASSET_URI . '/images/pro-badge.svg';

foreach ( $registry as $key => $template ) {
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/template-parts/modal-v4.2.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@ class="wpuf-w-full !wpuf-py-[4px] !wpuf-px-[14px] wpuf-border !wpuf-border-gray-
</div>

<?php
$crown_icon = WPUF_ROOT . '/assets/images/crown.svg';
$crown_icon = WPUF_ROOT . '/assets/images/pro-badge.svg';
$pro_badge = WPUF_ASSET_URI . '/images/pro-badge.svg';

foreach ( $registry as $key => $template ) {
Expand Down
2 changes: 1 addition & 1 deletion includes/Admin/template-parts/modal.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
<?php
}

$crown_icon = WPUF_ROOT . '/assets/images/crown.svg';
$crown_icon = WPUF_ROOT . '/assets/images/pro-badge.svg';
foreach ( $pro_templates as $template ) {
$class = 'template-inactive is-pro-template';
$image = $template->get_image();
Expand Down
Loading
Loading