Complete refactor/standardization of all buttons within Join Us 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.

Action Items

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

1. • Update line 64 of website/pages/join-us.html with HTML from the Reccomendation column
2. • Update line 78 of website/pages/join-us.html with HTML from the Reccomendation column
3. • Update line 80 of website/pages/join-us.html with HTML from the Reccomendation column
4. • Update line 82 of website/pages/join-us.html with HTML from the Reccomendation column

• add the follow CSS code on line 39 of website/_sass/elements/_buttons.scss

   .btn--default {
     align-items: center;
    display: flex; 
    justify-content: center;
    margin: 5px 0;
  }
  

• add .btn--default class to line 64, 78, 80, and 82 of website/pages/join-us.html (within the <a> tag
• Confirm after the recommended edits that the Action of each button works as intended within the Communities of Practice/Join Us/Program Areas page
• Create a Pull Request with the proposed changes to the button

Resources/Instructions

Google Sheets - CSS Standardization Buttons
Link to the entire audit: #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 this template (even if you have a pull request)

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, August 24, 2021 at 12:03 AM PST.}

[mehmehmehlol]

1. Progress: I have finished all the requirements on the issue and have created a pull request.
2. Blockers: The buttons did not look the same after refactoring. Details in the pull request.