Projects Pages: Update Project Status Options and Label Color

[kimberlyvaldez07]

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

• New Project Status Label
  • Create a new status label called 'Closed'
• Update status label color palette
  • Keep 'Active' as $color-lightgreen: #BBFFBB
  • Keep 'On Hold' as $color-lightyellow: #FFFF97
  • Create two new colors for
    • 'Closed' status in /_sass/variables/_colors.scss

      // Grays
      $color-lightgray: #D9D9D9;
      

    • 'Completed' status in /_sass/variables/_colors.scss

      // Blues
      $color-paleblue: #B8D9FF;
      

  • Update colors in their status variables in the pages the sass files they appear in ¹ and /_sass/components/_projects-page.scss and /_sass/components/_home.scss from

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

    to

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

• Update the .js file /assets/js/current-projects.js to include the new status
  • change from

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

  • to

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

Reason: We are adding a 'Closed' project status to accurately reflect retired projects that did not make it to completion. This is different from 'completed' projects status. In the process of adding another color, we realized "closed" should not be red, so we are changing some of the colors in addition to adding a new color.

Action Items

• Review the Details section above
• Verify the changes by viewing the following in your local environment with Docker and include before and after screenshots with your pull request:
  • Hack for LA website project page ²

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

Here is an example

Ignore the shape of the labels. This is an example of what it should look like.

Footnotes

1. https://github.com/hackforla/website/blob/gh-pages/_sass/components/_projects.scss ↩

2. https://github.com/hackforla/website/blob/gh-pages/_sass/variables/_colors.scss ↩

[github-actions]

Hi @kimberlyvaldez07.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:

• Feature, Size

NOTE: Please ignore this comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels