Design System Audit Color Swap Red

[esantiano]

Fixes #2112

What changes did you make and why did you make them ?

• changed all changeable instances of '#fa114f' to '$color-red'

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

No visual changes to the website, color variable swap should allow the website to remain the same.

Visuals after changes are applied

No visual changes to the website, color variable swap should allow the website to remain the same.

[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 esantiano-esantiano-audit-color-swap-red-2112 gh-pages
git pull https://github.com/esantiano/website.git esantiano-audit-color-swap-red-2112

[t-will-gillis]

Available: Fri 11/18
ETA: Fri 11/18

[Adastros]

Availability: 9 - 11 PM 17NOV22, 18NOV22
Review ETA: 11PM 17NOV22

[Adastros]

Good job @esantiano! You successfully changed all of the instances that had a hard coded red color with its equivalent scss variable. The changes also didn't affect the website.

One thing I want to note is that I noticed some files had other hard-coded colors that don't seem to exist in the _colors.scss file. A couple of examples are linked below. It's not within the scope of this issue but it's something I thought I should bring up to see if they should be replaced with a variable too.

website/_layouts/project.html

Line 147 in 87c6ab8

style="margin: 0; border: 2px solid #336699; box-sizing: border-box">

website/_sass/components/_getting-started-page.scss

Line 323 in 87c6ab8

color: #000000;

[Suman2795]

ETA:18/11/2022
Availability: 2 hours

[Suman2795]

Good work @esantiano ! You made suitable changes in the files as per the comment.

[t-will-gillis]

Hi @esantiano - Looks great!

Appears that all references to hard-coded #fa114f (outside of the excluded files) have been changed to $color-red per the issue. As it says in the linked issue #2112, it also looks like references to the other reds (i.e. $color-firebrick, etc.) are to the color variable name and not the hard-coded color and that all are being used.

[MattPereira]

Hi @esantiano ,

Great job replacing the instances of #fa114f with $color-red ! 👍

However, I wonder if the $color-salmon variable from _colors.scss and the .color-salmon class from _color-styles.scss should be removed since they seem to be unused throughout the code base.

UPDATE

• rgb(255, 173, 173) matches the $color-salmon #ffadad and is used for the .status-Completed class's background-color property found in _home.scss , _projects-pages.scss, and _projects.scss. Perhaps these 3 instances of rgb(255, 173, 173) should be changed to use the $color-salmon variable?
• rgb(250, 17, 79) matches $color-red: #fa114f and is used 4 times in the _about.scss file. This could also probably be swapped.

[esantiano]

One thing I want to note is that I noticed some files had other hard-coded colors that don't seem to exist in the _colors.scss file. A couple of examples are linked below. It's not within the scope of this issue but it's something I thought I should bring up to see if they should be replaced with a variable too.

website/_layouts/project.html

Line 147 in 87c6ab8

style="margin: 0; border: 2px solid #336699; box-sizing: border-box">

website/_sass/components/_getting-started-page.scss

Line 323 in 87c6ab8

color: #000000;

Hi @Adastros

good job catching those instances, its my understanding that these issues will be addressed in the future related to issue #2114.

[esantiano]

Progress: changed all changeable instances of #fa114f to "$color-red".
Blockers: lines 46-48 in how-to-set-reminders-in-slack.md seem to not be applied to code tags using the change, however this was resolved on Sunday Nov 20th meeting.
Availability: 2 Hours
ETA: 11/26/2022

[esantiano]

Hi @MattPereira

* `rgb(255, 173, 173)` matches  the `$color-salmon` `#ffadad`  and is used for the `.status-Completed` class's `background-color` property found in [_home.scss](https://github.com/hackforla/website/blob/gh-pages/_sass/components/_home.scss) , [_projects-pages.scss](https://github.com/hackforla/website/blob/gh-pages/_sass/components/_projects-page.scss), and [_projects.scss](https://github.com/hackforla/website/blob/gh-pages/_sass/components/_projects.scss). Perhaps these 3 instances of `rgb(255, 173, 173)` should be changed to use the `$color-salmon` variable?

I think this might be addressed with a new issue as well.

* `rgb(250, 17, 79)` matches `$color-red:` `#fa114f` and is used 4 times in the [_about.scss](https://github.com/hackforla/website/blob/gh-pages/_sass/components/_about.scss) file. This could also probably be swapped.

After looking at the about.scss I found that the change from #fa114f to $color-red had been incorporated.

[MattPereira]

Hey @esantiano ,

• I believe Design System Audit: Swap colors with color variables: Reds #2112 encapsulates replacing all of the shades of red that are currently hardcoded throughout the codebase including $color-salmon: #ffadad
  See screenshot

  
• Instances of rgb(250, 17, 79) ( which is equivalent to #fa114f ) in _about.scss
  See screenshot

  

[esantiano]

Hey @esantiano ,

* I believe [Design System Audit: Swap colors with color variables: Reds #2112](https://github.com/hackforla/website/issues/2112) encapsulates replacing all of the shades of red that are currently hardcoded throughout the codebase including `$color-salmon:` `#ffadad`**See screenshot**![reds](https://user-images.githubusercontent.com/73561520/204117551-4aee8933-cd51-43e7-91e2-ea9a49e9de74.png)

* Instances of `rgb(250, 17, 79)` ( which is equivalent to `#fa114f` ) in _about.scss **See screenshot**![Screenshot from 2022-11-26 19-16-15](https://user-images.githubusercontent.com/73561520/204117603-fe8864d1-a0cb-47c6-9056-5c86461692c7.png)

Hey @MattPereira

Just changed these instances - the changes were applied to the mobile site and haven't affected any of the colors used.

[MattPereira]

@esantiano good work replacing all remaining hard-coded instances of "reds" with the corresponding color variables ! 👍