Replace "X" on modals with Close button

[ggeisler]

The close icon on the UV modals doesn't feel quite right; it gives the viewer a bit of an unsophisticated feel:

We recommend replacing the current close icon with a close button in the modal itself:

Styling the close button with the Bootstrap styling for btn-default should work fine.

Minor related point: I'd give all the modal buttons a border-radius of 4px or so, just because there are already a lot of sharp corners used in the modal.

[mejackreed]

We think the approach here is to modify Dialogue.ts locally to change how the markup is rendered (and then of course modify styling?). $closeButton seems to be the relevant thing.

[mejackreed]

@aeschylus and I have paired looking into this, and it appears more complex than originally thought. The intent here is to not only add the "Close" text but also change the location of this button. This html syntax would need to be overridden differently in each UV class that uses this. Most of these are *Dialougue classes and the change likely wouldn't be global.

A few ways ahead here:

• make local modifications and now support a local fork ( we don't like this option )
• Make the location of the close box configurable
• Move the location of the close box entirely

What is the most viable way?

[aeschylus]

Part of what complicates this is the inability to access the UV's own model of the interface at runtime, or to supply an override class through an externally-maintained set of "plugins", or override objects. The typescript toolchain closes us out of the object hierarchy.

However, if there is a way to do an override (we'd have to hear from @edsilv on that I think), that is a 4th option.

[aeschylus]

The base Dialogue has had a buttons container added and a config option has been added to place the close button in this container. We will need to confirm that the styling and events are working in the following inheriting classes (for personal reference/as a checklist):

• [x] Settings Dialogue
• [x] Download Dialogue
• [x] Auth Dialogue
• [x] Clickthrough Dialogue
• [x] Help Dialogue
• [x] External Content Dialogue
• [x] Login Dialogue
• [x] Share Dialogue
• [x] More Info Dialogue
• [x] Restricted Dialogue

Also, adding the close buttons to each of these might imply changes to the styling of other elements around them, like the more info link in the Download dialogue.

[aeschylus]

@edsilv has said we can submit this as a PR to v3 with the config option, then it can be selected in our theme.