feat: enhance Why Kmesh section with icons and improved UI styling#292
feat: enhance Why Kmesh section with icons and improved UI styling#292shubhtrek wants to merge 2 commits into
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
❌ Deploy Preview for kmesh-net failed.
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request enhances the 'Why' section by integrating Lucide icons into the reason cards and refactoring the layout from Flexbox to CSS Grid for improved responsiveness. It also introduces hover animations and better dark mode support. Feedback focuses on improving accessibility by adding aria-hidden to decorative icons, implementing a safety check for the icon component before rendering, and replacing hardcoded colors with currentColor or theme-specific variables to ensure visual consistency.
|
|
||
| {/* ICON */} | ||
| <div className="reasonIcon"> | ||
| <Icon /> |
There was a problem hiding this comment.
The Icon component should be checked for existence before rendering to prevent potential runtime errors if a reason is added without an icon. Additionally, since these icons are decorative, they should be hidden from screen readers using aria-hidden="true".
| <Icon /> | |
| {Icon && <Icon aria-hidden="true" />} |
| padding: 28px 20px; | ||
| border-radius: 12px; | ||
|
|
||
| border: 1px solid rgba(0, 0, 0, 0.05); |
There was a problem hiding this comment.
The border color is currently hardcoded for light mode. To ensure visual consistency in dark mode, consider adding a theme-specific override.
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| [data-theme='dark'] & { | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } |
| .reasonIcon svg { | ||
| width: 36px; | ||
| height: 36px; | ||
| color: #1a1a1a; |
There was a problem hiding this comment.
Hardcoded color values should be avoided. Using currentColor or a theme-defined CSS variable ensures the icon color adapts correctly to the surrounding text color and theme changes.
| color: #1a1a1a; | |
| color: currentColor; |
There was a problem hiding this comment.
Pull request overview
This PR refreshes the homepage “Why Kmesh” section by adding iconography and updated card styling in the Docusaurus frontend.
Changes:
- Replace the existing flex layout with a responsive CSS grid for the reason cards.
- Add hover, spacing, border, and dark-mode styles for the “Why Kmesh” cards and icons.
- Introduce
lucide-reacticons for each reason item in the React component.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/components/Why/index.scss |
Reworks the section layout and visual styling, including responsive grid behavior and dark-mode icon/hover styles. |
src/components/Why/index.js |
Adds icon imports, maps each reason to an icon, and renders the icon above each reason title/content. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { | ||
| Plug, | ||
| Rocket, | ||
| ArrowDown, | ||
| ShieldCheck, | ||
| Activity, | ||
| Globe | ||
| } from "lucide-react"; |
shubhtrek
force-pushed
the
feat/why-kmesh-icons-clean
branch
from
59f400f to
f308265
Compare
|
Adding label DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. |
Signed-off-by: Shubh Pingale <135618936+shubhtrek@users.noreply.github.com>
shubhtrek
force-pushed
the
feat/why-kmesh-icons-clean
branch
from
f308265 to
202da9d
Compare
Signed-off-by: Shubh Pingale <135618936+shubhtrek@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 5 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| # Output as raw JSON: | ||
| kmeshctl dump <kmesh-daemon-pod> kernel-native -o json | ||
| ``` | ||
|
|
||
| ### Options | ||
|
|
||
| ```bash | ||
| -h, --help help for dump | ||
| -h, --help help for dump | ||
| -o, --output string Output format: table or json (default "table") |
| # Output as raw JSON: | ||
| kmeshctl dump <kmesh-daemon-pod> kernel-native -o json | ||
| ``` | ||
|
|
||
| ### Options | ||
|
|
||
| ```bash | ||
| -h, --help help for dump | ||
| -h, --help help for dump | ||
| -o, --output string Output format: table or json (default "table") |
| # Output as raw JSON: | ||
| kmeshctl dump <kmesh-daemon-pod> kernel-native -o json | ||
| ``` | ||
|
|
||
| ### Options | ||
|
|
||
| ```bash | ||
| -h, --help help for dump | ||
| -h, --help help for dump | ||
| -o, --output string Output format: table or json (default "table") |
| transition: transform 0.25s ease, box-shadow 0.25s ease; | ||
| } | ||
|
|
||
| .reasonBox:hover { | ||
| transform: translateY(-6px) scale(1.02); | ||
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); |
What this PR does
Why this change
Improves UI clarity and visual appeal without changing layout.
###Preview