Modals and Forms Visual Updates

[ghislaineguerin]

Changes

Modals Update

I've been improving modals across Mathesar to ensure consistency, better usability, and adherence to design guidelines. Here's a summary of the changes and improvements:

Alignment and Spacing Issues

• Modal Headers: The prominence of modal headers has been increased to ensure balance with the footers, as there was insufficient visual weight at the top.
• 
• The modal title size is now consistent and larger than content headings. This issue was especially noticeable in the Constraints modal, where the headers inside the modal were larger than the modal header.
  
• Close Button Alignment: The close button is now correctly aligned with the start of the title in all modals.
• 
• Collapsing Headers: In Constraint modals, collapsing headers were adjusted to maintain a consistent height, regardless of whether a button is present.
• 

Styling and Contrast Issues

• Form Field Labels: Improved the contrast of form field labels to distinguish them clearly from body text.
• 
• Message Boxes: Updated the style of message boxes to have a less boxy appearance, improving the flow of content and reducing vertical separations that make content harder to scan.
• 
• Inline Forms and Descriptive Button Labels: Inline forms were used to add foreign or unique keys, and redundant titles were removed. Instead, the save button labels were updated to indicate the action, such as adding a new object.
• 

Consistency Enhancements

• Input Box Style: Ensured consistency in using boxed input groups, applying the same style across different modals, such as import modals and database creation modals.
  • 
• Modal Descriptions: Standardized the placement and presentation of descriptions.xw

Create Link Updates

The "Create Link" modal has been revised to enhance clarity and maintain consistency with other forms in the app.

• Outcome Box Update: Each outcome now has its own collapsible section containing a single, concise outcome statement. Previously, the outcome box listed all the input boxes for naming every element involved, which cluttered the interface. If the user agrees with the default outcomes, they won't need to interact with these input boxes. This change reduces visual distractions and makes it easier to review the outcomes which was the main goal for this special message box.
• Updated Labels: Labels have been revised to follow the new naming convention for new elements. For example, fields now use phrasing like "Name of new column" instead of "New column name".
• 
• 

Guidelines

https://hackmd.io/0MNSBOSoRUC0cnYEqMj9eA?edit

[seancolsen]

Looks good to me so far! I added a couple small comments.

[seancolsen]

i18n keys should be in snake_case

[ghislaineguerin]

I will update, thanks.

[seancolsen]

When you finish putting all your strings into dict.json, make sure you don't have any post-translation string concatenation like this.

[seancolsen]

This seems a little odd to me. I'm fine with changing the line height. But I wouldn't expect us to customize it specifically for paragraphs. We don't even use <p> very often in Mathesar. So I'm worried that this CSS will lead to inconsistent style.

Can you explain why you set this here?

I'd typically expect to see line-height set on a very high-level element like html and then for it to sometimes be overridden for elements like headings.

[ghislaineguerin]

The blocks of text were too tight and I was concerned about making this a global change in case it affected buttons or other elements like the pills. I will consider your feedback and try adjusting it globally.

[kgodey]

(I only looked at the PR description, not the code.)

This looks great @ghislaineguerin, very nice work! Just one small piece of feedback.

[seancolsen]

I've not thoroughly review the changes from a stylistic or aesthetic perspective because I don't expect to have strong opinions about that and I trust Ghislaine's judgement here.

But I did add some critique on the code pointing out some i18n issues.

[seancolsen]

Heads up that in c23d673 I resolved some merge conflicts with Collapsible.scss that seemed straightforward to me. I wanted to get the code updated in the branch in order to merge into the dependent PR #3805 so that I could test it.

[seancolsen]

Some more things I noticed:

• This UI was more concise before:

  Before	After

  I think the simpler version is clearer and easier to read.

• Some UI element within the Create Link dialog is not responding well to narrow viewports, causing overflow.

  

  Prior to these changes, this UI shrunk to narrow viewports quite well.

  

  Not that I think this is particularly important right now. But it would be good to trace the root cause of this change since it's possible that it's a low-level change that could have other consequences as well.

[ghislaineguerin]

@seancolsen
I agree with your review of the outcome box in the Create Link modal. My initial idea was to consolidate the actual outcomes at the top so that the user is not distracted by all the visual clutter. However, adding the help text to the input boxes didn't really accomplish that. I've been thinking more, and I've pushed a new version that aims to make the user goal of "knowing what changes" more efficient. I think we should aim to show outcomes that we feel are reasonable, and if the user wants to change them, they can interact. Otherwise, the main goal is fulfilled for most.

[seancolsen]

@ghislaineguerin cool. Is this ready for re-review then?

[kgodey]

Has my review comment also been addressed?

[ghislaineguerin]

@seancolsen Yes, it is ready now.

@kgodey Yes, It is solved because I kept the inline layout for the new column input. I've moved away from using the help descriptions inside outcomes as it fractures the outcome text. The label is now clearly differentiated from the content. See below.

[kgodey]

Looks good @ghislaineguerin but are we losing the colors for the table names?

[ghislaineguerin]

@kgodey we only had colors in the context for the Create Link dialog.

[kgodey]

Ah right, sorry @ghislaineguerin, wasn't paying enough attention.