Feature/UI ux update #2731
Feature/UI ux update #2731
Conversation
WalkthroughThis pull request rebrands and restructures the documentation site. The Docusaurus configuration is updated with a new tagline, favicon, navbar, and footer. Several homepage elements are removed (including the HomepageFeatures component and related styles) and replaced with new components (HeaderHero, ActionButton, HomeCallToAction) in the index page. Moreover, CSS files have been overhauled to update variables and support dark mode along with responsive design, and an unused markdown page has been removed. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant I as Homepage (Index)
participant H as HeaderHero
participant CTA as HomeCallToAction
participant AB as ActionButton
U->>I: Request homepage
I->>H: Render HeaderHero component
H->>CTA: Display call-to-action section
CTA->>AB: Render ActionButton for Docs & GitHub
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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
Documentation and Community
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
Other🎯 Please be considerate of our volunteers' time. Contacting the person who assigned the reviewers is not advised unless they ask for your input. Do not @ the person who did the assignment otherwise. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Congratulations on making your first PR! 🎊 If you haven't already, check out our Contributing Guidelines and PR Reporting Guidelines to ensure that you are following our guidelines for contributing and creating PR.
![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 (5)
docs/src/utils/HomeCallToAction.tsx (1)
1-30: Consider using environment variables for URLs.The implementation is clean and follows best practices. However, consider moving the GitHub URL to an environment variable or configuration file for easier maintenance.
Example configuration:
// config.ts export const GITHUB_URL = 'https://github.com/PalisadoesFoundation/talawa'; // HomeCallToAction.tsx import { GITHUB_URL } from '../config';docs/src/utils/ActionButton.tsx (2)
21-31: Consider adding rel="noreferrer" for all external links.While the current implementation correctly handles
relfortarget="_blank", consider addingnoreferrerfor all external links (URLs starting with http/https) regardless of target.- rel={target === '_blank' ? 'noopener noreferrer' : undefined} + rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
3-10: Consider using const assertion for button types.To make the type system more strict and prevent typos, consider using a const assertion for button types.
const BUTTON_TYPES = ['primary', 'secondary'] as const; type ButtonType = typeof BUTTON_TYPES[number]; interface ActionButtonProps { href: string; type?: ButtonType; // ... rest of the props }docs/src/css/index.css (1)
7-67: LGTM! The CSS variables and dark mode support are well-structured.The changes effectively support the UI/UX update:
- Comprehensive set of variables for markdown styling
- Well-structured dark mode support
- Color scheme aligns with Talawa documentation
Consider adding CSS comments to document the purpose of each color variable group for better maintainability.
Add documentation comments for color variable groups:
:root { + /* Markdown heading colors */ --h1-markdown: #021526; --h2-markdown: #3a6d8c; --h3-markdown: #474e93; --h4-markdown: #508c9b; --h5-markdown: #6a9ab0; --h6-markdown: #888888; --hx-markdown-underline: #eeeeee; + /* Primary theme colors */ --ifm-color-primary: #1e56e3; --ifm-color-primary-light: #33925d; --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; + /* Gray scale colors */ --ifm-color-gray-100: #e3e3e6; /* ... other gray colors ... */Also applies to: 71-116
docs/src/css/custom.css (1)
464-725: Optimize media queries by consolidating duplicate breakpoints.The responsive design is well-implemented, but there are duplicate media query breakpoints that could be consolidated for better maintainability:
@media (max-width: 768px)appears twice (lines 464-468 and 651-664)@media (min-width: 997px) and (max-width: 1327px)appears twice (lines 470-475 and 691-696)Consolidate the duplicate media queries:
-@media (max-width: 768px) { - .container > div > div:first-child { - padding: 1rem !important; - } -} /* Small to Medium Screens */ @media only screen and (max-width: 768px) { + .container > div > div:first-child { + padding: 1rem !important; + } .center { text-align: center; } .HeaderHero .title { font-size: 60px; } .HeaderHero .tagline { font-size: 30px; } } -@media (min-width: 997px) and (max-width: 1327px) { - .container > div > div:first-child { - padding-left: 4rem !important; - padding-right: 4rem !important; - } -} /* Medium to Large Screens */ @media (min-width: 997px) and (max-width: 1327px) { + .container > div > div:first-child { + padding-left: 4rem !important; + padding-right: 4rem !important; + } }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
docs/static/img/icons/logo.pngis excluded by!**/*.pngdocs/static/img/logo.svgis excluded by!**/*.svg
📒 Files selected for processing (11)
docs/docusaurus.config.ts(2 hunks)docs/src/components/HomepageFeatures/index.tsx(0 hunks)docs/src/components/HomepageFeatures/styles.module.css(0 hunks)docs/src/components/layout/HeaderHero.tsx(1 hunks)docs/src/css/custom.css(12 hunks)docs/src/css/index.css(1 hunks)docs/src/pages/index.module.css(0 hunks)docs/src/pages/index.tsx(1 hunks)docs/src/pages/markdown-page.md(0 hunks)docs/src/utils/ActionButton.tsx(1 hunks)docs/src/utils/HomeCallToAction.tsx(1 hunks)
💤 Files with no reviewable changes (4)
- docs/src/pages/markdown-page.md
- docs/src/components/HomepageFeatures/styles.module.css
- docs/src/pages/index.module.css
- docs/src/components/HomepageFeatures/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Checking codebase
🔇 Additional comments (4)
docs/src/pages/index.tsx (1)
1-24: LGTM! Clean implementation with good SEO practices.The new Index component is well-structured with proper meta tags for social sharing and SEO. The code follows React best practices with clear separation of concerns.
docs/src/components/layout/HeaderHero.tsx (1)
1-24: Great job on accessibility implementation!The HeaderHero component demonstrates excellent use of semantic HTML and ARIA attributes:
- Uses semantic
sectionwithrole="banner"- Proper heading hierarchy (h1, h2)
- ARIA relationships with
aria-describedby- Navigation role with descriptive
aria-labeldocs/docusaurus.config.ts (1)
9-10: LGTM! The configuration changes align with the PR objectives.The changes effectively enhance the documentation site's branding and navigation:
- Updated tagline and favicon for better branding
- Streamlined navbar with improved navigation links
- Enhanced footer with comprehensive community and social media links
Also applies to: 60-66, 67-109, 112-167
docs/src/css/custom.css (1)
536-616: LGTM! The HeaderHero and ActionButton styles are well-designed.The new styles effectively support the homepage redesign:
- HeaderHero component has appropriate spacing and typography
- ActionButton styles provide clear visual hierarchy
- Hover states enhance interactivity
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #2731 +/- ##
=================================================
Coverage 96.37% 96.37%
=================================================
Files 189 189
Lines 10020 10020
=================================================
Hits 9657 9657
Misses 363 363 ☔ View full report in Codecov by Sentry. |
palisadoes
merged commit a5e2559
into
PalisadoesFoundation:develop-postgres
What kind of change does this PR introduce?
Fixed styling to match that of Talawa docs website. Added homepage.
Issue Number:
Fixes part of #2678
Did you add tests for your changes?
Visual testing was done. Tests are not required for docs folder
Snapshots/Videos:
Talawa.mp4
If relevant, did you update the documentation?
Not relevant
Summary
This PR fixes the navbar and styling of Talawa mobile docs website (https://docs-mobile.talawa.io/). Also added a minimal homepage similar to the other docs websites.
Does this PR introduce a breaking change?
No.
Checklist for Repository Standards
coderaabbitaireview suggestions?Other information
Have you read the contributing guide?
Yes
Summary by CodeRabbit
New Features
Style