Remove title borders from Admin Setting Sections

[zutigrm]

Feature Description

Borders should be removed from bellow the section titles in the admin settings, and any other edits if needed - like spacing, etc. Figma design can be found here

Currently, boxes with borders:

New design without borders:

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Borders from bellow the admin settings section titles are removed and spacing is adjusted if needed and settings sections are matching the new Figma design

Implementation Brief

• [ ] Create a new SASS file for targeting admin settings base, at assets/sass/components/settings/_googlesitekit-settings-admin.scss
  • [ ] Import this file into the base admin.scss file at assets/sass/admin.scss, within the // Settings import group.
  • [ ] Target the settings page selector: .googlesitekit-plugin #js-googlesitekit-settings and within it:
    • [ ] Target .googlesitekit-layout__header and remove the boarder, and within it:
      • [ ] Target .mdc-layout-grid and remove the bottom padding, and within it:
        • [ ] Target h3.googlesitekit-layout__header-title and set the following CSS properties:
          • [ ] font-family: $f-primary;
          • [ ] font-weight: $fw-medium;
          • [ ] font-size: $fs-title-lg;
• [ ] Validate the changes against the Figma Design.

Test Coverage

• [ ] Update VRT tests as required following the style changes.

QA Brief

• Set up Site Kit
• Navigate to Site Kit > Settings > Admin Settings
• Validate the setting group header styles against the issue requirements
• The Figma design can be found here

Changelog entry

• Update styles for the admin settings.

[10upsimon]

Thanks @zutigrm AC ✅ Moving to IB and I'll pick this up.

[zutigrm]

Thanks @10upsimon IB ✅

[Aditya-PS-05]

Can you assign me this issue?

[kelvinballoo]

QA Update ⚠

Did a check and here are my observations:

ITEM 1: There was an extra 24px spacing for the Plugin Status section: between the text description and the 'Reset Sitekit' CTA. Based on figma, it's only 24px.

Implementation: 48px  Figma: 24px: 

---

ITEM 2: This feels out of scope and might not even be an issue but on Figma, for the 'Plugin Settings' involves a toggle. However in our current implementation, it's a checkbox. Let me know if this needs a separate ticket.

Implementation:  Figma: 

---

Other than that, the borders are not appearing, which is as expected.


[10upsimon]

@kelvinballoo thank you. I have just pushed a PR that addresses the margin on the Reset Site Kit CTA text. The checkbox vs radio controls can be ignored as part of this issue.