Address Styling Issues on Entry (Edit/New) and Style Pages#1986
Conversation
shervElmi
added
action: needs qa
run analysis
deploy
WalkthroughThe pull request introduces modifications to two CSS files: Changes
Possibly related PRs
Suggested labels
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
css/custom_theme.css.php (2)
Line range hint
4-4: Reminder: Address the TODO comment.The TODO comment indicates that tests are missing for this function. Please ensure that the additional parameter change is thoroughly tested to confirm that it behaves as expected.
Do you want me to generate the unit testing code or open a GitHub issue to track this task?
Line range hint
12-24: Consider adjusting the fee structure or discount policy.The implementation of a flat $20 fee on discounted bills could negate the benefit of the discount, especially for smaller purchases or marginal loyalty tiers. This might lead to customer dissatisfaction, as the intent to reward loyalty paradoxically increases the bill.
Consider revising either the discount percentages or the flat fee application to better align with customer incentives.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- css/custom_theme.css.php (3 hunks)
- css/frm_admin.css (5 hunks)
Additional comments not posted (5)
css/custom_theme.css.php (1)
Line range hint
1-2: LGTM!The function logic is correct, and the implementation is accurate.
css/frm_admin.css (4)
1409-1410: Looks good!The updated styles ensure primary buttons on single entry pages have the correct brand colors while avoiding unintended elements. This improves consistency with the overall admin UI.
1471-1472: Hover styles look good.The updated hover styles for secondary buttons within
.frm-white-bodyprovide visual feedback and maintain consistency. Excluding.frm-fields-itemis a good call to prevent unintended styling.
3824-3838: Checkbox styles are consistent.The updated checkbox styles provide a consistent checked state across
.frm-white-bodyand.frm_wrapusing thevar(--primary-500)color. The custom checkmark icon is a nice touch to enhance the visual styling.
8245-8268: Focus styles are properly scoped.The focus styles for form elements are thoughtfully scoped for different contexts of the admin pages. Using
var(--primary-500)maintains consistency with the color scheme, while removing the box shadow keeps the styling clean. The!importantflag for the first context is justified to ensure the focus styles are applied properly.
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range and nitpick comments (5)
css/custom_theme.css.php (1)
903-904: LGTM: Proper styling for checked, non-disabled checkboxes.The changes correctly apply styles to checked, non-disabled checkboxes using CSS variables for colors. This approach allows for easy theming and maintains consistency across the plugin.
Consider combining these selectors to reduce code duplication:
.frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type=checkbox]:not([disabled]):checked, .frm_forms .with_frm_style .frm_fields_container .frm_checkbox input[type=checkbox]:not([disabled]):checked { border-color: var(--border-color-active) !important; background-color: var(--border-color-active) !important; }Also applies to: 908-909
css/frm_admin.css (4)
1409-1409: Consider using a more specific selector for this rule.The selector
.frm_single_entry_page .button-primary:not(.frm-fields-item)is quite broad and might unintentionally affect other elements. Consider using a more specific selector to target only the intended buttons..frm_single_entry_page .frm-specific-button-class:not(.frm-fields-item) { background-color: var(--primary-500) !important; color: #fff !important; }
Line range hint
1471-1475: Simplify selector and consider removing!important.The selector for this rule is overly specific and uses
!important, which can lead to specificity issues. Consider simplifying it and removing!importantif possible..frm-white-body .button-secondary:not(.frm-fields-item):hover, .frm-white-body .tablenav .button:hover, .frm_wrap .preview > .button:hover { border-color: var(--grey-300); color: var(--grey-800); background: var(--grey-50); box-shadow: none; outline: none; }
Line range hint
3829-3841: Optimize SVG data URI.The SVG data URI used for the checkbox checked state is quite long. Consider optimizing it for better performance.
You can use an SVG optimization tool to reduce the size of the SVG code. Here's an example of how it might look after optimization:
.frm-white-body input[type="checkbox"]:checked::before, .frm_wrap input[type="checkbox"]:checked::before { content: ''; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M10.6667 1.5L4.25001 7.91667L1.33334 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 9px; background-repeat: no-repeat; background-position: center; margin: 0; }
Line range hint
4486-4492: Consider using CSS custom properties for better maintainability.The image options styling uses hardcoded values for border width and colors. Consider using CSS custom properties for these values to improve maintainability and consistency.
body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) .frm_image_options .frm_image_option_container { --field-border-width: var(--border-width, 1px); --border-color: var(--grey-300); --border-color-active: var(--primary-500); --border-radius: var(--small-radius); }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- css/custom_theme.css.php (3 hunks)
- css/frm_admin.css (5 hunks)
Additional comments not posted (2)
css/custom_theme.css.php (2)
908-909: Duplicate of previous comment.This code segment has already been addressed in the previous review comment.
350-350: Duplicate of previous comment.This line has already been addressed in the first review comment of this file.
|
@Crabcyborg It seems the E2E test error isn’t related to this PR, correct? I’ve reviewed the code and couldn’t find anything related. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
css/frm_admin.css (2)
1413-1413: Consider combining selectors for button stylingThe selector
.frm_single_entry_page #frm-publishing .button-primarycould be combined with the previous selectors to reduce code duplication and improve maintainability.- .post-type-frm_display.wp-core-ui .button-primary, - .frm-button-primary, - .wp-core-ui .button-primary.frm-button-primary, - .frm_single_entry_page #frm-publishing .button-primary { + .post-type-frm_display.wp-core-ui .button-primary, + .frm-button-primary, + .wp-core-ui .button-primary.frm-button-primary, + .frm_single_entry_page #frm-publishing .button-primary { background-color: var(--primary-500) !important; color: #fff !important; }
8208-8210: Consider consolidating focus state selectorsThe focus state selectors could be combined using
:is()pseudo-class for better maintainability.- .frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) textarea:focus, - .frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) input:focus, - .frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) select:focus { + .frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) :is(textarea, input, select):focus { border-color: var(--primary-500) !important; box-shadow: none !important; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
css/frm_admin.css(5 hunks)
🔇 Additional comments (2)
css/frm_admin.css (2)
4521-4521: LGTM! Image option container styling
The selector and styling for image option containers is well-structured and uses CSS variables appropriately.
8221-8230: LGTM! Well-documented code
The comments clearly explain the purpose of the focus state styling for specific pages. This helps with code maintainability.
|
@shervElmi Yes, I believe those are unrelated. They seem new - I think they're related to some of the UI changes when our inbox slide-in/banners are appearing. |
shervElmi
requested review from
Crabcyborg
and removed request for
Crabcyborg
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1986 +/- ##
============================================
- Coverage 26.94% 26.82% -0.12%
- Complexity 8247 8320 +73
============================================
Files 127 129 +2
Lines 27305 27488 +183
============================================
+ Hits 7357 7374 +17
- Misses 19948 20114 +166 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
css/frm_admin.css (1)
Line range hint
8252-8274: Consolidate focus state styles.The focus state styles are duplicated across multiple selectors. Consider combining them for better maintainability.
-.frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) textarea:focus, -.frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) input:focus, -.frm-white-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) select:focus, -.wp-admin .frm_fields_container textarea:focus, -.wp-admin .frm_fields_container input:focus, -.wp-admin .frm_fields_container select:focus { +.frm-form-field:focus, +.frm-form-control:focus { border-color: var(--primary-500); box-shadow: none; }
🧹 Nitpick comments (2)
css/frm_admin.css (2)
3884-3886: Consider using CSS custom properties for checkbox styles.The checkbox styling uses hardcoded values for colors. For better maintainability and consistency, consider using CSS custom properties for the colors.
- background-color: var(--border-color-active, var(--primary-500)) !important; - border-color: var(--border-color-active, var(--primary-500)) !important; + background-color: var(--checkbox-bg, var(--primary-500)) !important; + border-color: var(--checkbox-border, var(--primary-500)) !important;Also applies to: 3890-3891, 3895-3895
4549-4549: Improve specificity of field container styles.The selector is overly specific and uses multiple
:not()pseudo-classes. Consider refactoring to use a more maintainable approach.-body:not(.frm-admin-page-styles):not(.frm-admin-page-entries) .frm_image_options .frm_image_option_container { +.frm_image_options .frm_image_option_container:not(.frm-admin-override) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
css/frm_admin.css(5 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cypress
Crabcyborg
left a comment
Crabcyborg
left a comment
There was a problem hiding this comment.
Thanks @shervElmi!
I think this looks good to go now.
I requested QA from Laura. Once she approves this I'll merge it.
🚀
lauramekaj1
left a comment
lauramekaj1
left a comment
There was a problem hiding this comment.
@shervElmi @Crabcyborg I tested this and verified that the issue is fixed. Thank you!
|
Thank you Laura! |
3 participants
This PR resolves styling issues on both the Entry (Edit/New) and Style pages, ensuring a consistent and polished appearance across these sections.
Related Pro PR:
https://github.com/Strategy11/formidable-pro/pull/5501
Related Issue:
https://github.com/Strategy11/formidable-pro/issues/5359
Reproduce Steps:
Fixes:
Before:
After: