ER: duplicate slack icons and inconsistent locations

[ExperimentsInHonesty]

Emergent Requirement - Problem

We have 4 slack icons in the code base, all with different names and locations. We should only have one of each color, that we use everywhere.

Issue you discovered this emergent requirement in

• Inconsistent Image Locations #1900

Date discovered

2023-10-23

Did you have to do something temporarily

• YES
• NO

Who was involved

@jefflueck @ExperimentsInHonesty

What happens if this is not addressed

• redundancy in code
• hard to change out the icon for any new icon

Resources

• GitHub search for files, excluding html, yml, scss), so mostly svg, or png, etc.

List of files found

• _includes/svg/icon-slack.svg
  • What files this is used in
    • _data/navigation/social.yml
  • Where this appears on the website
    • in the social section of the footer https://hackforla.org
  • Is this Standard icon or custom (please explain if custom)
    • Standard: white (actually the svg has color but the class "icon" causes it to be white)
• _includes/svg/icon-slack-color.svg
  • What files this is used in
    • _includes/resource-card.html
  • Where this appears on the website
    • In the Resources section of most project pages, for example https://www.hackforla.org/projects/writeforall
  • Is this Standard icon or custom (please explain if custom)
    • Standard: color
• assets/images/communities-of-practice/slack-self-invite.svg
  • What files this is used in
    • website/pages/communities-of-practice.html
  • Where this appears on the website
    • https://www.hackforla.org/communities-of-practice.html
  • Is this Standard icon or custom (please explain if custom)
    • Custom: HfLA red version of slack icon
• assets/images/communities-of-practice/slack-join-meeting-channel.svg
  • What files this is used in
    • website/pages/communities-of-practice.html
  • Where this appears on the website
    • https://www.hackforla.org/communities-of-practice.html
  • Is this Standard icon or custom (please explain if custom)
    • Standard: white
    • Is on a button, navigation button.
• assets/images/getting-started/proj-4.png
  • What files this is used in
    • pages/getting-started.html
  • Where this appears on the website
    • https://www.hackforla.org/getting-started
  • Is this Standard icon or custom (please explain if custom)
    • Standard: black

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

• Figure out what images we are keeping (without changing the design of any page), eliminate duplicates.
• The icons we are keeping should be moved to the technology's folder as part of refactoring files to use the new location.
• Add content to the wiki in order to indicate that all technology logos go into the technology folder and not in a specific page.

[ExperimentsInHonesty]

@jefflueck is going to add all the

• locations where they appear on website
  • add feature label
• file its used in
• add ready for dev lead label
• unassign
• remove draft label

[ExperimentsInHonesty]

- [replace with file name]
   - What files this is used in
      - 
   - Where this appears on the website
      - 
   - Is this Standard icon or custom (please explain if custom)
      - Standard: color
      - Standard: white
      - Standard: black
      - Custom: HfLA red version of _____ icon

[jefflueck]

I finished with the audit of files in this ER.
Updated labels, and ready for Dev Lead.

[roslynwythe]

• The strategy will be to use _includes/svg/icon-slack.svg for all instances of the Slack icon.
  • First we need an issue to modify the CSS in sass/elements/_icons.scss so that icons in the resource cards will be displayed with their original color, but the default for other instances will be to fill with currentColor. See Refactor CSS so icon-slack.svg can be reused with various colors #5819
  • An issue to modify the html in _includes/resource-card.html to use _includes/svg/icon-slack.svg and to separate the code that includes the github icon from the slack icon. See Replace icon-slack-color.svg with icon-slack.svg in Resource Cards #5826
  • An issue to modify pages/communities-of-practice.html to replace the current img element with src assets/images/communities-of-practice/slack-self-invite.svg with a liquid include referencing _includes/svg/icon-slack.svg and to modify _sass/components/_communities-of-practice.scss to specify a fill color #fa114f and to update other styles so the svg is sized/aligned properly Refactor communities of practice page to replace slack-self-invite.svg with icon-slack.svg  #5827
  • An issue to modify pages/communities-of-practice.html to replace the current img element with src assets/images/communities-of-practice/slack-join-meeting-channel.svg with a liquid include referencing _includes/svg/icon-slack.svg and to modify _sass/components/_communities-of-practice.scss as needed Refactor communities of practice page to replace slack-join-meeting-channel.svg with icon-slack.svg #5829
  • An issue to modify pages/getting-started.html to replace the current img element with src assets/images/getting-started/proj-4.png with a liquid include referencing _includes/svg/icon-slack.svg and to modify _sass/components/_getting-started-page.scss as needed to adjust svg size/layout. Refactor "Getting Started" page to replace slack-join-meeting-channel.svg with icon-slack.svg #5830

[ExperimentsInHonesty]

I thought that when we last worked on this ER, we decided that we would have only one slack SVG and then adjust the color by CSS depending on where it appears (see RW's comment above #5758 (comment)). However, I still see the following images in this folder

https://github.com/hackforla/website/blob/gh-pages/_includes/svg/icon-slack.svg
https://github.com/hackforla/website/blob/gh-pages/_includes/svg/icon-slack-color.svg

[roslynwythe]

I thought that when we last worked on this ER, we decided that we would have only one slack SVG and then adjust the color by CSS depending on where it appears (see RW's comment above #5758 (comment)). However, I still see the following images in this folder

https://github.com/hackforla/website/blob/gh-pages/_includes/svg/icon-slack.svg https://github.com/hackforla/website/blob/gh-pages/_includes/svg/icon-slack-color.svg

• That is correct; we decided we would only use icon-slack.svg. I don't believe icon-slack-color.svg is used so I created Delete unused Slack svg file #6648 to remove it.

• To document the best method for reusing svgs, scaling them and changing the fill color using svg attributes, see Create wiki page: how to change the fill color of an svg #6654. I believe that concludes work on this ER.