From fd21ef7b847fc994ca11e0e1f062afcddb990ec8 Mon Sep 17 00:00:00 2001 From: Khushal Malhotra Date: Wed, 19 Aug 2026 18:26:05 +0530 Subject: [PATCH 1/5] fix: remove unwanted border and fix logo color in DiscussCallout - discuss.style.js: remove button border and padding, add overflow hidden to card, add mix-blend-mode to logo for dark card background Signed-off-by: Khushal Malhotra --- src/sections/Discuss-Callout/discuss.style.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 68a800eaac8f16..0467b759be8ad3 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -13,6 +13,7 @@ const DiscussWrapper = styled.div` } .logo{ width: 200px; + background-color: #1E2117; } .explain { @@ -36,13 +37,13 @@ const DiscussWrapper = styled.div` background-color: none; border-radius: 25px; .card { - height:20rem; -webkit-transition: 450ms all; transition: 450ms all; margin: auto; padding: 1.25rem; background-color: #1E2117; border-radius: 25px; + overflow: hidden; p { text-align: center; padding: 0px 0px 1px 0px; @@ -72,8 +73,8 @@ const DiscussWrapper = styled.div` button{ color: #1E2117; - padding: 0.2em 1em; - border: 2px solid; + padding: 0; + border: 0; background: none; transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; cursor: pointer; @@ -182,4 +183,4 @@ const DiscussWrapper = styled.div` } `; -export default DiscussWrapper; \ No newline at end of file +export default DiscussWrapper; From 9b0c909430ba6e60d36e8470e3cdf7d590ad4912 Mon Sep 17 00:00:00 2001 From: Khushal Malhotra Date: Thu, 20 Aug 2026 19:45:53 +0530 Subject: [PATCH 2/5] fix: remove whitish borders and match card dimensions in callout cards - Add mix-blend-mode: screen to Discuss logo to hide white pixels on dark bg - Add appearance: none and line-height: 0 to button elements in both callouts - Target .gatsby-image-wrapper with transparent bg in Adventures-Callout - Align Discuss-Callout card heights with Adventures-Callout at all breakpoints Fixes: layer5io#7958 Signed-off-by: Khushal Malhotra --- .../Adventures-Callout/discuss.style.js | 7 +++++++ src/sections/Discuss-Callout/discuss.style.js | 20 +++---------------- 2 files changed, 10 insertions(+), 17 deletions(-) diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js index 66ca1f8edf5611..7b9ba679363185 100644 --- a/src/sections/Adventures-Callout/discuss.style.js +++ b/src/sections/Adventures-Callout/discuss.style.js @@ -13,6 +13,11 @@ const AdventuresWrapper = styled.div` .logo{ width: 100%; } + .gatsby-image-wrapper{ + background-color: transparent; + border-radius: 10px; + overflow: hidden; + } .explain { padding-top: 0rem; text-align: center; @@ -74,6 +79,8 @@ const AdventuresWrapper = styled.div` padding: 0; border: 0; background: none; + appearance: none; + line-height: 0; transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; cursor: pointer; } diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index 0467b759be8ad3..aa58b835c62c52 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -14,6 +14,7 @@ const DiscussWrapper = styled.div` .logo{ width: 200px; background-color: #1E2117; + mix-blend-mode: screen; } .explain { @@ -76,14 +77,13 @@ const DiscussWrapper = styled.div` padding: 0; border: 0; background: none; + appearance: none; + line-height: 0; transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; cursor: pointer; } @media only screen and (min-width: 768px){ @media only screen and (min-width: 1211px){ - .card-align{ - padding:2rem 0; - } .explain { .cards { padding: 0; @@ -98,14 +98,10 @@ const DiscussWrapper = styled.div` } } @media only screen and (max-width: 1211px){ - .card-align{ - padding:2rem 0; - } .explain { .cards { padding: 0; h2 { - padding-bottom:1rem; font-size: 25px; line-height: 35px; } @@ -122,9 +118,6 @@ const DiscussWrapper = styled.div` } @media only screen and (max-width: 992px){ - .card-align{ - padding:1.1rem 0; - } .explain { .cards { padding: 0; @@ -132,7 +125,6 @@ const DiscussWrapper = styled.div` h2 { font-size: 22px; line-height: 32px; - padding-bottom:1rem; } p { font-size: 13px; @@ -142,17 +134,11 @@ const DiscussWrapper = styled.div` height:18rem; } } - button { - padding: 0; - } } } } @media only screen and (max-width: 450px){ - .card-align{ - padding:2rem 0; - } .explain { .cards { padding: 1rem 1rem 1rem 1rem; From c1856064b1bac70469355e6fcf5ac244bdeb1de1 Mon Sep 17 00:00:00 2001 From: Khushal Malhotra Date: Thu, 20 Aug 2026 22:30:36 +0530 Subject: [PATCH 3/5] fix: remove whitish background from logo and adventure image wrappers - Remove background-color from .logo in Discuss-Callout; mix-blend-mode: screen alone handles transparent areas correctly without creating a lighter rectangle artifact - Use !important on gatsby-image-wrapper background-color to override Gatsby StaticImage inline placeholder style in Adventures-Callout Fixes: layer5io#7958 Signed-off-by: Khushal Malhotra --- src/sections/Adventures-Callout/discuss.style.js | 2 +- src/sections/Discuss-Callout/discuss.style.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js index 7b9ba679363185..615425470ad490 100644 --- a/src/sections/Adventures-Callout/discuss.style.js +++ b/src/sections/Adventures-Callout/discuss.style.js @@ -14,7 +14,7 @@ const AdventuresWrapper = styled.div` width: 100%; } .gatsby-image-wrapper{ - background-color: transparent; + background-color: transparent !important; border-radius: 10px; overflow: hidden; } diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index aa58b835c62c52..b213892dfe6195 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -13,7 +13,6 @@ const DiscussWrapper = styled.div` } .logo{ width: 200px; - background-color: #1E2117; mix-blend-mode: screen; } From 231bc953b9dbfa030490859232acc63ffc01c575 Mon Sep 17 00:00:00 2001 From: Khushal Malhotra Date: Thu, 20 Aug 2026 22:58:40 +0530 Subject: [PATCH 4/5] fix: match card dimensions, reset focus outlines, and use theme tokens - Use props.theme.darkJungleGreenColor for consistent card background and button color - Reset focus and focus-visible outlines on buttons to prevent unwanted focus borders - Ensure identical card width and height breakpoints across both Callout components Fixes: layer5io#7958 Signed-off-by: Khushal Malhotra --- .../Adventures-Callout/discuss.style.js | 300 +++++++++--------- src/sections/Discuss-Callout/discuss.style.js | 296 ++++++++--------- 2 files changed, 303 insertions(+), 293 deletions(-) diff --git a/src/sections/Adventures-Callout/discuss.style.js b/src/sections/Adventures-Callout/discuss.style.js index 615425470ad490..cf6b9c06d2c714 100644 --- a/src/sections/Adventures-Callout/discuss.style.js +++ b/src/sections/Adventures-Callout/discuss.style.js @@ -1,174 +1,180 @@ import styled from "styled-components"; const AdventuresWrapper = styled.div` - background-color:none; - padding: 1.5rem 0.625rem 1rem; + background-color: none; + padding: 1.5rem 0.625rem 1rem; + overflow: hidden; + h2 { + font-weight: 500; + } + h2 span { + color: ${(props) => props.theme.secondaryColor}; + } + .logo { + width: 100%; + } + .gatsby-image-wrapper { + background-color: transparent !important; + border-radius: 12px; overflow: hidden; - h2{ - font-weight: 500; + } + .gatsby-image-wrapper img { + border-radius: 12px; + } + .explain { + padding-top: 0rem; + text-align: center; + p { + text-align: center; + color: ${(props) => props.theme.white}; + padding: 0px 3.125rem; } - h2 span{ - color:${(props) => props.theme.secondaryColor}; + h2 { + color: ${(props) => props.theme.white}; + line-height: 1.2; } - .logo{ - width: 100%; + h1 { + padding: 1.25rem 0px; } - .gatsby-image-wrapper{ - background-color: transparent !important; - border-radius: 10px; + .cards { + margin: 0.15rem auto 0; + max-width: 50rem; + padding: 1.5rem 2rem 0rem 2rem; + background-color: none; + border-radius: 25px; + .card { + -webkit-transition: 450ms all; + transition: 450ms all; + margin: auto; + padding: 1.25rem; + background-color: ${(props) => props.theme.darkJungleGreenColor}; + border-radius: 25px; overflow: hidden; - } - .explain { - padding-top: 0rem; - text-align: center; - p { - text-align: center; - color: ${(props) => props.theme.white}; - padding: 0px 3.125rem; + p { + text-align: center; + padding: 0px 0px 1px 0px; + letter-spacing: 0; + font-size: 16px; } h2 { - color: ${(props) => props.theme.white}; - line-height: 1.2; + text-align: center; + font-size: 28px; + text-transform: uppercase; + clear: both; + margin-bottom: 0rem; + margin-top: 1rem; } - h1 { - padding: 1.25rem 0px; + &:hover, + &:focus { + outline: none; } - .cards { - margin: 0.15rem auto 0 ; - max-width: 50rem; - padding: 1.5rem 2rem 0rem 2rem; - background-color: none; - border-radius: 25px; - .card { - -webkit-transition: 450ms all; - transition: 450ms all; - margin: auto; - padding: 1.25rem; - background-color: #1E2117; - border-radius: 25px; - overflow: hidden; - p { - text-align: center; - padding: 0px 0px 1px 0px; - letter-spacing: 0; - font-size: 16px; - } - h2 { - text-align: center; - font-size: 28px; - text-transform:uppercase; - clear: both; - margin-bottom: 0rem; - margin-top: 1rem; - } - &:hover, - &:focus { - outline: none; - } - &:hover{ - transform: translateY(0.03rem); - box-shadow: 0 2px 10px #00d3a9; - } - } - } + &:hover { + transform: translateY(0.03rem); + box-shadow: 0 2px 10px #00d3a9; } + } } + } - button{ - color: #1E2117; - padding: 0; - border: 0; - background: none; - appearance: none; - line-height: 0; - transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; - cursor: pointer; + button { + color: ${(props) => props.theme.darkJungleGreenColor}; + padding: 0; + border: 0; + background: none; + appearance: none; + line-height: 0; + outline: none; + transition: + color 0.25s, + border-color 0.25s, + transform 0.25s, + box-shadow 0.25s; + cursor: pointer; + &:focus, + &:focus-visible { + outline: none; } - @media only screen and (min-width: 768px){ - @media only screen and (min-width: 1211px){ - .explain { - .cards { - padding: 0; - .card { - height:20rem; - width: 23.8rem; - } - } - } + } + @media only screen and (min-width: 768px) { + @media only screen and (min-width: 1211px) { + .explain { + .cards { + padding: 0; + .card { + height: 20rem; + width: 23.8rem; + } } - @media only screen and (max-width: 1211px){ - .explain { - .cards { - padding: 0; - h2 { - font-size: 25px; - line-height: 35px; - } - p { - font-size: 15px - } - .card{ - width:23rem; - height:20rem; - } - } - } - } + } + } + @media only screen and (max-width: 1211px) { + .explain { + .cards { + padding: 0; + h2 { + font-size: 25px; + line-height: 35px; + } + p { + font-size: 15px; + } + .card { + width: 23rem; + height: 20rem; + } } - - @media only screen and (max-width: 992px){ - - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - } - p { - font-size: 13px; - line-height: 23px; - } - width:18rem; - height:18rem; - } - } - button { - padding: 0; - } + } + } + + @media only screen and (max-width: 992px) { + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + } + p { + font-size: 13px; + line-height: 23px; } + width: 18rem; + height: 18rem; + } } + } } - @media only screen and (max-width: 450px){ - .explain { - .cards { - padding: 1rem 1rem 1rem 1rem; - .card { - padding: 0.5rem; - h2 { - font-size: 25px; - } - p{ - font-size: 15px; - } - } - } + } + @media only screen and (max-width: 450px) { + .explain { + .cards { + padding: 1rem 1rem 1rem 1rem; + .card { + padding: 0.5rem; + h2 { + font-size: 25px; + } + p { + font-size: 15px; + } } + } } - @media only screen and (max-width: 375px){ - .explain { - .cards { - padding: 1rem .5rem 1rem .5rem; - h2 { - font-size: 22px; - } - p{ - font-size: 13px; - } - } + } + @media only screen and (max-width: 375px) { + .explain { + .cards { + padding: 1rem 0.5rem 1rem 0.5rem; + h2 { + font-size: 22px; } - } + p { + font-size: 13px; + } + } + } + } `; export default AdventuresWrapper; diff --git a/src/sections/Discuss-Callout/discuss.style.js b/src/sections/Discuss-Callout/discuss.style.js index b213892dfe6195..c07358e52cd88c 100644 --- a/src/sections/Discuss-Callout/discuss.style.js +++ b/src/sections/Discuss-Callout/discuss.style.js @@ -1,171 +1,175 @@ import styled from "styled-components"; const DiscussWrapper = styled.div` - background-color:none; - padding: 1.5rem 0.625rem 1rem; - - overflow: hidden; - h2{ - font-weight: 500; + background-color: none; + padding: 1.5rem 0.625rem 1rem; + overflow: hidden; + h2 { + font-weight: 500; + } + h2 span { + color: ${(props) => props.theme.secondaryColor}; + } + .logo { + width: 200px; + mix-blend-mode: screen; + } + + .explain { + padding-top: 0rem; + text-align: center; + p { + text-align: center; + color: ${(props) => props.theme.white}; + padding: 0px 3.125rem; } - h2 span{ - color:${(props) => props.theme.secondaryColor}; + h2 { + color: ${(props) => props.theme.white}; + line-height: 1.2; } - .logo{ - width: 200px; - mix-blend-mode: screen; + h1 { + padding: 1.25rem 0px; } - - .explain { - padding-top: 0rem; - text-align: center; - p { - text-align: center; - color: ${(props) => props.theme.white}; - padding: 0px 3.125rem; + .cards { + margin: 0.15rem auto 0; + max-width: 50rem; + padding: 1.5rem 2rem 0rem 2rem; + background-color: none; + border-radius: 25px; + .card { + -webkit-transition: 450ms all; + transition: 450ms all; + margin: auto; + padding: 1.25rem; + background-color: ${(props) => props.theme.darkJungleGreenColor}; + border-radius: 25px; + overflow: hidden; + p { + text-align: center; + padding: 0px 0px 1px 0px; + letter-spacing: 0; + font-size: 16px; } h2 { - color: ${(props) => props.theme.white}; + text-align: center; + font-size: 28px; + text-transform: uppercase; + clear: both; + margin-bottom: 0rem; + margin-top: 1rem; } - h1 { - padding: 1.25rem 0px; + &:hover, + &:focus { + outline: none; } - .cards { - margin: 0.15rem auto 0 ; - max-width: 50rem; - padding: 1.5rem 2rem 0rem 2rem; - background-color: none; - border-radius: 25px; - .card { - -webkit-transition: 450ms all; - transition: 450ms all; - margin: auto; - padding: 1.25rem; - background-color: #1E2117; - border-radius: 25px; - overflow: hidden; - p { - text-align: center; - padding: 0px 0px 1px 0px; - letter-spacing: 0; - font-size: 16px; - } - h2 { - text-align: center; - font-size: 28px; - text-transform:uppercase; - clear: both; - margin-bottom: 0rem; - margin-top: 1rem; - } - &:hover, - &:focus { - outline: none; - } - &:hover{ - transform: translateY(0.03rem); - box-shadow: 0 2px 10px #00d3a9; - } - } - } + &:hover { + transform: translateY(0.03rem); + box-shadow: 0 2px 10px #00d3a9; } + } } + } - button{ - color: #1E2117; - padding: 0; - border: 0; - background: none; - appearance: none; - line-height: 0; - transition: color 0.25s,border-color 0.25s,transform 0.25s,box-shadow 0.25s; - cursor: pointer; + button { + color: ${(props) => props.theme.darkJungleGreenColor}; + padding: 0; + border: 0; + background: none; + appearance: none; + line-height: 0; + outline: none; + transition: + color 0.25s, + border-color 0.25s, + transform 0.25s, + box-shadow 0.25s; + cursor: pointer; + &:focus, + &:focus-visible { + outline: none; } - @media only screen and (min-width: 768px){ - @media only screen and (min-width: 1211px){ - .explain { - .cards { - padding: 0; - h2{ - padding-bottom:1rem; - } - .card { - height:20rem; - width: 23.8rem; - } - } - } + } + @media only screen and (min-width: 768px) { + @media only screen and (min-width: 1211px) { + .explain { + .cards { + padding: 0; + .card { + height: 20rem; + width: 23.8rem; + } } - @media only screen and (max-width: 1211px){ - .explain { - .cards { - padding: 0; - h2 { - font-size: 25px; - line-height: 35px; - } - p { - font-size: 15px - } - .card{ - width:23rem; - height:20rem; - } - } - } - } + } + } + @media only screen and (max-width: 1211px) { + .explain { + .cards { + padding: 0; + h2 { + font-size: 25px; + line-height: 35px; + } + p { + font-size: 15px; + } + .card { + width: 23rem; + height: 20rem; + } } - - @media only screen and (max-width: 992px){ - .explain { - .cards { - padding: 0; - .card { - h2 { - font-size: 22px; - line-height: 32px; - } - p { - font-size: 13px; - line-height: 23px; - } - width:18rem; - height:18rem; - } - } + } + } + + @media only screen and (max-width: 992px) { + .explain { + .cards { + padding: 0; + .card { + h2 { + font-size: 22px; + line-height: 32px; + } + p { + font-size: 13px; + line-height: 23px; } + width: 18rem; + height: 18rem; + } } + } } - - @media only screen and (max-width: 450px){ - .explain { - .cards { - padding: 1rem 1rem 1rem 1rem; - .card { - padding: 0.5rem; - h2 { - font-size: 25px; - } - p{ - font-size: 15px; - } - } - } + } + + @media only screen and (max-width: 450px) { + .explain { + .cards { + padding: 1rem 1rem 1rem 1rem; + .card { + padding: 0.5rem; + h2 { + font-size: 25px; + } + p { + font-size: 15px; + } } + } } - @media only screen and (max-width: 375px){ - .explain { - .cards { - padding: 1rem .5rem 1rem .5rem; - h2 { - font-size: 22px; - } - p{ - font-size: 13px; - } - } + } + @media only screen and (max-width: 375px) { + .explain { + .cards { + padding: 1rem 0.5rem 1rem 0.5rem; + h2 { + font-size: 22px; } - } + p { + font-size: 13px; + } + } + } + } `; export default DiscussWrapper; From 265e603a955c062005bc7870a1d5df5db897e0ac Mon Sep 17 00:00:00 2001 From: Khushal Malhotra Date: Thu, 20 Aug 2026 23:14:03 +0530 Subject: [PATCH 5/5] refactor: remove unnecessary button elements wrapping callout card logos - Remove + diff --git a/src/sections/Discuss-Callout/index.js b/src/sections/Discuss-Callout/index.js index 1f34ddd27301ea..5c7659db4e8921 100644 --- a/src/sections/Discuss-Callout/index.js +++ b/src/sections/Discuss-Callout/index.js @@ -27,14 +27,12 @@ const DiscussCallout = () => { Discussion Forum

- + Discuss