Complete refactor/standardization of all buttons within Communities of Practice/Program Areas Page

[abuna1985]

Overview

We need to refactor for buttons within the Home page from the recommendations in the CSS standardization spreadsheet (resource below) so that we have a consistent button appearance through the HfLA site.

Note: The buttons should have the same length and width after the changes. if it is not, please add CSS styling to make sure they match.

Action Items

• Make the 3 recommended edits for the buttons from the spreadsheet below (2 files will be updated)

1. • Update line 68 of website/pages/communities-of-practice.html with HTML from the Reccomendation column
2. • Update line 70 of website/pages/communities-of-practice.html with HTML from the Reccomendation column
3. • Update line 87 of website/pages/program-areas.html with HTML from the Reccomendation column

• Confirm after the recommended edits that the Action of each button works as intended within the Communities of Practice/Join Us/Program Areas page
• Confirm the button length/width within the page are the same after changes. If not refactor CSS (this can be accomplished with custom padding for the specific button element or length/width CSS properties)
• Create a Pull Request with the proposed changes to the button

Resources/Instructions

Google Sheets - CSS Standardization Buttons
#1921

[github-actions]

Hi @abuna1985.

Good job adding the required labels to this issue.

Just a friendly reminder to also move the issue into the "New Issue Approval" column under the Project Board. For more info on that, check Github's documentation here.
Thanks!

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[github-actions]

@mehmehmehlol

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 14, 2021 at 12:02 AM PST.}

[github-actions]

@mehmehmehlol

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 21, 2021 at 12:02 AM PST.}

[github-actions]

@mehmehmehlol

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 28, 2021 at 12:02 AM PST.}

[Zhu-Joseph]

Progress: Reviewing CSS sheet and code
Blockers: None
Availability: Random hours here and there
ETA: End of week

[abuna1985]

@Zhu-Joseph I have added an action item. My apologies for not being clear with the issue. If you need assistance creating styling for the buttons, feel free to reach out to me.

[github-actions]

@Zhu-Joseph

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 12, 2021 at 12:02 AM PST.}