Fix: Non-Clickable File Menus On Hover Refactor

[runningonsideprojects]

Issue:

Fixes #4121

This PR addresses the File Menu options to ensure adherance to WCAG guidelines and to improve better UX for disabled options.

HUGEEE shoutout to @Nixxx19 for helping me fix a weird scss inheritance issue!!!!!

Demo:

Screenshots of changes in light, dark, and contrast mode

QA Testing:

1. Navigate to the home page.
2. Click on the File menu at the top left
3. Make sure u are not logged in
4. For [light, dark, contrast] mode, ensure ....

• the same menu options are disabled
• the disabled menu options have the 🚫 cursor, the background is not highlighted, but the tooltip is still there.
• active menu options still function normally

Changes:

• cursor: not-allowed; on disabled menu items
• gets rid of the background color change and text color change on disabled items on hover
• new variable button-hover-active-color that changes the active menu color on light mode to $darker ($1C1C1C)

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123
• meets the standards outlined in the accessibility guidelines