fixed the Unwanted border and more

[Ayush-1812]

Description

This PR fixes #7958

The "JOIN THE CONVERSATION" card on the Community page rendered with an unintended white border around its container, and the Layer5 logo inside it appeared with inconsistent, off-brand colors.

While fixing the visible symptoms, I found the underlying cause was not the border declaration alone — the stylesheet had unbalanced braces that were leaking the component's button styles into the global scope. Both symptoms trace back to that.

What was wrong

1. Unintended white border

src/sections/Discuss-Callout/discuss.style.js styled the logo button with:

button {
    color: #1E2117;
    padding: 0.2em 1em;
    border: 2px solid;   /* ← no color specified */
}

border: 2px solid omits a color, so CSS falls back to currentColor. The border therefore painted itself using whatever color was inherited at that point — the card's white text — producing the white box seen in the issue screenshot.

For comparison, the sibling "Adventures of Five & Friends" card (src/sections/Adventures-Callout/discuss.style.js), which renders correctly, uses border: 0; padding: 0;.

2. Off-brand / inconsistent logo colors — root cause

The styled-component template literal contained two stray closing braces (one in the .explain block, one in the max-width: 1211px media query). These closed the component's style block early, so every rule after them — including the entire button rule — was emitted as a bare global button selector instead of being scoped to the component.

The consequence: this card's border: 2px solid was applied to buttons across the site, and collided with the Adventures card's leaked border: 0. Which one won depended purely on stylesheet injection order, which is exactly why the styling looked arbitrary and inconsistent rather than simply broken.

The logo asset itself (static/images/layer5-discuss-white.webp) was already correct Layer5 branding — white wordmark with the teal 5. It only looked wrong because it was boxed inside the spurious bordered, padded container.

Changes

All changes are confined to src/sections/Discuss-Callout/discuss.style.js:

• Removed the unintended border — border: 2px solid → border: 0, and padding: 0.2em 1em → padding: 0, bringing the button in line with the working Adventures card. color: #1E2117 → color: inherit so no stale color is left to feed currentColor.
• Fixed the brace nesting (the actual root cause) — removed both stray } so the button rule is properly scoped to the component and can no longer leak globally or be decided by cascade order.
• Made the logo responsive — added max-width: 100%; height: auto so it scales within the card without distorting its aspect ratio.
• Cleared the leftover click focus ring on the wrapping <a> using :focus:not(:focus-visible), matching the pattern already used elsewhere in this file. This removes the outline left after a mouse click while preserving the keyboard focus outline, consistent with the recent focus-visible accessibility work in Fix focus-visible outlines #7960 and Fix button focus styling #7962.

Verification

Brace balance was confirmed with a depth parser over the template literal:

src/sections/Discuss-Callout/discuss.style.js | final depth: 0 | stray closers: none | BALANCED

The file also passes node --check.

Notes for Reviewers

• No markup changes — src/sections/Discuss-Callout/index.js is untouched. This is a CSS-only fix.
• The component is also used on /company/faq and the Learn course-overview pages, so the fix applies there too. Worth a quick look at those while reviewing.
• Accessibility was deliberately preserved: only the non-keyboard focus outline is suppressed. Keyboard :focus-visible outlines still render.
• Related, not fixed here: src/sections/Adventures-Callout/discuss.style.js has the same latent defect — 2 stray closing braces (around lines 68 and 133) leaking its button rule globally. It does not affect this fix, since a properly scoped selector now outranks a bare global one. Happy to clean it up in this PR or open a follow-up issue — reviewer's call.

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Style
  • Improved responsive sizing for the discuss callout logo.
  • Updated card links with block layout, rounded corners, and cleaner focus behavior.
  • Refined button styling with inherited colors, simplified spacing and borders, and smoother hover transitions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 85615173-b3b8-4ec0-8e6e-9c92f7bdfe5d

📥 Commits

Reviewing files that changed from the base of the PR and between 2ccf887 and 2dc1ed9.

📒 Files selected for processing (1)

• src/sections/Discuss-Callout/discuss.style.js

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

The Discuss callout stylesheet now supports responsive logo sizing, block-level rounded card links, suppressed non-visible focus outlines, and simplified button transitions.

Changes

Discuss Callout Styling

Layer / File(s)	Summary
Responsive and interaction styles src/sections/Discuss-Callout/discuss.style.js	The logo uses responsive width and automatic height. Card links are block-level with rounded corners and suppressed non-visible focus outlines. Buttons inherit color, remove padding and borders, and transition transform and box shadow. Formatting was also cleaned up.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: 🟡 Moderate · up to 2dc1e

This localized CSS fix removes leaked global button styling and preserves keyboard focus indication, but lint, Gatsby build, and local visual/functional checks still need to pass before merge.

Suggested labels: area/core-styles

Suggested reviewers: ds123-ally

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title identifies the unintended border fix, which is a real and important part of the styling changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/sections/Discuss-Callout/discuss.style.js

Parsing error: The keyword 'import' is reserved

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Preview deployment for PR #7971 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.