Feature/ux improvements #3091
Feature/ux improvements #3091
Conversation
…n pages in customs.css
|
Warning Rate limit exceeded@Abhi-MS has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 14 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughThis pull request involves a comprehensive restructuring of the Talawa documentation website, specifically the Docusaurus configuration and frontend components. The changes primarily focus on simplifying the homepage, removing multiple panel components, updating navigation and styling, and aligning the documentation site with a more minimal design approach. The modifications affect the site's structure, styling, and content presentation. Changes
Assessment against linked issues
Suggested Labels
Suggested Reviewers
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:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #3091 +/- ##
=================================================
Coverage 39.85% 39.85%
=================================================
Files 453 453
Lines 33203 33203
Branches 385 385
=================================================
Hits 13234 13234
Misses 19969 19969 ☔ View full report in Codecov by Sentry. |
![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
🔭 Outside diff range comments (4)
docs/src/css/index.css (1)
Line range hint
98-134: Add focus states for better accessibility.The ActionButton styles lack focus states, which is important for keyboard navigation and accessibility.
Add focus states to the buttons:
.ActionButton { padding: 0.75rem 1.25rem; text-align: center; font-size: 1.2rem; font-weight: var(--ifm-button-font-weight); text-decoration: none !important; border-bottom: none; transition: all 0.2s ease-out; border-radius: 0.375rem; margin-right: 10px; + outline: none; } +.ActionButton:focus-visible { + outline: 2px solid var(--ifm-color-primary); + outline-offset: 2px; +}docs/src/css/custom.css (3)
Line range hint
658-763: Optimize and consolidate media queries.The current media query structure has several issues:
- Overlapping breakpoints (996px-1000px)
- Duplicate styles across breakpoints
- Complex nested queries that could be simplified
Consider consolidating the breakpoints:
- /* Small Screen */ - @media (max-width: 768px) { ... } - - /* Medium Screens */ - @media (max-width: 996px) { ... } - - /* Small to Medium Screens */ - @media (max-width: 1000px) { ... } - - /* Large to Medium Screens */ - @media (max-width: 1049px) and (min-width: 1001px) { ... } - - /* Medium to Large Screens */ - @media (max-width: 1149px) and (min-width: 1050px) { ... } + /* Mobile */ + @media (max-width: 768px) { ... } + + /* Tablet */ + @media (min-width: 769px) and (max-width: 1024px) { ... } + + /* Desktop */ + @media (min-width: 1025px) { ... }
Line range hint
599-613: Optimize button styles for better performance and maintainability.
- The 0.8s transition duration might feel sluggish
- Hardcoded color values reduce maintainability
Consider these improvements:
.markdown > button { - background: linear-gradient(90deg, #ff3600 0%, #ff8100 100%); + background: linear-gradient(90deg, var(--button-gradient-start) 0%, var(--button-gradient-end) 100%); border: none; border-radius: 5px; padding: 16.8px 32px; color: #fff; font-weight: bold; cursor: pointer; - transition: 0.8s; + transition: 0.3s ease-out; font-size: 16px; } .markdown > button:hover { - background: linear-gradient(90deg, #ff3600 30%, #ff8100 78%); + background: linear-gradient(90deg, var(--button-gradient-start) 30%, var(--button-gradient-end) 78%); }
Link color fails WCAG 2.1 Level AA contrast requirements
The link color
#1e56e3has insufficient contrast (2.93:1) against the background#111927, falling below both the normal text (4.5:1) and large text (3:1) requirements. Consider using a lighter shade of blue to improve accessibility.🔗 Analysis chain
Line range hint
73-102: Verify color contrast ratios for dark theme.Please ensure all color combinations meet WCAG 2.1 Level AA standards for contrast ratios (minimum 4.5:1 for normal text and 3:1 for large text).
Run this script to analyze color contrast ratios:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Install and use color-contrast-checker npm install -g color-contrast-checker python3 - << 'EOF' import json import subprocess # Extract colors from CSS colors = { 'background': '#111927', 'text': '#c6d6ff', 'link': '#1e56e3', 'menu': '#9da4ae' } def check_contrast(fg, bg): cmd = f'color-contrast-checker "{fg}" "{bg}"' result = subprocess.run(cmd, shell=True, capture_output=True, text=True) return result.stdout for fg_name, fg_color in colors.items(): if fg_name != 'background': result = check_contrast(fg_color, colors['background']) print(f"Contrast check for {fg_name}: {result}") EOFLength of output: 1811
Script:
#!/bin/bash python3 - << 'EOF' def hex_to_rgb(hex_color): hex_color = hex_color.lstrip('#') return tuple(int(hex_color[i:i+2], 16) / 255.0 for i in (0, 2, 4)) def get_luminance(r, g, b): r = r / 12.92 if r <= 0.03928 else ((r + 0.055) / 1.055) ** 2.4 g = g / 12.92 if g <= 0.03928 else ((g + 0.055) / 1.055) ** 2.4 b = b / 12.92 if b <= 0.03928 else ((b + 0.055) / 1.055) ** 2.4 return 0.2126 * r + 0.7152 * g + 0.0722 * b def contrast_ratio(color1, color2): l1 = get_luminance(*hex_to_rgb(color1)) l2 = get_luminance(*hex_to_rgb(color2)) lighter = max(l1, l2) darker = min(l1, l2) return (lighter + 0.05) / (darker + 0.05) bg = '#111927' colors = { 'text': '#c6d6ff', 'link': '#1e56e3', 'menu': '#9da4ae' } print("WCAG 2.1 Contrast Ratio Requirements:") print("- Normal text (Level AA): 4.5:1") print("- Large text (Level AA): 3:1\n") for name, color in colors.items(): ratio = contrast_ratio(color, bg) print(f"{name.title()} ({color}) on Background ({bg}):") print(f"Contrast ratio: {ratio:.2f}:1") print(f"Meets AA for normal text: {'Yes' if ratio >= 4.5 else 'No'}") print(f"Meets AA for large text: {'Yes' if ratio >= 3 else 'No'}\n") EOFLength of output: 479
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (26)
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/animations/_dissectionAnimation.js(0 hunks)docs/src/components/animations/_headerAnimation.js(0 hunks)docs/src/components/layout/EightPanel.tsx(0 hunks)docs/src/components/layout/FifthPanel.tsx(0 hunks)docs/src/components/layout/FourthPanel.tsx(0 hunks)docs/src/components/layout/HeaderHero.tsx(1 hunks)docs/src/components/layout/SecondPanel.tsx(0 hunks)docs/src/components/layout/SeventhPanel.tsx(0 hunks)docs/src/components/layout/SixthPanel.tsx(0 hunks)docs/src/components/layout/ThirdPanel.tsx(0 hunks)docs/src/css/custom.css(10 hunks)docs/src/css/index.css(7 hunks)docs/src/hooks/useHomePageAnimations.ts(0 hunks)docs/src/pages/index.tsx(1 hunks)docs/src/pages/markdown-page.md(0 hunks)docs/src/utils/AppFeaturesCard.tsx(0 hunks)docs/src/utils/HomeCallToAction.tsx(1 hunks)docs/src/utils/ManagementFeaturesCard.tsx(0 hunks)docs/src/utils/OrganizationFeatureCard.tsx(0 hunks)docs/src/utils/ParticipationFeatureCard.tsx(0 hunks)docs/src/utils/TextColumn.tsx(0 hunks)docs/src/utils/TwoColumns.tsx(0 hunks)docs/src/utils/textcontent.js(0 hunks)
💤 Files with no reviewable changes (20)
- docs/src/pages/markdown-page.md
- docs/src/components/layout/SecondPanel.tsx
- docs/src/utils/ManagementFeaturesCard.tsx
- docs/src/utils/AppFeaturesCard.tsx
- docs/src/components/layout/SeventhPanel.tsx
- docs/src/utils/TextColumn.tsx
- docs/src/utils/OrganizationFeatureCard.tsx
- docs/src/components/HomepageFeatures/styles.module.css
- docs/src/utils/textcontent.js
- docs/src/utils/ParticipationFeatureCard.tsx
- docs/src/components/layout/FifthPanel.tsx
- docs/src/utils/TwoColumns.tsx
- docs/src/components/layout/EightPanel.tsx
- docs/src/components/layout/FourthPanel.tsx
- docs/src/components/HomepageFeatures/index.tsx
- docs/src/components/layout/SixthPanel.tsx
- docs/src/components/layout/ThirdPanel.tsx
- docs/src/components/animations/_headerAnimation.js
- docs/src/hooks/useHomePageAnimations.ts
- docs/src/components/animations/_dissectionAnimation.js
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Run tests for talawa api
- GitHub Check: Analyse Code With CodeQL (typescript)
🔇 Additional comments (6)
docs/src/components/layout/HeaderHero.tsx (1)
9-16: LGTM! Clean and semantic markup structure.The simplified layout with proper heading hierarchy (h1 -> h2) and focused content aligns well with the minimalistic design goals.
docs/src/pages/index.tsx (1)
Line range hint
7-21: LGTM! Successfully simplified the homepage structure.The removal of unnecessary panels and animations while maintaining essential metadata aligns perfectly with the minimalistic design goals.
docs/src/utils/HomeCallToAction.tsx (1)
19-19: LGTM! Improved link specificity.Directing users to the specific talawa-api repository instead of the organization page provides better navigation and user experience.
docs/docusaurus.config.ts (2)
87-88: LGTM! Improved internal routing configuration.Using
toandactiveBasePathinstead ofhreffor internal navigation follows Docusaurus best practices and ensures proper active state handling.
165-165: LGTM! Updated branding in copyright notice.Correctly updated the organization name to "The Palisadoes Foundation, LLC" in the copyright notice.
docs/src/css/index.css (1)
Line range hint
8-25: Well-organized CSS variables!The root variables are semantically named and logically grouped, making the codebase more maintainable.
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:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (2)
docs/src/css/index.css (1)
Line range hint
97-134: Consider using CSS custom properties for colors.The ActionButton styles could be more maintainable by using CSS custom properties for colors, especially since you're already using them elsewhere in the codebase.
.ActionButton.primary { - background-color: var(--ifm-button-background-color); + background-color: var(--brand); } .ActionButton.secondary { - color: #1c1e21; - background-color: #ebedf0; + color: var(--text); + background-color: var(--tintColor); }docs/src/css/custom.css (1)
Line range hint
656-760: Consider consolidating media queries.The current media queries have overlapping breakpoints and repeated styles. Consider consolidating them for better maintainability.
Example consolidation:
+/* Mobile First Approach */ +@media (min-width: 481px) { + /* Tablet styles */ +} + +@media (min-width: 769px) { + /* Desktop styles */ +} + +@media (min-width: 1200px) { + /* Large Desktop styles */ +}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
docs/src/css/custom.css(10 hunks)docs/src/css/index.css(7 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Run tests for talawa api
- GitHub Check: Analyse Code With CodeQL (typescript)
🔇 Additional comments (3)
docs/src/css/index.css (2)
Line range hint
8-25: LGTM! Well-organized root variables.The new root variables are well-structured with clear naming conventions and consistent color value formatting.
61-64: LGTM! Responsive design with clamp.Good use of
clamp()for responsive margin-top, ensuring consistent spacing across different viewport sizes.docs/src/css/custom.css (1)
645-648: LGTM! Good height constraints.The combination of
min-height,max-height, andheightensures consistent layout while allowing for flexibility.
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:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (2)
docs/src/css/index.css (2)
Line range hint
74-78: Avoid using !important and check left positioning.Two potential issues:
- Using
!importantshould be avoided as it makes styles harder to maintain- The negative
leftvalue (-250px) might cause layout issues.HeaderHero .title { font-size: 3rem; line-height: 1; - margin-bottom: 0 !important; + margin-bottom: 0; - left: -250px; opacity: 1.3; }
Line range hint
101-138: Consider optimizing transitions for better performance.The button styles look good, but the
transition: allmight impact performance. Consider transitioning only the specific properties that change on hover..ActionButton { - transition: all 0.2s ease-out; + transition: background-color 0.2s ease-out; }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
docs/src/css/index.css(7 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Test Deployment to https://docs-api.talawa.io
🔇 Additional comments (4)
docs/src/css/index.css (4)
Line range hint
8-41: Well-structured root variables with semantic naming!Good job implementing CSS custom properties for colors and breakpoints. The variables are well-organized with clear grouping and semantic naming.
Line range hint
146-162: LGTM! Clean implementation of section styles.Good use of CSS custom properties for colors and consistent spacing.
163-191: Well-structured responsive design implementation!Good job implementing responsive styles using the breakpoint custom properties. The mobile-first approach with appropriate adjustments for different screen sizes is well done.
193-197: LGTM! Appropriate desktop-specific adjustments.The section spacing adjustments for desktop views are well-considered.
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:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
|
@palisadoes Please review |
palisadoes
merged commit 332a957
into
PalisadoesFoundation:develop-postgres
…g wrong brand color. Apologies for the oversight! (#3092) * Modify the style of navbar to match Talawa docs * Change navbar links to ensure consistency across websites * Modify navbar and sidebar styles to match Talawa docs * Remove unnecessary css icon styling to remove external link icon in navbar * Fix styling bugs when deployed * Delete unnecessary sections from homepage * Fix footer text from My Project, Inc. to The Palisadoes Foundation, LLC. * Ensure responsiveness * Update homepage with minimal design * Delete unnecessary styles from custom.css * Delete unnecessary styles from index.css and update style for markdown pages in customs.css * Organize index.css for better readability * Organize custom.css for better readability * Modify navabar to have active nav link style * Resolve coderabbitai suggestions * Resolve coderabbitai suggestions, breakpoints * Resolve coderabbitai suggestions, breakpoints 2 * Fix bug from coderabbit suggestion * Improve accessibility regarding external link icon * Make header hero height style more fluid * Change hardcoded CSS for better maintainability --------- Co-authored-by: Abhi-MS <[email protected]>
What kind of change does this PR introduce?
Update the https://docs-api.talawa.io/ homepage to a minimal design. Removed unnecessary files and styles. Ensured Rensponsiveness. Fixed sidebar styles.
Issue Number:
Fixes #2951
Snapshots/Videos:
Talawa.API.mp4
If relevant, did you update the documentation?
Not relevant.
Summary
Improved ui/ux of Talawa API docs website.
Does this PR introduce a breaking change?
No
Checklist
CodeRabbit AI Review
Test Coverage
Other information
Have you read the contributing guide?
Yes
Summary by CodeRabbit
Release Notes
Documentation Updates
Styling Changes
Branding
Removed Components