Design a fix for the dropdown menu design for toolkit page

[sijiapitts]

Overview

During a site audit on Figma design file and on the website, we noticed that the drop-down menu design is not consistent. Each page has its own font size, margin, padding, etc.

We decide the first step is to fix the dropdown menu on the toolkit page. Afterwards, we will move on to the projects page and wins page.

• Project page issue Design a fix the dropdown menu design for projects page #3277
• Wins page issue Fix the dropdown menu design for wins page #3627

Update

The UI is completed, tested with the users, and approved as of 9/18/2022. The users believe this Toolkit page design is the most clear and easy to use. This design version has a dark background and a 3 columns layout on the toolkit guides section. The filters are on the sidebar. The filters section has the same background color as the page, and the text color is white.

10/30/2022
The design is completed, and ready for development.

Action Items

• Design for web version
• Design for mobile version
• Review with the design lead

Resources/Instructions

Hack for LA Team project design file
Figma work file
Toolkit page content

Final Design

https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=1548%3A1967

[ExperimentsInHonesty]

Here is the order for design

1. Status: Active, Draft, Depreciated
2. Practice Area
3. Tools
4. Resource Type
5. Technologies
6. Source
7. Contributors

[sijiapitts]

The design is completed, and ready for development.

[ExperimentsInHonesty]

The design is completed, and ready for development.

This is probably a medium size issue for front end

[blulady]

• So if I am reading this correctly, you want this issue completed before issue Fix the dropdown menu design for projects page #3744, so the instructions to create the CSS for the drop-down menu belongs in the issue that will correspond to this issue and not in Fix the dropdown menu design for projects page #3744

[ExperimentsInHonesty]

@blulady

• Both Fix the dropdown menu design for projects page #3744 and the new issue you will create from here will have the dependency Create filter_dropdown.scss File in Elements Folder #3256

• Next step, create the issue and add the dependency

#### Dependency
- #3256

[blulady]

• see Fix the dropdown menu for toolkit page #3985