updated the slack img.

[GRK1998]

Fixes #5827

What changes did you make?

modify the Communities of Practice page, replacing the current image with the inline SVG

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

storing only a single Slack icon SVG file in the codebase and matching the appearance of the current image.

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

Visuals before changes are applied

Visuals after changes are applied

[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 GRK1998-Refactor-page-5827 gh-pages
git pull https://github.com/GRK1998/website.git Refactor-page-5827

---

Note that CONTRIBUTING.md cannot previewed locally; rather it should be previewed at this URL:

https://github.com/GRK1998/website/blob/Refactor-page-5827/CONTRIBUTING.md  

[ajb176]

PR can't be reviewed until the issue number is added. Please edit the first line of the PR to add the issue number.

[GRK1998]

Hi @ajb176 I have updated the issue number. If there are any additional changes to be made, please let me know.

[sornekian]

Review ETA: 2PM 11/22/23
Availability: Wednesday 10-5 PM

[ajb176]

Yes, I'm aware of the issue number of the pull request, I was hoping for the linked issue number

[sornekian]

Changes look simple and clean, just need that lint error fixed.

[ajb176]

Correct linked issue number still needs to be added

What was added was the issue number of the PR itself

[GRK1998]

Hi @ajb176 I have updated the issue number, and i quite did not get the lint error code so Could you please let me know what needs to be done.

[t-will-gillis]

Hi @GRK1998 - when you make changes to your PR, please remember that you'll need to re-request the reviewers by selecting the chasing arrows next to their names (I already did this):

Also @sornekian and @ajb176 Please disregard the "Lint SCSS / Lint SCSS (pull_request)" test- there is an issue with the linter that we need to correct.

[ajb176]

Tagging the original issue creator @roslynwythe

I'm seeing very different visuals in different browsers. The PR creator increased the width and height of the SVG icon from 24px to 80px. In Firefox (and whatever browser the creator is using) this seems to essentially match the current version of the website, while the 24px version looks tiny. In Safari, the 80px version looks massive, whereas the 24px looks accurate. I'd like some other people to review this, but it seems like replacing the SVG is introducing some irregularities.

Here's what I'm seeing:

Changes on Firefox:

Changes on Safari:

[ajb176]

Hey @sornekian

I noticed you reviewed the PR before the PR creator added the linked issue number. If you dug up the initial linked issue manually and cross-checked the PR with it, that's great. Otherwise, you can't properly review a PR without cross-checking with the linked issue and making sure the changes by the PR creator line up with the instructions of the linked issue.

If you haven't already, you'll need to pull the changes to a local branch and run them in docker. Please do so, view the changes in a few different browsers and let me know if what you find lines up with my comment above, or if maybe I'm mistaken.

[roslynwythe]

• @ajb176 Good job discovering the cross-browser problem. @GRK1998 I suggest that you do more research regarding browser support for svg styling and sizing methods and also see this PR Refactored Slack image with svg icon in "Getting Started" Page #5900 which addresses a issue similar to yours. One of the files changed in that PR is pages/getting-started.html and in that file, the developer created an svg element that wraps the included svg, and makes use of the 'viewBox' attribute of the outer svg element for scaling. There is also a "width" attribute on the outer svg element. Hopefully using that technique will provide cross-browser results for your issue as well. If you would be willing to add a review of that PR with some cross-browser testing and comment on your results, that would be great.

[ajb176]

@roslynwythe Yeah, using a viewbox seems like it should do the trick. I'm a little busy right now but I'll definitely look into that PR within a week.

[sornekian]

Hey @GRK1998, I don't see any revisions after @ajb176 comments with the sizing issue on different browsers. Please update.

[roslynwythe]

@GRK1998 if you are able to continue work on this PR as discussed above, please leave a comment describing your progress, availability and ETA. Otherwise, please let me know so I can make the issue available to another developer. If I don't hear from you by 1/24/2024, you will be unassigned from the issue.

[GRK1998]

@roslynwythe Apologies for the delay. I have unassigned myself from the issue. Feel free to reassign it to another developer, as I am currently working on other issues.

[jphamtv]

The developer unassigned themself from the PR and issue. I moved the issue back to the top of the Prioritized backlog.