Fix: Support light mode visibility for Integrations honeycomb grid#7532
Conversation
Signed-off-by: JayH25 <jayhirapara2506@gmail.com>
|
🚀 Preview for commit a6b42bf at: https://69be5a3bfd0be612de3cee83--layer5.netlify.app |
| display: flex; | ||
| height: 100%; | ||
| background: ${(props) => props.theme.radialToBlue}; | ||
| background: ${(props) => props.theme.grey212121ToWhite}; |
There was a problem hiding this comment.
updated this variable because the previous one (radialToBlue) was causing the background behind the grid to stay dark when toggled to black mode, which made the logos and text hard to see.
Switching it to grey...ToWhite fixed the issue by keeping it dark in dark mode, but properly changing to a white/light background in light mode.
If you want to keep it as it is then let me know!
Can you just watch the preview and on website and compare?
If you want then let me know!
There was a problem hiding this comment.
you can see that in dark mode, one of the integretions hexagon is getting disappeared
if you say then i would revert that as the primary goal of this pr is to resolve this incompatibility with light mode.
There was a problem hiding this comment.
@JayH25 revert this our goal is to make compatible with light mode.
There was a problem hiding this comment.
@saurabhraghuvanshii ok now it is working as you told
I just couldn't revert to radialblue because that variable is preventing hexagones to be whitish (it's not compatible in white mode- you can see in second last preview)
So i have passed isDark prop to integration.style and now this logic is handling issue perfectly.
Signed-off-by: JayH25 <jayhirapara2506@gmail.com>
|
🚀 Preview for commit 67cef00 at: https://69c148d16945f30bd81310f2--layer5.netlify.app |
Signed-off-by: JayH25 <jayhirapara2506@gmail.com>
|
🚀 Preview for commit c867c42 at: https://69c15df49864184379ddba67--layer5.netlify.app |
|
Thanks @JayH25 LGTM!! |
3 participants
Description
This PR resolves the visibility issue in the Integrations honeycomb grid when the site is toggled to light mode. The root cause was that the background colors were hardcoded to a dark grey, making the text and logos unreadable when the site background turned white.
Changes Made
Integration.style.js: Removed the oldprops.theme.radialToBlueand updated the styling to useprops.theme.grey212121ToWhiteto properly support the light/dark mode switch.IntegrationsGrid.js: The inactive<Hexagon>components previously used a hardcoded inline style (background: "#A0AAAA"). I replaced this with a conditional check (isDark ? "#A0AAAA" : "#EEEEEE") so the colors now dynamically adapt whenever the theme is toggled.This PR fixes issue: #7530