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]

Hi @sijiapitts We revised the fields we need on the toolkit page to include Technologies. Can you add that?

[sijiapitts]

@ExperimentsInHonesty Done. Here is the updated design