Fix the dropdown menu design for projects page

[blulady]

Dependency

• Create filter_dropdown.scss File in Elements Folder #3256

Overview

During recent audits, the team realized that the drop-down menu design is not uniform. In an attempt to unify all drop-down menus the design team has redesigned the drop-down menu. This issue is to implement the new uniform design specifically on the projects page.

Action Items

• Update the drop-down menu on the projects page to reflect the design in Figma
• The goal is to make this component reusable on multiple pages with different filters specified
• Take into account accessibility of navigating the filters with keyboard -see resources below
• Make the appropriate changes to the CSS, HTML, and JS as you need to
• Note: The final design shows a "Search by keword" function, but you can ignore this for now, as this will be worked on in a different issue.

Resources/Instructions

• for reference a link to related design issue: Design a fix the dropdown menu design for projects page #3277
• in the elements folder you should find _dropdown_filters.scss and that is where you will want to make the changes to the CSS
• in the _includes page you should find the current-projects.html
• in the assets/js folder you should find project.js
• Final design

Design Systems
Accessibility Resources
Standardized Components Wiki specifically:

• Keyboard Accessible - sufficient techniques
• Using CSS when component receives focus - Focus visible
• Navigable Guideline 2.4
• Focus Not Obscured