Replace crown icons with new pro-badge SVG and update branding colors #1734
Conversation
WalkthroughThis pull request replaces the crown icon asset with a pro-badge asset across the codebase and updates associated styling. Changes include CSS/LESS modifications to pro preview overlays and upgrade button styling, Vue component simplifications, and icon path updates in PHP templates and helper files. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 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 |
2 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