Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Restyle error ui and reconnection ui #1527

Merged
merged 6 commits into from
Jan 4, 2024
Merged

Restyle error ui and reconnection ui #1527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
11ea647
restyle, use common colors for error ui and reconnection ui
Dec 29, 2023
c9304a8
remove single :is
Jan 3, 2024
b14c039
remove unnecessary id
Jan 3, 2024
f1e836e
update dark theme background color, explicitly use colors
Jan 4, 2024
43b1461
move reconnect styles to app.css
Jan 4, 2024
44a6076
slightly lighten reconnection ui background in dark theme
Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/Aspire.Dashboard/Components/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,14 @@
<!-- Make the body background dark if dark mode will be enabled to prevent a flash of white
before fully rendered. This value is from --neutral-fill-layer-rest, but that custom
property isn't available at this point. -->
<style>@@media (prefers-color-scheme: dark) { body { background-color: #272727; } }</style>
<style>
@@media (prefers-color-scheme: dark) {
body {
background-color: #272727;
}
}
</style>

</head>

<body class="before-upgrade">
Expand Down
11 changes: 10 additions & 1 deletion src/Aspire.Dashboard/Components/Layout/MainLayout.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
#blazor-error-ui {
background: lightyellow;
background: var(--highlight-bg);
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
Expand All @@ -8,6 +8,11 @@
position: fixed;
width: 100%;
z-index: 1000;
color: var(--error-ui-foreground-color);
}

#blazor-error-ui a {
color: var(--error-ui-accent-foreground-color);
}

#blazor-error-ui .dismiss {
Expand All @@ -17,6 +22,10 @@
top: 0.5rem;
}

#blazor-error-ui .reload {
color: var(--error-ui-accent-foreground-color);
}

::deep.layout {
height: 100vh;
width: 100vw;
Expand Down
20 changes: 20 additions & 0 deletions src/Aspire.Dashboard/wwwroot/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ fluent-toolbar[orientation=horizontal] {
--badge-color-error: var(--foreground-on-accent-rest);
--foreground-subtext-rest: #5D5D5D;
--foreground-subtext-hover: #6C6C6C;

--error-ui-foreground-color: #131313;
--error-ui-accent-foreground-color: #1d00d0;
--reconnection-ui-bg: rgb(255, 255, 255);
}

[data-theme="dark"] {
Expand All @@ -42,8 +46,24 @@ fluent-toolbar[orientation=horizontal] {
--error: #F8040A !important;
--foreground-subtext-rest: #8D8D8D;
--foreground-subtext-hover: #A1A1A1;

--error-ui-foreground-color: #000000;
--error-ui-accent-foreground-color: #512bd4;
--reconnection-ui-bg: #D6D6D6;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like this is probably still too bright. Did you update the screenshots in your PR description with the end state here? I'd expect the bg color to be largely unchanged, just an overlay that darkens what's there and makes is easier for the error content to float over the top.

Copy link
Member Author

@adamint adamint Jan 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@drewnoakes we are not able to make it any darker with the current foreground colors. This bg is the exact limit - note that the actual visible color is darker due to the opacity

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, but the foreground colours are for light mode.

The thing I'm trying to avoid is flashing a large bright area in users' eyes, when they're in dark mode. A dark background with light foreground should achieve that, and meet contrast ratio requirements.

}

#components-reconnect-modal :is(h5, p) {
color: var(--error-ui-foreground-color);
}

#components-reconnect-modal a {
color: var(--error-ui-accent-foreground-color);
}

#components-reconnect-modal {
background-color: var(--reconnection-ui-bg) !important;
}

.datagrid-overflow-area,
.parent-details-container {
/*
Expand Down