Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove title borders from Admin Setting Sections #9580

Closed
11 tasks
zutigrm opened this issue Oct 29, 2024 · 6 comments
Closed
11 tasks

Remove title borders from Admin Setting Sections #9580

zutigrm opened this issue Oct 29, 2024 · 6 comments
Labels
P0 High priority Team S Issues for Squad 1 Type: Enhancement Improvement of an existing feature

Comments

@zutigrm
Copy link
Collaborator

zutigrm commented Oct 29, 2024

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:
image.png

New design without borders:
Image


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.
@zutigrm zutigrm added P0 High priority Team S Issues for Squad 1 Type: Enhancement Improvement of an existing feature labels Oct 29, 2024
@zutigrm zutigrm assigned zutigrm and unassigned zutigrm Oct 29, 2024
@10upsimon 10upsimon self-assigned this Oct 30, 2024
@10upsimon
Copy link
Collaborator

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

@10upsimon 10upsimon assigned zutigrm and unassigned 10upsimon Oct 30, 2024
@zutigrm
Copy link
Collaborator Author

zutigrm commented Oct 30, 2024

Thanks @10upsimon IB ✅

@zutigrm zutigrm assigned 10upsimon and unassigned zutigrm Oct 30, 2024
@10upsimon 10upsimon assigned zutigrm and 10upsimon and unassigned 10upsimon and zutigrm Oct 31, 2024
@Aditya-PS-05
Copy link

Can you assign me this issue?

@kelvinballoo
Copy link
Collaborator

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

Image

Figma: 24px:

Image


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:

Image

Figma:

Image


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

Image

@10upsimon
Copy link
Collaborator

@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.

@kelvinballoo
Copy link
Collaborator

QA Update ✅

Thanks @10upsimon .

This was verified good.

  • Borders from below the admin settings section titles are removed and it's matching Figma.
  • Verified across Chrome, Safari, Edge, Firefox desktop browsers
  • Verified on mobile and tablet breakpoints

Image

Image

@kelvinballoo kelvinballoo removed their assignment Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P0 High priority Team S Issues for Squad 1 Type: Enhancement Improvement of an existing feature
Projects
None yet
Development

No branches or pull requests

6 participants