Update card hover effects: floating animation, orange background, icon/text turn white #5393
Conversation
❌ Console Statements DetectedFound 1 file(s) with Why remove console statements?
Files with violations:website/static/organization/js/hunt_controller.js: How to fix:
Note:
Please remove all console statements and push your changes. |
|
👋 Hi @Preetam-77! This pull request needs a peer review before it can be merged. Please request a review from a team member who is not:
Once a valid peer review is submitted, this check will pass automatically. Thank you! |
github-actions
bot
added
has-conflicts
|
Hi @Preetam-77! This pull request has merge conflicts with the base branch that need to be resolved before it can be merged. To resolve the conflicts:
Once you push the resolved conflicts, this label and comment will be automatically updated. Thank you! 🙏 |
WalkthroughMostly whitespace and formatting fixes across config, docs, and static assets; a Procfile line was uncommented to enable Gunicorn; Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ 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 |
📊 Monthly LeaderboardHi @Preetam-77! Here's how you rank for January 2026:
Leaderboard based on contributions in January 2026. Keep up the great work! 🚀 |
❌ Pre-commit checks failedThe pre-commit hooks found issues that need to be fixed. Please run the following commands locally to fix them: # Install pre-commit if you haven't already
pip install pre-commit
# Run pre-commit on all files
pre-commit run --all-files
# Or run pre-commit on staged files only
pre-commit runAfter running these commands, the pre-commit hooks will automatically fix most issues. 💡 Tip: You can set up pre-commit to run automatically on every commit by running: pre-commit installPre-commit output (last 100 lines)For more information, see the pre-commit documentation. |
![sentry[bot]](https://avatars.githubusercontent.com/u/1396951?s=60&v=4){kind=small}
website/templates/home.html
Outdated
| <!-- Primary Tools Grid --> | ||
| <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 mb-8"> | ||
| <!-- Organizations --> | ||
| <a href="{% url 'organizations' %}" | ||
| class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> | ||
| <i class="fas fa-building text-3xl text-[#e74c3c] mb-3"></i> | ||
| <span class="text-lg font-medium text-center">Organizations</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1">Browse and manage organizations</p> | ||
| <a href="{% url 'organizations' %}" | ||
| class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 hover:bg-[#e74c3c] hover:-translate-y-2 hover:shadow-xl"> | ||
| <i class="fas fa-building text-3xl text-[#e74c3c] mb-3 transition-colors duration-300 group-hover:text-white"></i> | ||
| <span class="text-lg font-medium text-center transition-colors duration-300 group-hover:text-white"> | ||
| Organizations | ||
| </span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white"> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/static/js/issue.js (1)
388-388: Fix pipeline failure: console.error statement must be removed or commented out.The GitHub Actions linter is blocking this change due to the
console.error()statement at line 388. Remove the statement or comment it out per your linting rules.🔎 Suggested fixes
Option 1: Remove the console statement
} catch (error) { - console.error('Error fetching issues:', error); if (!append) { hideSuggestionBox(); } else {Option 2: Comment it out for debugging
} catch (error) { - console.error('Error fetching issues:', error); + // console.error('Error fetching issues:', error); if (!append) { hideSuggestionBox(); } else {
🧹 Nitpick comments (3)
website/documents/BltWeeklyActivityOfContributor.md (1)
43-44: Consider reducing wordiness in performance description.The phrase "a large number of users and activity metrics" can be simplified to "many users and activity metrics" or "numerous users and activity metrics" for better readability while maintaining the same meaning.
🔎 Proposed improvement
-- **Scalability**: The table is designed to handle a large number of users and activity metrics, maintaining performance and user experience even with extensive data. +- **Scalability**: The table is designed to handle many users and activity metrics, maintaining performance and user experience even with extensive data.website/templates/home.html (2)
1147-1209: Note: Slightly better text sizing in this section.This section uses
text-smfor card descriptions instead oftext-xsused in other sections, providing slightly better readability. Consider standardizing ontext-smacross all card sections for consistency and improved accessibility.
987-1209: Optional: Standardize HTML formatting for card elements.There are inconsistent empty lines after closing
</a>tags throughout the card sections (e.g., lines 997, 1008, 1025, 1045, 1062, 1107, 1156, 1167, 1188, 1199). Consider removing these for cleaner, more consistent formatting.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
⛔ Files ignored due to path filters (8)
website/static/images/tech/ml.svgis excluded by!**/*.svgwebsite/static/images/tech/nlp.svgis excluded by!**/*.svgwebsite/static/images/tech/oauth.svgis excluded by!**/*.svgwebsite/static/images/tech/python.svgis excluded by!**/*.svgwebsite/static/images/tech/sql.svgis excluded by!**/*.svgwebsite/static/images/tech/tailwind.svgis excluded by!**/*.svgwebsite/static/img/tomato-svgrepo-com.svgis excluded by!**/*.svgwebsite/static/js/jquery.sparkline.min.jsis excluded by!**/*.min.js
📒 Files selected for processing (36)
.github/codeql-config.yml.github/workflows/add-files-changed-label.yml.lgtm.ymlBACON/bacon-etch.yamlBACON/ord-server/example-split.yamlBACON/regtest/bitcoin.confProcfiledocs/features.mdissues/ValueError_staking_pool.mdwebsite/documents/BltAboutUs.mdwebsite/documents/BltBLTV.mdwebsite/documents/BltChangePassword.mdwebsite/documents/BltCommunityMembers.mdwebsite/documents/BltCompanyDashboard.mdwebsite/documents/BltCompanyListingPage.mdwebsite/documents/BltCompanyScoreboard.mdwebsite/documents/BltDetails.mdwebsite/documents/BltDetailsFromOwasp.mdwebsite/documents/BltGlobalLeaderboard.mdwebsite/documents/BltInvite.mdwebsite/documents/BltLoginPage.mdwebsite/documents/BltSignUpPage.mdwebsite/documents/BltStartaBughunt.mdwebsite/documents/BltStats.mdwebsite/documents/BltTerms.mdwebsite/documents/BltTrademarksSearch.mdwebsite/documents/BltTrademarksSearchResults.mdwebsite/documents/BltUserProfile.mdwebsite/documents/BltWeeklyActivityOfContributor.mdwebsite/static/css/app.min.csswebsite/static/css/checkInModal.csswebsite/static/js/issue.jswebsite/static/js/messages.jswebsite/static/js/reminder_settings.jswebsite/static/organization/js/hunt_controller.jswebsite/templates/home.html
🧰 Additional context used
🪛 GitHub Actions: Check Console Statements
website/static/js/issue.js
[error] 388-388: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
website/static/organization/js/hunt_controller.js
[error] 23-23: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 42-42: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 107-107: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 239-239: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 260-260: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 289-289: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 307-307: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 401-401: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 512-512: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 559-559: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
[error] 582-582: Console statement detected: console.error used at this line. Remove or comment out console.* statements.
🪛 LanguageTool
website/documents/BltWeeklyActivityOfContributor.md
[style] ~44-~44: To reduce wordiness, try specifying a number or using “many” or “numerous” instead.
Context: ...lity**: The table is designed to handle a large number of users and activity metrics, maintaining...
(LARGE_NUMBER_OF)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Run Tests
- GitHub Check: docker-test
🔇 Additional comments (36)
website/documents/BltDetails.md (1)
28-28: ✓ Trailing newline normalization looks good.Adding the trailing newline at EOF is a formatting best practice and aligns with Unix conventions and most style guides.
website/documents/BltAboutUs.md (1)
98-98: Inconsistency between AI summary and actual code change.The AI summary states the bullet marker changed from
-- Error recovery mechanismsto+- Error recovery mechanisms, but the code shown displays only- Error recovery mechanisms(single dash). Please clarify what the actual change is on this line.Additionally, this documentation file doesn't align with the PR objectives, which describe frontend card hover effects, floating animations, and CSS transitions. Verify that the correct files are being reviewed.
website/documents/BltStats.md (1)
1-46: No issues identified.The documentation is well-structured and comprehensive. The trailing newline correction is a minor formatting improvement that follows best practices.
website/documents/BltTerms.md (1)
94-94: Inconsistency: PR objectives describe frontend hover effects, but only a terms document is provided for review.The PR objectives mention card hover styling updates (floating animation, orange backgrounds, white text), CSS/HTML/JS/SVG changes, and updates to
home.html. However, the file provided for review is a Markdown terms document with only a trailing newline addition—a formatting-only change unrelated to the stated PR objectives.Clarify whether:
- The wrong file was provided for review, or
- The PR scope includes both the terms document formatting and the frontend hover effect changes in separate files.
If frontend changes exist, ensure those files are included in this review.
website/documents/BltLoginPage.md (1)
47-47: Formatting-only change; no content modifications.Line 47 appears to be a line-reflow update with identical content and no functional impact. The documentation accurately describes a standard form persistence feature for the Login Page.
However, note a potential scope mismatch: the PR objectives emphasize frontend card hover effects and animations, but this file is login page documentation. Verify that this file was intended to be included in this PR.
website/documents/BltInvite.md (1)
1-79: Well-structured documentation with clean formatting.The file is comprehensive and clearly written, covering the invite page component thoroughly. The end-of-file newline normalization is standard practice. No issues identified.
website/documents/BltBLTV.md (1)
43-43: Trailing newline addition — no functional changes.website/static/js/issue.js (1)
735-735: Trailing newline addition — no functional changes.website/static/js/reminder_settings.js (1)
51-51: Trailing newline addition — no functional changes.website/documents/BltTrademarksSearchResults.md (1)
37-42: Formatting-only change: trailing newline added.This change adds a trailing newline to the Pagination bullet point. The documentation content remains unchanged and properly formatted.
BACON/ord-server/example-split.yaml (1)
8-11: Formatting-only change: trailing newline added at EOF.This adds a trailing newline to the YAML file, which is a standard formatting convention. The configuration structure and values remain unchanged.
website/documents/BltTrademarksSearch.md (2)
35-39: Formatting-only change: bullet point reformatted.This reformats the "Efficient Data Retrieval" bullet in the Performance section. The documentation content and structure remain unchanged.
1-39:⚠️ Scope discrepancy: PR objectives vs. provided files.The PR objectives describe card hover effects (floating animation, orange background, white text/icons transitions), but the provided files only contain documentation formatting changes (trailing newlines, list marker standardization).
The AI summary mentions functional changes to
home.html(group-based hover styling) andProcfile(Gunicorn process), but these files are not included in the review.Please confirm whether:
- The provided three files represent the complete set of changes for this PR
- The
home.htmlandProcfilechanges (mentioned in the AI summary) are separate or part of this review scope- The card hover effect changes described in the PR objectives are implemented in files beyond those provided
docs/features.md (1)
180-180: Formatting normalization only—no functional impact.Trailing newline addition ensures consistent file formatting across the repository.
issues/ValueError_staking_pool.md (1)
3-3: Formatting consistency only.Trailing newline addition; no content changes.
website/documents/BltChangePassword.md (1)
44-44: Trailing newline addition for formatting consistency.No content changes.
website/static/organization/js/hunt_controller.js (1)
630-630: Trailing newline addition looks good.This ensures the file ends with a proper newline, which is a standard formatting convention.
Note: The pipeline is reporting failures for
console.errorstatements throughout this file (lines 23, 42, 107, 239, 260, 289, 307, 401, 512, 559, 582), but these are on pre-existing unchanged lines. Consider addressing them in a follow-up PR if the project policy requires removing console statements.website/documents/BltSignUpPage.md (1)
44-44: LGTM!Formatting-only change ensuring proper trailing newline at end of file.
.lgtm.yml (1)
29-29: LGTM!Trailing newline addition for proper file formatting. No changes to the LGTM configuration logic.
.github/workflows/add-files-changed-label.yml (1)
130-130: LGTM!Trailing newline addition ensures proper file formatting. No changes to the workflow logic.
website/documents/BltCompanyScoreboard.md (1)
45-45: LGTM!List marker formatting normalized for consistency. Content remains unchanged.
website/documents/BltUserProfile.md (1)
35-35: LGTM!Trailing newline addition for proper file formatting.
website/documents/BltGlobalLeaderboard.md (1)
43-43: LGTM!Trailing newline addition for proper file formatting.
website/static/js/messages.js (1)
111-111: Trailing newline formatting change..github/codeql-config.yml (1)
43-43: Trailing newline formatting change.BACON/regtest/bitcoin.conf (1)
13-13: Trailing newline formatting change.BACON/bacon-etch.yaml (1)
12-12: LGTM! Standard formatting improvement.Adding a trailing newline is a standard formatting practice and has no functional impact.
Procfile (1)
3-3: AI summary is inconsistent with the code.The AI summary states that the Gunicorn web process was "enabled by uncommenting," but the line remains commented out in the actual code. The line is still prefixed with
#, so Gunicorn will not be activated.website/documents/BltDetailsFromOwasp.md (1)
432-432: LGTM! List marker formatting fix.The removal of the erroneous dash corrects the list marker formatting in the Corporate Supporters section.
website/documents/BltCompanyListingPage.md (1)
42-42: LGTM! Formatting adjustment.This is a non-functional formatting change with no impact on content or behavior.
website/static/css/checkInModal.css (1)
147-147: LGTM! CSS formatting improvement.Moving the closing brace to its own line and adding a trailing newline follows standard CSS formatting conventions.
website/documents/BltCompanyDashboard.md (1)
45-45: Formatting consistency applied.List marker standardized to single dash for consistency with markdown conventions.
website/documents/BltStartaBughunt.md (1)
46-46: Formatting consistency applied.List marker standardized to single dash, aligning with documentation formatting standards.
website/documents/BltWeeklyActivityOfContributor.md (1)
44-44: Formatting consistency applied.List marker standardized to single dash, maintaining documentation formatting alignment.
website/templates/home.html (2)
1038-1078: Consistent hover implementation.The hover effects are implemented consistently across all cards in this section, matching the pattern established in the "Tools for Organizations" section. Same accessibility considerations apply regarding text contrast on the orange hover background.
1088-1137: Consistent implementation across Projects section.The hover effects continue to follow the same pattern established in previous sections. The group-based hover approach with coordinated color transitions works well for user feedback.
| font-size: 1.1rem; | ||
| transform: translate(0, 0); | ||
| } | ||
| } |
There was a problem hiding this comment.
Critical: Remove the extra closing brace causing CSS syntax error.
This line adds an unmatched closing brace } at the end of the file, which will cause a CSS parsing error. The previous rule (.fa-angle-right on lines 7597-7606) already has its closing brace on line 7606. This extra brace breaks the CSS syntax and will prevent the stylesheet from loading correctly.
Additionally, this change is inconsistent with the PR objectives which describe updates to card hover effects, floating animations, and background color changes. The file appears to contain no such changes—only this erroneous closing brace.
🔎 Proposed fix
-}Remove the extra closing brace entirely.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| } |
🤖 Prompt for AI Agents
In website/static/css/app.min.css around line 7607, there is an unmatched extra
closing brace "}" that creates a CSS syntax error; remove this lone trailing "}"
so the file ends with the proper closing brace for the previous rule and the
stylesheet can parse correctly.
website/templates/home.html
Outdated
| <a href="{% url 'organizations' %}" | ||
| class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 hover:bg-[#e74c3c] hover:-translate-y-2 hover:shadow-xl"> | ||
| <i class="fas fa-building text-3xl text-[#e74c3c] mb-3 transition-colors duration-300 group-hover:text-white"></i> | ||
| <span class="text-lg font-medium text-center transition-colors duration-300 group-hover:text-white"> | ||
| Organizations | ||
| </span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white"> | ||
| Browse and manage organizations | ||
| </p> | ||
| </a> | ||
|
|
||
| <!-- Add Organization --> | ||
| <a href="{% url 'register_organization' %}" | ||
| class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> | ||
| <i class="fas fa-plus text-3xl text-[#e74c3c] mb-3"></i> | ||
| <span class="text-lg font-medium text-center">Register Organization</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1">Add your company to our platform</p> | ||
| </a> | ||
| class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 | ||
| hover:bg-[#e74c3c] hover:-translate-y-2 hover:shadow-xl"> | ||
| <i class="fas fa-plus text-3xl text-[#e74c3c] mb-3 transition-colors duration-300 group-hover:text-white"></i> | ||
| <span class="text-lg font-medium text-center transition-colors duration-300 group-hover:text-white">Register Organization</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white"> | ||
| Add your company to our platform | ||
| </p> | ||
| </a> | ||
|
|
||
| <!-- Domains --> | ||
| <a href="{% url 'domains' %}" | ||
| class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> | ||
| <i class="fas fa-globe text-3xl text-[#e74c3c] mb-3"></i> | ||
| <span class="text-lg font-medium text-center">Domains</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1">Manage website domains and assets</p> | ||
| <a href="{% url 'domains' %}" class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 hover:bg-[#e74c3c] hover:-translate-y-2 hover:shadow-xl"> | ||
| <i class="fas fa-globe text-3xl text-[#e74c3c] mb-3 transition-colors duration-300 group-hover:text-white"></i> | ||
| <span class="text-lg font-medium text-center transition-colors duration-300 group-hover:text-white">Domains</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white"> | ||
| View associated domains | ||
| </p> | ||
| </a> | ||
| <!-- Bugs --> | ||
| <a href="{% url 'issues' %}" | ||
| class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> | ||
| <i class="fas fa-bug text-3xl text-[#e74c3c] mb-3"></i> | ||
| <span class="text-lg font-medium text-center">Bugs</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1">View and track reported vulnerabilities</p> | ||
| <a href="{% url 'issues' %}" class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 hover:bg-[#e74c3c] hover:-translate-y-2 hover:shadow-xl"> | ||
| <i class="fas fa-bug text-3xl text-[#e74c3c] mb-3 transition-colors duration-300 group-hover:text-white"></i> | ||
| <span class="text-lg font-medium text-center transition-colors duration-300 group-hover:text-white">Bugs</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white"> | ||
| Reported security bugs | ||
| </p> | ||
| </a> | ||
|
|
||
| <!-- Issues --> | ||
| <a href="{% url 'github_issues' %}" | ||
| class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> | ||
| <i class="fas fa-exclamation-circle text-3xl text-[#e74c3c] mb-3"></i> | ||
| <span class="text-lg font-medium text-center">Issues</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1">Track GitHub issues and tasks</p> | ||
| </a> | ||
| <a href="{% url 'github_issues' %}" class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 hover:bg-[#e74c3c] hover:-translate-y-2 hover:shadow-xl"> | ||
| <i class="fas fa-exclamation-circle text-3xl text-[#e74c3c] mb-3 transition-colors duration-300 group-hover:text-white"></i> | ||
| <span class="text-lg font-medium text-center transition-colors duration-300 group-hover:text-white">Issues</span> | ||
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white"> | ||
| View and manage issues | ||
| </p> | ||
| </a> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
WCAG 2.1 contrast ratio requirements normal text large text
💡 Result:
WCAG 2.1 (SC 1.4.3) requires:
- Normal (regular) text: contrast ratio ≥ 4.5:1. [1]
- Large-scale text: contrast ratio ≥ 3:1. "Large" = at least 18 pt (≈24 px) or 14 pt (≈18.5 px) if bold. [1][2]
Sources: W3C Understanding SC 1.4.3. [1]; summary guidance (examples/px equivalents). [2]
🌐 Web query:
contrast ratio calculator white #FFFFFF on #e74c3c
💡 Result:
Contrast ratio (white #FFFFFF on #e74c3c): 3.82:1
- Relative luminance of #e74c3c ≈ 0.225; white = 1.0. Calculation uses WCAG sRGB → linear conversion and L = 0.2126R + 0.7152G + 0.0722B, then (L1+0.05)/(L2+0.05). [1][2]
WCAG pass/fail:
- Fails AA for normal text (needs ≥ 4.5:1).
- Passes AA for large text (≥ 3:1).
- Fails AAA (needs ≥ 7:1). [1]
Sources: WCAG contrast definition and thresholds; WCAG sRGB/relative-luminance formula. [1][2]
Address color contrast for accessibility compliance on hover text.
The hover effect changes text to white on #e74c3c. The contrast ratio is 3.82:1, which passes WCAG AA for large text (≥3:1) but fails for normal/small text (requires ≥4.5:1).
The card descriptions use text-xs (12px), which falls below the "large text" threshold and does not meet WCAG AA standards at this contrast ratio. The card titles use text-lg (18px) and will pass. Either increase the description font size to 14pt+ or adjust the hover background color to achieve 4.5:1 contrast with white text.
github-project-automation
bot
moved this from Backlog
to Ready
in 📌 OWASP BLT Project Board
|
@Preetam-77 Thanks for the update! |
|
Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain🏁 Script executed: Length of output: 22673 @Shhazzz, I've identified the blocking issue that needs to be addressed: Critical Issue (Blocking CI)
Two options to fix: Option 1: Remove the console statement } catch (error) {
// console.error('Error fetching issues:', error); removed
if (!append) {
hideSuggestionBox();
} else {Option 2: Comment it out } catch (error) {
// console.error('Error fetching issues:', error);
if (!append) {
hideSuggestionBox();
} else {Optional Improvements (Nitpicks)I also provided 3 minor suggestions:
These are optional and won't block the PR. @Preetam-77, once you fix the |
github-actions
bot
added
last-active: 0d
S3DFX-CYBER
left a comment
S3DFX-CYBER
left a comment
There was a problem hiding this comment.
Hi @Preetam-77 , thanks for the UI enhancements! The hover effects look great in the description. However, there are a few technical blockers before this can be approved:
1.Tailwind Config: Sentry noticed website/templates/ isn't in your Tailwind content path. The new hover classes might not generate correctly in production.
2.Console Errors: The CI checks are failing because of console.error statements in your JS files. These need to be removed or commented out.
Conflicts: There are merge conflicts that need to be resolved before we can run the final tests.
Once the CI checks turn green and the console statements are removed, I'd be happy to take another look!
Thanks !!!
github-actions
bot
added
changes-requested
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI Agents
In @website/templates/home.html:
- Around line 993-995: The card description paragraph uses the classes "text-xs
... group-hover:text-white" which on hover over the current red background
(#e74c3c) fails WCAG contrast; fix by either (A) increasing the description
font-size class (e.g., replace "text-xs" / "text-sm" with a class that yields at
least 24px/large text) or (B) darkening the hover background by replacing the
hover color that uses #e74c3c (e.g., change hover:bg-[#e74c3c] to
hover:bg-[#c0392b]) so white text meets 4.5:1; apply the same change to all
other description <p> elements with the "group-hover:text-white" pattern
mentioned in the comment.
🧹 Nitpick comments (1)
website/static/js/issue.js (1)
387-392: Console error removal fixes the CI blocker.The removal of the
console.errorstatement correctly addresses the GitHub Actions linter failure mentioned in the PR objectives. The error handling logic appropriately cleans up the UI state (hiding the suggestion box or removing the loading indicator).As an optional enhancement, consider providing subtle user feedback when the API fails (e.g., a brief inline message or retry button), which could improve the debugging experience and user awareness. However, since this is an autocomplete enhancement feature rather than critical functionality, the current silent handling is acceptable.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (2)
website/static/js/issue.jswebsite/templates/home.html
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Run Tests
- GitHub Check: docker-test
🔇 Additional comments (1)
website/templates/home.html (1)
988-1194: Consistent hover effect implementation across all action cards.The unified group-based hover approach is well-implemented and maintains consistency across all 21 action cards. The pattern using
group,hover:bg-[#e74c3c],hover:-translate-y-2,hover:shadow-xl, andgroup-hover:text-whiteprovides smooth synchronized color transitions for icons, titles, and descriptions on hover.
| <p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white"> | ||
| Browse and manage organizations | ||
| </p> |
There was a problem hiding this comment.
Address color contrast accessibility issue for card description text on hover.
The card descriptions transition to white text on the #e74c3c hover background. With a contrast ratio of 3.82:1, the text-xs (12px) and text-sm (14px) description text fails WCAG AA requirements for normal text (4.5:1 minimum). Either increase the description font size to at least 24px for large text threshold, or adjust the hover background to a darker shade that achieves 4.5:1 contrast with white.
🔎 Suggested approaches
Option 1: Use larger description text
-<p class="text-xs text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white">
+<p class="text-lg font-semibold text-gray-600 dark:text-gray-400 text-center mt-1 transition-colors duration-300 group-hover:text-white">Option 2: Use a darker red for hover background
Replace hover:bg-[#e74c3c] with hover:bg-[#c0392b] (darker red that provides better contrast).
-class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 hover:bg-[#e74c3c] hover:-translate-y-2 hover:shadow-xl">
+class="group bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 flex flex-col items-center transition-all duration-300 hover:bg-[#c0392b] hover:-translate-y-2 hover:shadow-xl">Also applies to: 1002-1004, 1011-1013, 1020-1022, 1029-1031, 1041-1043, 1050-1052, 1059-1061, 1068-1070, 1077-1079, 1094-1096, 1103-1105, 1112-1114, 1121-1123, 1130-1132, 1147-1149, 1156-1158, 1165-1167, 1174-1176, 1183-1185, 1192-1194
🤖 Prompt for AI Agents
In @website/templates/home.html around lines 993 - 995, The card description
paragraph uses the classes "text-xs ... group-hover:text-white" which on hover
over the current red background (#e74c3c) fails WCAG contrast; fix by either (A)
increasing the description font-size class (e.g., replace "text-xs" / "text-sm"
with a class that yields at least 24px/large text) or (B) darkening the hover
background by replacing the hover color that uses #e74c3c (e.g., change
hover:bg-[#e74c3c] to hover:bg-[#c0392b]) so white text meets 4.5:1; apply the
same change to all other description <p> elements with the
"group-hover:text-white" pattern mentioned in the comment.
3 participants
PR Description
Summary:
This PR updates the hover effects for the following sections:
Tools for Organizations
Tools for Projects
Tools for Users & Teams
Changes:
Added floating animation to all cards on hover.
Changed background color on hover from orange to white (or vice versa).
Updated icon, title, and description text colors to transition to white on hover.
Adjusted CSS and HTML for smoother transitions and consistency.
Minor updates to JS/SVG files associated with frontend animations.
Before & After:
before :
after:
Additional Notes:
All changes are frontend only, no backend modifications.
Pre-commit and GitHub Actions checks were followed; Windows django-collectstatic hook was skipped locally.
Summary by CodeRabbit
New Features
Chores
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.