Projects Pages: Update Project Status Options and Label Color #8776

Prerequisites

1. Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our Getting Started page and attend an onboarding session.
2. You have already read our How to Contribute to Hack for LA Guide.

Overview

We need to add a new project status option for "Closed" projects and a new status label color scheme to ensure accuracy and distinction between the projects lifecycle.

Details

We are adding a "Closed" project status to accurately reflect retired projects that did NOT make it to completion. This is different from the "Completed" project status. Additionally, we are updating the color scheme by adding a color for the "Closed" status and changing the "Completed" status from red to blue.

Ignoring the shape of the labels, this is an example of what the colors should look like:

Action Items

• Review the Details section above

• Add the new "Closed" project status label by updating statusList in assets/js/current-projects.js¹ from:

  const statusList = ["Active","On Hold","Completed"]
  

  to:

  const statusList = ["Active","On Hold","Completed","Closed"]
  

• Update the status label color variables for the "Closed" and "Completed" labels

  • Navigate to _sass/variables/_colors.scss ²

  • For the "Closed" status label, underneath the // Blacks, Greys, White section add the variable $color-mediumlightgrey: #D9D9D9:

    Update the following section from:

    // Blacks, Greys, White
    ...
    $color-mediumgrey: #cccccc;
    $color-lightgrey: #ededed;
    

    to:

    // Blacks, Greys, White
    ...
    $color-mediumgrey: #cccccc;
    $color-mediumlightgrey: #D9D9D9;
    $color-lightgrey: #ededed;
    

  • For the "Completed" status label, underneath the // Blues section add the variable, $color-paleblue: #B8D9FF:

    Update the following section from:

    // Blues
    $color-midnightblue: #173567;
    $color-darkroyalblue: #01548a;
    $color-blue: #046afa;
    ...
    

    to:

    // Blues
    $color-midnightblue: #173567;
    $color-darkroyalblue: #01548a;
    $color-blue: #046afa;
    $color-paleblue: #B8D9FF;
    ...
    

• Implement the updated variables by navigating to the three following files:

  • _sass/components/_projects.scss³

  • _sass/components/_projects-page.scss⁴

  • _sass/components/_home.scss⁵

  • Update the "Completed" status class and create the "Closed" status class for each of the above files from:

    .status-Completed {
      background-color: $color-salmon;
    }
    

    to:

     .status-Completed {
       background-color: $color-paleblue;
     }
    
     .status-Closed {
       background-color: $color-mediumlightgrey;
     }
    

• Verify the changes by viewing the following in your local environment with Docker and include before and after screenshots with your pull request:

  • Visit the Hack for LA website project page on localhost ⁶
  • To view and test the "Closed" label, select a project that is currently displayed on the website. Temporarily change the status: line of that project's projectname.md file in the _projects folder to status: Closed in your local copy of the repo only.
  • Take before and after screenshots of that project's label on the Projects page, and include them in your PR.
  • Change the status: line back to its original value, then run git status and confirm that the project file is not listed in your changes, so the test edit isn't committed.

Instructions for Merge Team

• After this issue is closed, mark Update Project Profile: Write for All™ #8751 'ready for prioritization' and remove the 'Dependency' label
• After this issue is closed, mark Update Project Profile: Spare #8752 'ready for prioritization' and remove the 'Dependency' label

Resources

• This issue needs to be completed in order to execute and complete
  • Update Project Profile: Spare #8752
  • Update Project Profile: Write for All™ #8751