Updated scss to only target h2 on privacy policy page

[angelenelm]

Fixes #4864

What changes did you make?

• Update h2 selector on lines 52-54 (within @media #{$bp-desktop-up}) to target h2s in .content-section--privacy-policy class, which corresponds to h2s in the Privacy Policy card

Why did you make the changes (we will use this info to test)?

• Per Change h2 margin on Privacy Policy Page #4864 and ER: Change h2 {margin-top: 48px;} SCSS to only apply on Privacy Policy page #4794, the h2 styling should only be targeting the h2s on the Privacy Policy page, but they are targeting every h2 throughout the website. These changes are to specifically style the h2s on the Privacy Policy page.

Screenshots

Visuals before changes are applied

Join Us page:

Privacy Policy page:

Visuals after changes are applied

Join Us page (headers here are no longer being affected):

Privacy Policy page (headers here are still affected):

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b angelenelm-privacy-policy-page-change-h2-4864 gh-pages
git pull https://github.com/angelenelm/website.git privacy-policy-page-change-h2-4864

[kiwookim]

ETA: July 17 EOD
Availability: 9-5pm PST

[steven-positive-tran]

ETA: July 17 EOD
Availability: 12-6pm PST

[steven-positive-tran]

Branches look good, code changes seem in line with the issue that needed to be addressed.
I see that 311 page and the join us page the margin at the top for each card is reduced which is the expected outcome.

Good job and thank you for taking up this issue for hackforla.

[kiwookim]

Thanks for taking this issue @angelenelm.
Branch name looks good, and I checked using docker to confirm that there aren't any breaking changes as a result of applying a class to affect only the h2 elements in privacy policy page.

@roslynwythe @t-will-gillis -- tagging you guys as Roslyn suggested during Sunday meeting regarding one of the linter not passing.

[ronaldpaek]

Thank you for taking up this issue, everything works perfectly on my end no issue with the linter.

[ronaldpaek]

When I run it on my own repo the test case passes, but the current test keeps failing, how weird

[ronaldpaek]

I wonder if you can refactor to

.content-section--privacy-policy {
	padding-top: 34px;
    padding-bottom: 34px;
    h2 {
      margin-top: 48px;
    }
}

I'm also not the best in SCSS, haven't really used it much.

[ronaldpaek]

@t-will-gillis It pass locally on my side, but still seems like it is failing here, you can figure it out and then merge.

[ronaldpaek]

@t-will-gillis if there is still an issue I was thinking of trying to add this rule set in the .stylelintrc.json file

I mean, try to add this to the .stylelintrc.json file. Obviously, add the rest of the other rules already on the stylelintrc.json file as well, but I don't know if this will work cause says we need to npm install dev dependency, but it might work without it.

{
"plugins": [
"stylelint-scss"
],
"rules": {
"scss/at-rule-no-unknown": true,
// Additional rules
}
}

[angelenelm]

After some research I saw that the error could be thrown due to the comment syntax starting on line 60. Stylelint doesn't support SCSS but can with this config. Let me know what the best course of action should be :)

[angelenelm]

I saw the check is failing at line 30, which isn't a section I touched so I'm not sure what's going on

[ronaldpaek]

this config

try it, try to modify the .stylelintrc.json file to extend the package you are referring to see if it works without npm install, I'm still kind of confused about npm install and package.json for this whole project cause there isn't one in the root.

[t-will-gillis]

hi @angelenelm Thanks for your patience! Your issue looks great as the previous reviewers have indicated.

The 'fail' that is happening with the Lint SCSS is likely caused by some conflicts that occurred when the we updated github/super-linter to v5.0.0 per the Dependabot. Some other PRs/ issues are being flagged with the same 'fail' message, so this is not unique to yours.

Would you please revert the changes to .stylelintrc.json? After that we can merge your PR. We will open a new issue to address the Lint SCSS.

Thank you!

[angelenelm]

@t-will-gillis Thanks so much for the explanation! The changes to that file have been removed.