clean up styles and naming

[MagnusHJensen]

Follow up from comments on: #44253

Summary by CodeRabbit

• Refactor
  • Improved component styling architecture to follow modern CSS naming conventions, enhancing code maintainability and consistency across the setup assistant profile card. No changes to user-facing functionality or appearance.

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[Copilot]

Pull request overview

This PR is a small follow-up cleanup to the Setup Assistant Profile card UI, focusing on consistent naming and reducing duplicated styling for the “default profile” variant.

Changes:

• Refactors the default-profile styling to use a BEM modifier (.setup-assistant-profile-card--default-profile) instead of a separate standalone class.
• Updates the React component to use classnames for conditional class composition and to apply the new modifier.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss	Consolidates default-profile styling under a BEM modifier nested within the base class.
frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/SetupAssistantProfileCard.tsx	Uses classnames to conditionally apply the default-profile modifier while keeping the base class stable for descendants.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.78%. Comparing base (384789d) to head (4c2fdac).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #44309    +/-   ##
========================================
  Coverage   66.78%   66.78%            
========================================
  Files        2630     2630            
  Lines      211242   211242            
  Branches     9546     9428   -118     
========================================
  Hits       141071   141071            
  Misses      57349    57349            
  Partials    12822    12822            

Flag	Coverage Δ
frontend	54.74% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b31d4219-a434-4014-8389-170430fba320

📥 Commits

Reviewing files that changed from the base of the PR and between 51dca83 and 4c2fdac.

📒 Files selected for processing (2)

• frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/SetupAssistantProfileCard.tsx
• frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss

---

Walkthrough

This change refactors the SetupAssistantProfileCard component to adopt BEM (Block Element Modifier) naming convention for CSS classes. The component's className derivation is updated to use a classnames-based approach that conditionally applies the setup-assistant-profile-card--default-profile modifier class. Correspondingly, the stylesheet is restructured to nest the modifier selector under the base class, replacing the previous hyphenated selector pattern. Both the TypeScript component and SCSS stylesheet are updated to maintain consistent styling behavior with the new class naming structure.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description only contains a reference to a related issue but lacks substantial content about what was changed, why it was changed, or testing performed, making it largely incomplete.	Expand the description to explain the refactoring from CSS class derivation to BEM modifier pattern, include testing details, and clarify the relationship to issue #44253.
Title check	❓ Inconclusive	The title 'clean up styles and naming' is vague and generic, using non-descriptive terms that don't convey the specific nature of the changes (BEM class naming refactor and SCSS modifier pattern implementation).	Consider a more specific title like 'Refactor SetupAssistantProfileCard to use BEM naming convention for modifiers' to clearly indicate the main change.

✅ Passed checks (3 passed)

Check name	Status	Explanation
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-default-profile-scss

---

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 and usage tips.}

[nulmete]

💯