UI/UX improvements

[JStruk]

In an attempt to improve the user experience, and look-and-feel of the app, we're overhauling the design. We're starting from the ground up and plan to completely rebuild the UI (almost) from scratch.

If you're interested in viewing the Figma doc for this new effort, feel free to connect with myself.

A non-exhaustive list of pages/areas to be improved:

• Logo (should be UtilsNinja not DevUtils)
• Navigation - the tab-style tools bar is quickly showing why it won't work. We're running out of real estate. Thinking left-side list-style navbar with a main /tools page that will show each utility as a card for easy selection
• Utility pages:
  • JSON Formatter
    • UX: more feedback for user (valid/non-valid/json erros)
    • UX: should be able to easily copy output (CMD+A + CMD+C and button to copy to clipboard)
  • JSON to CSV
  • CSV to JSON
  • JSON to PHP
  • PHP to JSON
  • Lorem Ipsum Generator
  • String Inspector
  • Date Converter
  • Base 64 Encode
  • Base 64 Decode
  • Line Sort/De-dupe
  • Color Converter

More notes:

• Layouts? Most utility pages are two textareas (input and output) with a copy button and some way of providing the user with feedback.
• Should we use a component library. Which one?
• Standardize on a font, and font sizes for desktop and mobile
• Light / Dark mode toggle
• [ ]