General styling updates

[kgodey]

Problem

Currently, we've been focusing Mathesar design work on functionality and user interactions. The visual style is pretty basic and should be improved.

Proposed solution

We should update the design that we have for Mathesar so far with improved visual styles. There aren't a lot of hard requirements, and this issue involves taking some time to focus on how Mathesar looks.

The solution requires the following aspects of the UI to be defined:

• The different themeable attributes that can be modified for the theme (e.g., background color, table borders)
• UI layout definitions: Define how the structure that supports the interface components should be styled and how they should behave in different states and resolutions (e.g., visible, hidden, minimized)
• UI component definitions: Define how the various interactive components should look like and behave in different states (e.g., empty, active, error)

Additional context

• More color and contrast would be great!
• We should design Mathesar to be theme-able in the future so that people can change the colors for a different look.

Components to style

• Top navigation
• Table and Table Toolbar
• Schema and Database Pages
• Data Explorer
• Record Page
• Data Import
• Table Inspector
• Icons and Buttons
• Actions Pane
• Record Selector

[kgodey]

We plan to do this after the design for the 11. User Management milestone, so marking as blocked until then.

[ghislaineguerin]

@kgodey, I've added the list of placeholder issues that we will need to address to complete the app's styling. Please let me know if it makes sense.

[kgodey]

@ghislaineguerin I assume each of these is for redesigning that particular element. It looks good to me. I assume we'll also be making further changes once we add new features.

Things that I don't see here (but may be covered in other items that I'm not noticing):

• Theme design (picking colors for themes)
• Modals (e.g. the table constraints modal)
• The table import confirmation page
• Data type specific styling (e.g. datepicker, tabular figures)
• Picking fonts

Do you want to turn this into a meta-issue and create sub-issues for each of the issues so you can tackle them one at a time?

[kgodey]

I'm going to close this issue since we're covering this the various "demo readiness" issues like #1604.