Outline of modal dialogs doesn't stand out #7187
Comments
|
Yah I agree we could add an outlike stroke or a drop shadow to make it stand out more. We've done drop shadows on modal dialogs before:
If we go the stroke route, i'd suggest gray-600 to match the sidebar icons. Could go thinner with the stroke also
|
|
Thanks, I will try this - as you said, needs to be thin/minor, just enough so it's a defined edge. |
|
I tried gray-600 (#b4b4b4) and it seemed really light, then noticed that's not what you used in the image above. :) It looks like it is maybe #4d4d4d, which is closer to charcoal-400 (#4a4b4f). I still found that a touch bright, so I tried one darker - what do you think of this? Current: 
With 1px charcoal-500 border: 
|
ah yes it was charcoal-400 🙈 sorry for the typo. The 500 looks great! Boarder is a great thickness too. +1 from me |
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. It is not possible to use bg-opacity-60 with colors from the registry due to Tailwind CSS post processing order. I looked at several other options (defining colors as r g b instead of hex, trying several css functions, but the simplest is just to use direct styling instead. Fixes containers#7187. First minor part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. Also fixes a nit: the background should have the default cursor and not a button cursor. Fixes containers#7187. First minor part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. Also fixes a nit: the background should have the default cursor and not a button cursor. Fixes containers#7187. First minor part of containers#7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Adds light mode colors for Modal dialog along with a defined 1px border so that it is not washed out. Initial light mode color values are taken from other mappings in the registry. Also fixes a nit: the background should have the default cursor and not a button cursor. Fixes #7187. First minor part of #7184. Signed-off-by: Tim deBoer <git@tdeboer.ca>
Is your enhancement related to a problem? Please describe
See #7180 for an example of switching from our older/more hardcoded dialog styling to the correct design. I'll admit there isn't much difference, but to me the old style had just a little bit of an edge on the dialog so you could see there is a panel there, but the correct design blends into the background more - black on black. To me it looks like the menu is now just floating instead of being on a quick pick panel.
Describe the solution you'd like
I've noticed this on regular dialogs, but with the size it is still clear that you're looking at a dialog. IMHO in both cases it would look better and stand out from the background a little more if there was a tiny border, even in dark grey.
FYI to @ekidneyrh
Describe alternatives you've considered
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: