Replace crown icons with new pro-badge SVG and update branding colors #1734
Conversation
WalkthroughThis pull request replaces crown icon usages with a pro-badge asset across PHP templates and loaders, updates pro-related CSS/LESS styling (overlay, upgrade button, icon alignment, module badge), and simplifies Vue components by replacing inline SVGs with image tags and trimming CTA markup. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
includes/Free/Subscription_Element.php (1)
7-13: Rename variable to match the new assetThe variable
$crown_iconnow referencespro-badge.svg, but the variable name still refers to "crown". This creates confusion and reduces code maintainability. Consider renaming it to better reflect the asset it represents.- $crown_icon = WPUF_ROOT . '/assets/images/pro-badge.svg'; - $crown = ''; + $pro_badge_icon = WPUF_ROOT . '/assets/images/pro-badge.svg'; + $pro_badge = ''; - if ( file_exists( $crown_icon ) ) { - $crown = sprintf( '<span class="pro-icon-title"> %s</span>', file_get_contents( $crown_icon ) ); + if ( file_exists( $pro_badge_icon ) ) { + $pro_badge = sprintf( '<span class="pro-icon-title"> %s</span>', file_get_contents( $pro_badge_icon ) ); }Note: You'll also need to update line 16 where
$crownis used in theechostatement.
🧹 Nitpick comments (10)
includes/Free/templates/page-registration-form.php (1)
148-149: Refactor: Consider switching fromfile_get_contents()to an<img>tag for consistency.The
file_get_contents()approach for rendering the pro-badge is inconsistent with the cleaner pattern used insettings-options.php(line 687), which uses an<img>tag. This duplication also appears twice in this file with identical parameters.Consider refactoring to match the img tag pattern:
-<div class="crown-icon pro-icon"> - <?php echo file_get_contents( wp_kses($crown_icon, array('svg' => [ 'xmlns' => true, 'width' => true, 'height' => true, 'viewBox' => true, 'fill' => true ], 'path' => [ 'd' => true, 'fill' => true ], 'circle' => [ 'cx' => true, 'cy' => true, 'r' => true ], ) ) ); // @codingStandardsIgnoreLine ?> -</div> +<div class="crown-icon pro-icon"> + <img src="<?php echo esc_url( WPUF_ASSET_URI . '/images/pro-badge.svg' ); ?>" alt="PRO"> +</div>And similarly for line 195:
-<span class="pro-icon icon-white"> <?php echo file_get_contents( wp_kses($crown_icon, array('svg' => [ 'xmlns' => true, 'width' => true, 'height' => true, 'viewBox' => true, 'fill' => true ], 'path' => [ 'd' => true, 'fill' => true ], 'circle' => [ 'cx' => true, 'cy' => true, 'r' => true ], ) ) ); // @codingStandardsIgnoreLine ?></span> +<span class="pro-icon icon-white"><img src="<?php echo esc_url( WPUF_ASSET_URI . '/images/pro-badge.svg' ); ?>" alt="PRO"></span>Also applies to: 195-195
includes/Admin/template-parts/modal-v4.2.php (1)
269-269: Remove unused variable.The
$crown_iconvariable is defined but never used in this file. Only$pro_badge(line 270) is utilized in the img tag at line 353.Apply this diff to remove the unused variable:
-$crown_icon = WPUF_ROOT . '/assets/images/pro-badge.svg'; $pro_badge = WPUF_ASSET_URI . '/images/pro-badge.svg';includes/Admin/template-parts/modal.php (1)
123-125: Refactor: Consolidate duplicated code and consider switching to<img>tag.The
file_get_contents()call with identical parameters is duplicated on lines 124 and 140. Additionally,modal-v4.2.phpuses a cleaner<img>tag approach (line 353) that should be adopted here for consistency.Consider refactoring to match the pattern in modal-v4.2.php:
Update the variable definition:
-$crown_icon = WPUF_ROOT . '/assets/images/pro-badge.svg'; +$pro_badge = WPUF_ASSET_URI . '/images/pro-badge.svg';Then replace line 124:
-if ( file_exists( $crown_icon ) ) { - printf( '<span class="pro-icon-title"> %s</span>', wp_kses_post( file_get_contents( wp_kses($crown_icon, array('svg' => [ 'xmlns' => true, 'width' => true, 'height' => true, 'viewBox' => true, 'fill' => true ], 'path' => [ 'd' => true, 'fill' => true ], 'circle' => [ 'cx' => true, 'cy' => true, 'r' => true ] ) ) ) ) ); -} +printf( '<span class="pro-icon-title"><img src="%s" alt="PRO"></span>', esc_url( $pro_badge ) );And replace line 140:
-if ( file_exists( $crown_icon ) ) { - printf( '<span class="pro-icon"> %s</span>', wp_kses_post( file_get_contents( wp_kses($crown_icon, array('svg' => [ 'xmlns' => true, 'width' => true, 'height' => true, 'viewBox' => true, 'fill' => true ], 'path' => [ 'd' => true, 'fill' => true ], 'circle' => [ 'cx' => true, 'cy' => true, 'r' => true ] ) ) ) ) ); -} +printf( '<span class="pro-icon"><img src="%s" alt="PRO"></span>', esc_url( $pro_badge ) );Also applies to: 139-141
includes/Admin/template-parts/modal-v4.1.php (1)
44-44: Remove unused variable.The
$crown_iconvariable is defined but never used in this file. Only$pro_badge(line 45) is utilized in the img tag at line 117.Apply this diff to remove the unused variable:
-$crown_icon = WPUF_ROOT . '/assets/images/pro-badge.svg'; $pro_badge = WPUF_ASSET_URI . '/images/pro-badge.svg';assets/js/components/ProTooltip.vue (1)
43-45: Consider removing unnecessary flex utility classesThe anchor now contains only text without an icon. The classes
wpuf-items-centerandwpuf-justify-aroundmay no longer be necessary since they were likely used to align the icon with the text. Consider simplifying the class list to justwpuf-button button-upgrade-to-pro wpuf-w-[calc(100%-2rem)]unless these utilities are needed for vertical centering or other layout purposes.- 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> + target="_blank" class="wpuf-button button-upgrade-to-pro wpuf-flex wpuf-w-[calc(100%-2rem)]">Upgrade to PRO</a></div><i style="left: 50%; top: 100%; transform: initial;"></i>assets/js/components/subscriptions/SectionInputField.vue (1)
308-316: Consider removing unused gap utility classThe anchor now contains only text without an icon. The
wpuf-gap-2class, which adds spacing between flex items, may no longer be necessary. This is a minor cleanup opportunity to simplify the styling.- 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"> + 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-font-medium wpuf-text-sm">includes/Free/Free_Loader.php (2)
186-874: Consider consolidating the pro-badge HTML generation.The pattern
'<img src="' . WPUF_ASSET_URI . '/images/pro-badge.svg" alt="PRO">'is repeated 40+ times across this file. This creates maintenance burden and inconsistency risk.Consider extracting this to a helper method:
private function get_pro_badge_html() { return '<img src="' . esc_url( WPUF_ASSET_URI . '/images/pro-badge.svg' ) . '" alt="' . esc_attr__( 'PRO', 'wp-user-frontend' ) . '">'; }Then use it throughout:
- 'title' => __( 'SMS', 'wp-user-frontend' ) . '<span class="pro-icon-title"> ' . '<img src="' . WPUF_ASSET_URI . '/images/pro-badge.svg" alt="PRO">' . '</span>', + 'title' => __( 'SMS', 'wp-user-frontend' ) . '<span class="pro-icon-title"> ' . $this->get_pro_badge_html() . '</span>',This approach also adds proper escaping with
esc_url()andesc_attr__()for security.
1004-1004: Inconsistent pro-badge rendering approach.The codebase uses two different approaches for rendering the pro-badge:
- Lines 186-874: Direct
<img>tags withWPUF_ASSET_URI- Lines 1004, 1063: Loading SVG content with
file_get_contents()and rendering inlineThis inconsistency makes the code harder to maintain and may cause visual inconsistencies between different admin sections.
Standardize on one approach throughout the file. The
<img>tag approach (lines 186-874) is simpler and more performant since it:
- Doesn't require file I/O operations
- Allows browser caching
- Has cleaner separation of concerns
Consider refactoring lines 1004-1063 to use the same
<img>tag approach used elsewhere.Also applies to: 1142-1144
assets/css/admin.css (1)
732-737: Remove commented CSS code.The commented CSS rules should either be uncommented if needed, or removed entirely to keep the codebase clean.
Apply this diff to remove the commented code:
-/* span.pro-icon.icon-white svg path { - fill: #fff; -} */ -/* label span.pro-icon svg path { - fill: #10b981; -} */If these rules are needed for specific scenarios, they should be uncommented and documented. Otherwise, they should be removed to avoid confusion.
assets/less/admin.less (1)
951-957: Remove commented LESS code.These commented rules in the LESS source are being compiled into the CSS output, creating unnecessary bloat.
Apply this diff to clean up the commented code:
-/* span.pro-icon.icon-white svg path { - fill: #fff; -} */ - -/* label span.pro-icon svg path { - fill: #10b981; -} */If these styles are needed, uncomment and document them. Otherwise, remove them to keep the source clean.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
assets/css/admin.css(5 hunks)assets/css/admin/wpuf-module.css(1 hunks)assets/js/components/ProTooltip.vue(1 hunks)assets/js/components/subscriptions/SectionInputField.vue(1 hunks)assets/less/admin.less(5 hunks)includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Artwork.php(1 hunks)includes/Admin/Forms/Post/Templates/Pro_Form_Preview_EDD.php(1 hunks)includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Press_Release.php(1 hunks)includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Professional_Video.php(1 hunks)includes/Admin/template-parts/modal-v4.1.php(1 hunks)includes/Admin/template-parts/modal-v4.2.php(1 hunks)includes/Admin/template-parts/modal.php(1 hunks)includes/Free/Free_Loader.php(15 hunks)includes/Free/Subscription_Element.php(1 hunks)includes/Free/templates/page-registration-form.php(1 hunks)includes/functions/settings-options.php(1 hunks)wpuf-functions.php(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
wpuf-functions.php (1)
includes/Free/Pro_Prompt.php (2)
Pro_Prompt(8-32)get_upgrade_to_pro_popup_url(29-31)
🪛 PHPMD (2.15.0)
includes/Free/Free_Loader.php
182-182: Avoid unused local variables such as '$crown_icon_path'. (undefined)
(UnusedLocalVariable)
248-248: Avoid unused local variables such as '$crown_icon_path'. (undefined)
(UnusedLocalVariable)
🔇 Additional comments (10)
includes/Admin/Forms/Post/Templates/Pro_Form_Preview_EDD.php (1)
31-31: LGTM!The asset path update from
crown.svgtopro-badge.svgis clean and correct.includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Artwork.php (1)
31-31: LGTM!The asset path update is consistent with other Pro_Form_Preview classes.
includes/functions/settings-options.php (1)
687-687: LGTM!The refactored implementation using an
<img>tag is cleaner and more maintainable than the previousfile_get_contents()approach. This pattern should be considered for other files still usingfile_get_contents().includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Professional_Video.php (1)
31-31: LGTM!The asset path update is consistent with other Pro_Form_Preview template classes.
includes/Admin/Forms/Post/Templates/Pro_Form_Preview_Press_Release.php (1)
28-32: LGTM! Asset path updated correctlyThe pro icon path has been successfully updated from
crown.svgtopro-badge.svg, aligning with the PR's objective to replace crown icons with the new pro-badge asset.wpuf-functions.php (2)
4652-4656: LGTM! Function simplified correctlyThe
wpuf_get_pro_preview_html()function has been successfully updated to return a text-only upgrade button, removing the inline icon markup. This change aligns with the PR objectives and maintains backward compatibility by keeping the function signature unchanged.
4665-4694: LGTM! Tooltip function updated correctlyThe
wpuf_get_pro_preview_tooltip()function has been updated to use a text-only upgrade button while appropriately retaining the check icons for the feature list items. The function structure is well-organized and the changes align with the PR objectives.assets/css/admin/wpuf-module.css (1)
86-99: LGTM! Pro-overlay styling updated consistently.The overlay styling changes align well with the new pro-badge branding:
- Light mint/green tint background provides better readability
- Dashed green border creates a clear visual indicator
- Border-radius adds polish to the UI
The color choice
#10b981is consistent with the green theme used throughout this PR.assets/css/admin.css (1)
690-719: LGTM! Upgrade button styling aligns with new branding.The button styling updates are well-executed:
- Green color scheme (
#059669,#10b981) replaces orange, aligning with the new pro-badge branding- Improved spacing with
gap: 8pxand consistent padding- Better typography with
font-size: 14pxandfont-weight: 500- Smooth transition on hover enhances user experience
The inline-flex layout with centered content ensures proper alignment of text and badge icon.
assets/less/admin.less (1)
874-879: LGTM! Styling changes align with the green branding refresh.The LESS source correctly implements the new pro-badge styling:
- Pro-field overlay updated with light green tint and dashed border
- Upgrade button now uses green color scheme with proper hover states
- Consistent use of
#059669(base) and#10b981(hover/accent) colors- Icon alignment improvements with
vertical-align: middleThese changes will compile correctly to the CSS and provide a cohesive visual update across the admin interface.
Also applies to: 896-925
| */ | ||
| public function pro_sections( $sections ) { | ||
| $crown_icon_path = WPUF_ROOT . '/assets/images/crown.svg'; | ||
| $crown_icon_path = WPUF_ROOT . '/assets/images/pro-badge.svg'; |
There was a problem hiding this comment.
Remove unused variables.
The $crown_icon_path variable is assigned but never used in this method. This creates dead code and can be confusing for future maintainers.
Apply this diff to remove the unused variables:
- $crown_icon_path = WPUF_ROOT . '/assets/images/pro-badge.svg';
$new_sections = [- $crown_icon_path = WPUF_ROOT . '/assets/images/pro-badge.svg';
$settings_fields['wpuf_general'][] = [Based on static analysis hints.
Also applies to: 248-248
🧰 Tools
🪛 PHPMD (2.15.0)
182-182: Avoid unused local variables such as '$crown_icon_path'. (undefined)
(UnusedLocalVariable)
🤖 Prompt for AI Agents
In includes/Free/Free_Loader.php around lines 182 and 248, the variable
$crown_icon_path is assigned but never used; remove these dead-variable
assignments at both line locations to eliminate unused code and update
surrounding code/formatting accordingly so no references remain.
|
Pro badge not updated in subscription creation flow @arifulhoque7 vai |
sapayth
added
Dev Review Done
and removed
needs: dev review
|
@Rubaiyat-E-Mohammad vai , Please check now it is showing properly |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
assets/js/components/ProBadge.vue (1)
11-13: Confirm: badge URL resolves in admin; add image fallback.assets/images/pro-badge.svg exists and wpufSubscriptions.assetUrl is localized in includes/Admin/Admin_Subscription.php and exposed on window (assets/js/subscriptions.js), so ProBadge (assets/js/components/ProBadge.vue) will resolve the badge URL in the subscriptions admin components (assets/js/components/subscriptions/Subsection.vue, SectionInputField.vue). Add a small client-side fallback (e.g., img onerror to hide/swap to inline SVG or use injected wpufSubscriptions when available) to avoid a broken-image icon if the asset fails to load.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
assets/js/components/ProBadge.vue(1 hunks)assets/js/components/subscriptions/SectionInputField.vue(1 hunks)assets/js/components/subscriptions/Subsection.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- assets/js/components/subscriptions/SectionInputField.vue
🔇 Additional comments (2)
assets/js/components/subscriptions/Subsection.vue (1)
71-71: LGTM! Padding adjustment aligns with image-based badge.Removing
wpuf-pt-1is appropriate now that ProBadge renders as an<img>tag with fixed dimensions (39×22). This should improve vertical alignment with the section label text.assets/js/components/ProBadge.vue (1)
1-9: Verify the fallback path assumption, but primary asset URL is handled correctly.The primary asset URL is defined via
plugins_url()in wpuf.php:30, which respects WordPress's plugin directory structure. However, the fallback in ProBadge.vue assumes the path/wp-content/plugins/wp-user-frontend/assets, which will fail if:
- WordPress uses a custom
WP_CONTENT_DIR- The plugin folder is renamed from
wp-user-frontendThe asset URL is passed to the frontend via
wp_localize_script()before the component loads, so the fallback should rarely activate. Still, if it does trigger in non-standard setups, the image will fail to load.Test in installations with custom WordPress structures to confirm the badge displays correctly. Consider removing the hardcoded fallback or making it dynamic if the plugin should support custom configurations.
Rubaiyat-E-Mohammad
added
QA Approved
3 participants
Summary Close issue
Replaced all crown SVG icons (green/orange) with the new pro-badge.svg throughout
the WP User Frontend plugin. Updated "Upgrade to Pro" button styling from
orange/amber to green color scheme for consistent branding.
Changes Made
Icon Replacement
CSS Updates
Vue Component Updates
Files Modified
/includes/functions/settings-options.php/includes/Free/Free_Loader.php/includes/Free/Subscription_Element.php/includes/Free/templates/page-registration-form.php/includes/Admin/Forms/Post/Templates/*.php(4 files)/includes/Admin/template-parts/modal*.php(3 files)/wpuf-functions.php/assets/css/admin.css/assets/css/admin/wpuf-module.css/assets/less/admin.less/assets/js/components/subscriptions/SectionInputField.vue/assets/js/components/ProTooltip.vueVisual Changes
Testing Notes
Summary by CodeRabbit