Redesign the individual transcript page UI

[kouloumos]

The current UI of our individual transcript pages serves its purpose but has much room for improvement. Our aim is to enhance the overall user experience and aesthetics of these pages. Additionally, with the recent introduction of timestamps for each speaker's segment (example), we've noticed that their current presentation clutters the page, making it harder to read and navigate through the content.

Objectives for the redesign:

• Improve readability and navigation: Make the transcript content easier to follow for our users.
• Seamlessly integrate timestamps: We need a clever way to include timestamps that doesn't overwhelm the page or distract from the transcript text. This might involve subtle design changes or innovative ways of displaying timestamps only when they are needed.
• Metadata presentation: This information is crucial for context and we should find a more attractive and intuitive way to display it.
• Refresh the visual design: Update the UI to a more modern and user-friendly design, improving the overall aesthetics and functionality of the page.

The goal is to create a more engaging and less cluttered environment for readers, making the valuable content of each transcript stand out more clearly while maintaining easy access to the metadata and timestamps when users need them.