Styling Refactor on Non Clickable Options of File Menu

[runningonsideprojects]

Issue Description

This specific subissue aims to address the several stylistic issues concerning the non clickable options of the File menu of the editor.

Namely:

1. Changing the text color of the non-clickable menu option to adhere to WCAG guidelines
2. Remove the on hover highlight for non-clickable menu options.

Location of the requested changes on the editor: https://editor.p5js.org/

Change Requested

WCAG guidelines state that non-text color contrast should be at least 3:1, and small text contrast should be 4.5:1. The foreground color the grayed out text is #747474, while the menu background color is #f0f0f0. This results in a color contrast ratio of 4.1:1.

• The text color should be changed to #666
• Remove the on hover menu highlight + tooltip on non clickable options

Visuals

Original (grayed out text: #747474. Regular text: #333)

Text color modifications:

• Grayed out text: #666 ($middle-dark)
• Regular text: #1C1C1C($dark)

On Hover Tooltip:

Files to change

• client/…/Header/Nav.jsx
• client/…/components/_nav.scss

PR Criteria

• Provide screenshots in ur PR of the visual changes implemented
• Provide QA steps for how reviewers can ensure your changes are made properly

Additional Resources:

• Color Combinations for Accessibility – tool developed by @izzy-synder that generates custom color palettes for components while adhering to WCAG guidelines and p5.js styling standardizations.
• Zeplin Style Link – the p5.js editor’s styling standardizations
• Preparing a Pull Request – how-to guide on creating a Pull Request
• Style Guide Documentation (WIP), best-practices guide on implementing styling changes to the codebase.

[runningonsideprojects]

@ksen0 i can work on a PR for this issue!