improvement: Make dialogs look more like dialogs

[lipis]

Preview: https://excalidraw-git-modal.excalidraw.now.sh

Before

After

---

TODO

• Border
• Border radius
• Box shadow
• Center aligned
• Small Caps
• Title background
• Mobile view
• Close button
• Dark mode

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/excalidraw/excalidraw/daco4s4a6
✅ Preview: https://excalidraw-git-modal.excalidraw.vercel.app

[dwelle]

I'd maybe add it to Islands in general? E.g. the Stats island could use one.

Btw, why do we add overflow-y: scroll to modals by default? Kinda ugly:

[lipis]

I'd maybe add it to Islands in general? E.g. the Stats island could use one.

Let's experiment with Islands in another PR... they have a shadow so they seem fine.

Btw, why do we add overflow-y: scroll to modals by default? Kinda ugly:

Removed the scroll..

[dwelle]

Trying out box-shadow instead of border (as discussed in chat):

border:

shadow:

If the shadow is too big, we can decrease. IMO looks more discrete.

Anyway, the border was also causing some overflow/scrollbar issue on body for smaller viewports (we'd have to investigate).

[j-f1]

Needs some tweaks on mobile

[dwelle]

Let's drop the title background. It adds too many visual boxes. Without it looks better and cleaner:

[lipis]

Updated.

[j-f1]

Why the small caps for the title? I feel like the design on master for the title is mostly OK already (except maybe for centering the title)

[lipis]

Why the small caps for the title? I feel like the design on master for the title is mostly OK already (except maybe for centering the title)

It made more sense with the title background.. and it was too big (h2).. but still I kind of like it to be a bit different from the rest of the dialog.

[dwelle]

I have a strange fetish for small caps titles as well, but what do I know.

@lipis btw, I meant for the box-shadow to replace the border. IMO the border is too strong and doesn't add much value on top of the shadow.

[lipis]

@lipis btw, I meant for the box-shadow to replace the border. IMO the border is too strong and doesn't add much value on top of the shadow.

Yeah, I know.. I think it makes it sharper and the shadow is not that visible in the dark mode.. I tweaked the colors are bit.

[ad1992]

Suggestion: I think this should be an improvement instead of a feature as it makes the existing feature better.

[dwelle]

Ok, looks good!