Unify main page look #1227
Unify main page look #1227
Conversation
Summary by CodeRabbit
WalkthroughThis pull request introduces a new mock for the Changes
Assessment against linked issues
Possibly related PRs
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (14)
✅ Files skipped from review due to trivial changes (12)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
🔇 Additional comments (1)
✨ Finishing Touches
🪧 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
Documentation and Community
|
![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
🧹 Nitpick comments (1)
frontend/src/components/SecondaryCard.tsx (1)
17-22: Icon successfully integrated with title display.The component now displays the icon alongside the title using a flex container with proper spacing. The implementation maintains the original functionality while adding the new feature, which is a good practice.
However, consider adding a conditional check to only render the FontAwesomeIcon when an icon is provided:
- <h2 className="mb-4 flex flex-row items-center gap-2 text-2xl font-semibold"> - <FontAwesomeIcon icon={icon} className="h-5 w-5" /> - {title} - </h2> + <h2 className="mb-4 flex flex-row items-center gap-2 text-2xl font-semibold"> + {icon && <FontAwesomeIcon icon={icon} className="h-5 w-5" />} + {title} + </h2>This would prevent potential errors if the icon prop is undefined.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
frontend/__tests__/unit/pages/ChapterDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/CommitteeDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/ProjectDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/RepositoryDetails.test.tsx(1 hunks)frontend/__tests__/unit/pages/UserDetails.test.tsx(1 hunks)frontend/src/components/ItemCardList.tsx(5 hunks)frontend/src/components/SecondaryCard.tsx(1 hunks)frontend/src/components/TopContributors.tsx(4 hunks)frontend/src/pages/Home.tsx(15 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
frontend/src/components/ItemCardList.tsx (3)
frontend/src/types/project.ts (2)
ProjectReleaseType(85-97)ProjectIssuesType(9-15)frontend/src/types/home.ts (1)
PullRequestsType(50-59)frontend/src/types/user.ts (1)
PullRequestsType(82-86)
frontend/src/pages/Home.tsx (2)
frontend/src/types/event.ts (1)
EventType(1-10)frontend/src/components/TruncatedText.tsx (1)
TruncatedText(3-37)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Run backend tests
- GitHub Check: Run frontend e2e tests
- GitHub Check: Run frontend unit tests
- GitHub Check: CodeQL (javascript-typescript)
🔇 Additional comments (29)
frontend/__tests__/unit/pages/UserDetails.test.tsx (1)
22-24: LGTM: Mock for FontAwesomeIcon component added correctly.The mock implementation returns a span with a data-testid, which allows for proper testing isolation. This is a good practice for mocking UI components in tests.
frontend/src/components/ItemCardList.tsx (3)
1-1: Icon prop properly added to enhance visual consistency.The IconProp type is correctly imported and the optional icon prop is properly added to the component interface. This aligns well with the PR objective of adding icons to section headers.
Also applies to: 11-11, 17-17
31-31: Icon successfully passed to SecondaryCard component.The icon prop is correctly forwarded to the SecondaryCard component, enabling the display of icons in section headers as intended in the PR objectives.
40-40: Link color standardized to improve visual coherence.The text color classes have been updated from (likely)
text-blue-500totext-blue-400for both avatar and title links. This change aligns with the PR objective of standardizing all links to have the same color.Also applies to: 51-51
frontend/__tests__/unit/pages/CommitteeDetails.test.tsx (1)
12-14: LGTM: Mock for FontAwesomeIcon correctly implemented.The mock implementation is consistent with other test files, returning a span with a data-testid attribute. This ensures proper isolation in tests involving components that use FontAwesome icons.
frontend/src/components/SecondaryCard.tsx (2)
1-2: LGTM: Required FontAwesome imports added.The necessary imports from FontAwesome libraries are correctly added to support icon functionality.
7-7: Icon prop properly added to SecondaryCard component.The optional icon prop with the correct IconProp type is added to the component props interface, allowing for icons to be passed to the component.
Also applies to: 12-12
frontend/__tests__/unit/pages/RepositoryDetails.test.tsx (1)
20-22: Good addition of FontAwesomeIcon mock for testingThis mock effectively isolates the component under test from external dependencies, making the tests more reliable and focused.
frontend/src/components/TopContributors.tsx (2)
2-2: Well-implemented icon integration for the headerThe addition of the optional icon prop and its implementation in the header aligns well with the PR objective of adding icons to section headers.
Also applies to: 16-16, 23-23, 39-42
53-53: Color adjustments improve visual consistencyThe color changes from text-blue-500 to text-blue-400 for links and from dark:text-gray-300 to dark:text-gray-400 for dark mode text align with the PR objectives of standardizing link colors and improving text readability.
Also applies to: 58-58
frontend/__tests__/unit/pages/ChapterDetails.test.tsx (1)
12-14: Good addition of FontAwesomeIcon mock for testingThis mock implementation is consistent with other test files and follows good testing practices for isolating components from external dependencies.
frontend/__tests__/unit/pages/ProjectDetails.test.tsx (1)
20-22: Good addition of FontAwesomeIcon mock for testingThe mock implementation matches those in other test files, showing a consistent approach to testing components that use FontAwesome icons.
frontend/src/pages/Home.tsx (17)
12-16: New FontAwesome icons added for UI consistencyThese additional icon imports support the PR objective of adding icons to section headers, which helps unify the visual appearance of the main page.
147-147: Icon added to Upcoming Events sectionAdding the calendar icon to the section header improves visual consistency across the page.
153-153: Link color standardized to text-blue-400This change aligns with the PR objective to standardize all link colors on the main page.
158-158: Text darkness increased for better readabilityChanging from
dark:text-gray-300todark:text-gray-400improves readability in dark mode, as specified in the PR objectives.
185-185: Map marker icon added to New Chapters sectionAdding the location icon to the section header creates visual consistency with the other sections.
190-190: Consistent styling applied to New Chapters sectionLink color and text darkness have been standardized to match other sections of the page.
Also applies to: 194-194, 205-205
214-214: Folder icon added to New Projects sectionAdding the folder icon to the section header maintains the visual theme established throughout the page.
218-218: Consistent styling applied to New Projects sectionLink color and text darkness have been standardized to match other sections of the page.
Also applies to: 223-223, 237-237
248-251: Globe icon added to OWASP Chapters Worldwide headingThis change effectively implements the PR objective to add icons to section headers, specifically using a globe icon for the worldwide chapters section.
264-269: Icon added to TopContributors componentAdding the users icon to the TopContributors component maintains visual consistency with other sections.
274-274: Warning icon added to Recent Issues sectionThe triangle exclamation icon visually represents issues, improving the UI's semantic clarity.
291-291: Pull request icon added to Recent Pull Requests sectionThe code pull request icon clearly represents the section's content, enhancing visual communication.
306-306: Tag icon added to Recent Releases sectionThe tag icon appropriately represents releases, maintaining the visual theme established throughout the page.
317-317: Link colors standardized in Recent Releases sectionLink colors have been updated to maintain consistency with other links on the page.
Also applies to: 329-329
353-357: Newspaper icon added to Recent News & Opinions sectionThe icon choice is semantically appropriate for news content, and the styling matches other section headers.
367-367: Consistent styling applied to Recent News & Opinions sectionLink color and text darkness have been standardized to match other sections of the page.
Also applies to: 374-374
394-394: Dark mode text color standardized in remaining sectionsThe final sections have been updated with consistent dark mode text styling, completing the visual unification of the page.
Also applies to: 402-402
arkid15r
left a comment
arkid15r
left a comment
There was a problem hiding this comment.
The main page looks awesome, thanks for the update @Dishant1804
However, the issue is about making the look unified for the entire site (not main page only). Please take a look at other blue color differences at projects/chapters/users pages, e.g.
sure will do it for every page :) |
kasya
left a comment
kasya
left a comment
There was a problem hiding this comment.
My only concern here is that originally we were using sky shade for any links and not blue - sky is a bit muted compared to blue. It's got messed up at some point, so we'd need to pick which one we want to keep.
You are correct @kasya we are using sky colour in the project details card and we dont have any card background in them, but the main page has gray backgrounds in the small cards within each section, I used sky colour and it was not going well with those gray backgrounds, Let me know which colour to apply I have tried both colours and blue goes well for main page we can modify it to sky colour as well :) |
We can try the blue shade of course 👍🏼 Just want to make sure it's consistent throughout all pages. |
Sure I'll modify the other pages to blue |
|
* main page with unified components * modified icon of chapter worldwide * test modified * unified blue color for all links --------- Co-authored-by: Arkadii Yakovets <[email protected]>
3 participants
Resolves #1204
2025-03-31.07-52-51.mp4