collectivenectar
commented
1 year ago Aesthetic Changes:
I'm bringing in react-bootstrap to help with accessibility and saving time, so there will be an aesthetic change towards consistency, ease of use, maintained functionality across browser types, and to a lesser degree, towards leaving an opening for the other aspects of the app that have yet to be built, like the audio player, the user dashboard, web3 storage, etc.
Because of that, there's research that needs to be done on this functionality and on the demographic end user I am aiming for in order to help guide the aesthetic vision further.
Technical Changes:
/src/components /src/styles /src/index.scss /src/App.jsx /package.json a few other files in /src/components/ like maybe App.jsx
SASS Integration:
Add Mixins, Variables, and Globals to improve maintainability and consistency. The Global SASS file will play a significant role in defining the website's overall style.
Redesigned Components:
Soundslip 'Cell' Components:
Transform the soundslip 'cell' components to adopt a tabular format, enhancing metadata presentation and readability while preserving the existing functionality.
Search Bar:
Redesign the search bar, improving its look and layout while maintaining its existing functionality.
User Profile/Home Page:
Modify the private and public tables to create a comprehensive list with user-friendly filters, eliminating the need for separate tables. This redesign prepares the UI for future features, such as web3 file storage, NFT metadata, and private wishlists/playlists.
Upload Page Styling:
Completely overhaul the styling of the upload page, simplifying its design and aiming for a one-page layout that enhances user experience during the upload process.
Starting v2.0 off by cannibalizing everything I can use from v1.0 in the UI department. This should be mostly no problem since I'm migrating to Next.js, but I am also doing a complete redesign, so I may still unpack and rearrange quite a lot of the architecture in order to accomplish that long term.
Main things I want to accomplish are:
1) Using imagery uploaded to the wiki and project, redesign the site using those themes and elements. (linked later) 2) Keep in mind the other components that will eventually be added, and try to think how I can make the styling more global. 3) Integrate more data visualization and audio visualization - but make it friendly to the smaller devices, too.
This Issue will track all the other design related issues for my convenience: