frontend: adds reduced motion compatibility

[vyncent-t]

Issue:

Fixes #1390

Description:

This PR addresses the motion issue which causes discomfort or system slow down for some users. It ensures that Headlamp respects the OS/browser level preference for motion while also providing a manual override setting.

Additionally, the PR explores the implementation of reduced motion preference in a Material-UI application, as per the guidelines and discussions in Material-UI's repository.

Changes:

• Implemented the prefers-reduced-motion media query to respect OS/browser level preference.
• Explored solutions for implementing reduced motion preference in a Material-UI application, referencing Material-UI discussions and guidelines.

Notes:

This implementation references the discussions in Material-UI's repository on supporting prefers-reduced-motion (#16367) and follows one of the suggested implementations for a Material-UI application (comment). Thorough testing is advised to ensure compatibility across different OS and browser settings, as well as to verify that the manual override setting functions correctly.

Enabling/Disabling prefers-reduced-motion:

• On Windows 11:

  • Navigate to Settings > Accessibility > Visual Effects.
  • Toggle the "Animation effects" option according to your preference.

• Google Chrome:

Watch this video for reference

• Click on the three vertical dots in the top right corner.
• Navigate to More Tools > Rendering.
• In the Rendering tab, scroll down and find the "Emulate CSS media feature prefers-reduced-motion" option, then toggle it according to your preference.

Command Palette Usage in Chrome Browser Tools:

The Command Palette in Chrome DevTools is a quick-access tool that allows you to run various DevTools commands. It's a handy feature for developers to speed up their workflow.

• To open the Command Palette, press Ctrl + Shift + P while in DevTools.
• Once the Command Palette is open, you can type the command you want to execute or the feature you want to access. For example, typing "Show Rendering" will filter the list of commands to those related to rendering, allowing you to quickly access the Rendering tab.
• Selecting a command from the list or hitting Enter after typing it will execute that command.

[illume]

Hi!

• Can you please git commit --amend --no-edit -s it? So, we have a Signed-off-by and the DCO action is happy.
• The file was added by accident I think: frontend/src/components/crd/snapshots/CustomResourceList.stories.storyshot

cheers,

[illume]

Thanks 👍