Change mobile menus on Toolkit page

[kristine-eudey]

Overview

We need to adjust the mobile menus on the Toolkit page so that users are only able to select a single practice area at a time in order to simplify development. We also need to adjust styling so that the dropdown menus match those used elsewhere on the site in order to follow our design system and provide a consistent user experience.

Action Items

• Duplicate current Toolkit mobile dropdown menu in Figma in order to work on a new copy.
• Remove checkboxes so that user only has ability to sort by one practice area at a time.
• Remove red background from selected practice area so that menu matches other mobile dropdowns used across the site, for example those here on the Projects page
• Create designs showing each:
  • The initial/empty state of the dropdown when a users first lands on the page
  • The dropdown menu a user selects from
  • The active state when a user selects a practice area to sort by

The current Figma design that requires the above listed changes:

Resources/Instructions

Figma: Design System / Dropdown menus
Figma: Toolkit Page / Mobile

[github-actions]

Hi @kristine-eudey.

Good job adding the required labels to this issue.

Just a friendly reminder to also move the issue into the "New Issue Approval" column under the Project Board. For more info on that, check Github's documentation here.
Thanks!

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[github-actions]

@ktlevesque19

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 28, 2021 at 12:02 AM PST.}