Design changes

[tlmii]

@kvenkatrajan and I took some questions to the design folks about the header of the dashboard, and we came away with multiple suggestions for tweaking and improving the layout. This PR is the result of those efforts:

In no particular order:

1. A new logo for the header that includes a little bit of depth. It was decided that in the header, this was a "product icon" and didn't need to maintain the flat appearance of the rest of the site as long as it was consistent in color, etc.
2. A new AppBar component to replace the menu on the left side. This is similar to what you see in Teams, office.com and other sites/apps using Fluent UI. This also gives us back some horizontal screen real estate, something that we were lacking especially on the resources page. I attempted to make the new component flexible so it could be used in other scenarios and (if they want) eventually ported to the component library. But I focused it on our needs first, so there might be some inflexibility there.
3. A slightly tweaked color scheme. The designers gave us some new color tokens to work with and we did our best to match them while sticking with the FAST color recipes/adaptive color system.
4. A new header layout - the logo is aligned with the icons in the app bar while the text is separated a bit. The text now says ".NET Aspire - {app name}" instead of "{app name} dashboard".

One thing to discuss is the naming of the menu items. "Structured logs" and "Console logs" made the AppBar rather wide, so I trimmed it to just "Structured" and "Console". Though that seems odd. Curious about thoughts from others what we can do there (would it help to have the tooltip be "Structured logs" even if the visible text just said "Structured"?).

I'm also not very fond of the way the Console Logs page looks now. But that can be tweaked separately.

Note: we're not in a rush to take this for Preview 3 before the snap today. Any changes from this will be for early in preview 4.

Screenshots in the second post

Microsoft Reviewers: Open in CodeFlow

[tlmii]

Some screenshots:

Some gifs of the hover and click effects:

[davidfowl]

We don't want .NET Aspire in the title. The dashboard shouldn't have that branding (especially since it's decoupled)

[drewnoakes]

We don't want .NET Aspire in the title. The dashboard shouldn't have that branding (especially since it's decoupled)

Also, when the dashboard runs without a resource service, it defaults to an application name of "Aspire", which would read funny here. Could change that behaviour though.

[tlmii]

We don't want .NET Aspire in the title. The dashboard shouldn't have that branding (especially since it's decoupled)

Taking that to its logical conclusion then, we shouldn't have the icon either?

Also, it was discussed that we didn't want it to say dashboard, because that's obvious. Which just leaves the name of the app by itself, which is a little odd (and as Drew just mentioned, at the moment would effectively default back to this same thing)

[drewnoakes]

This looks really great. Congrats.

Looking through the screenshot, I wonder why we show console logs with a dark background in light theme. Did we ever consider dark text on a light background for that case?

[drewnoakes]

Can we style scrollbars in dark theme to be dark?

[tlmii]

Looking through the screenshot, I wonder why we show console logs with a dark background in light theme. Did we ever consider dark text on a light background for that case?

I think it was mostly that no one ever asked for it. It wouldn't be too hard - the colors for the console logs display are mostly separated so we could have light variants

[davidfowl]

Taking that to its logical conclusion then, we shouldn't have the icon either?

Icon is fine. Just leave out the .NET Aspire (like it was before).

[eerhardt]

Taking that to its logical conclusion then, we shouldn't have the icon either?

In a perfect world, it seems like the icon would be configurable by the developer.

[DamianEdwards]

In a perfect world, it seems like the icon would be configurable by the developer.

Yes but for now let's capture any dashboard extensibility proposals separately.

[tlmii]

Taking that to its logical conclusion then, we shouldn't have the icon either?

Icon is fine. Just leave out the .NET Aspire (like it was before).

OK, so then what about "{projectname} dashboard" (like it was before) vs "{projectname}" since that was a recommendation also?

[JamesNK]

Overall I like it. I'd like some tweaks to make it bigger.

1. Increase width of the sidebar to match teams. Increase icon size to match teams. Theirs look like 28x28.

2. Add padding between content and the navigation. There is none at the moment.

[davidfowl]

Is this for p4 or 3?

[kvenkatrajan]

For p4. We put the PR out so we can begin review and merge early next week

[tlmii]

1. Increase width of the sidebar to match teams. Increase icon size to match teams. Theirs look like 28x28.

The sidebar grows with the content (to a point) to try to allow for localization without too much truncation. The teams bar is 68px wide and we're at ~62 with the current text. I can try to add a min width too.

The icons are roughly the same size as the teams icons already - averaging about 20x20 (our actual svgs are supposedly 24 but that's because they all have padding in them, the paths themselves are smaller).

The equivalent bell icon from our set at 28 is larger than what they have: and actually I just realized the one at 24 is very close in size to theirs:

Not saying we can't make the icons larger if we want. Just saying we are pretty close to the same as Teams right now.

2. Add padding between content and the navigation. There is none at the moment.

I did play around with this some originally but didn't really like how it looked - it always seemed cleaner to have the grid lines and the console displays be tight on both left and right as long as the text was never all the way to the left. But I can give it another look and post some screenshots. There's some places (like the totals footer on structured logs) where we need some padding regardless.

[JamesNK]

The teams bar is 68px wide and we're at ~62 with the current text. I can try to add a min width too.

👍

Teams also has some vertical padding on each menu item. Aspire's menu feels cramped compared to it.

The icons are roughly the same size as the teams icons already - averaging about 20x20 (our actual svgs are supposedly 24 but that's because they all have padding in them, the paths themselves are smaller).

You're right. I measured the size in px on my computer and saw about 26px in size, but that's because my desktop is at 120% scale. I measured our icons and they're the same.

[tlmii]

Added a min-width for the AppBar of 68px, which matches Teams (technically they do 6.8rem, but have different font sizes, so at least for the moment I just went with the equivalent pixels).

Also removed ".NET Aspire - " from the header text.

[tlmii]

Can we style scrollbars in dark theme to be dark?

We can, looks fairly simple by setting the color-scheme but it seems there might be some interaction with how we detect the system color scheme, so I want to do a little more testing and can do that in a separate PR.

[JamesNK]

I'd like to see the menu item height increased. It feels cramped.

Overlay of teams UI for comparison:

[tlmii]

Set a fixed height for the items that matches Teams (56px - similar story about rems here too), adjusted some of the flex gaps, alignment, etc to more closely match teams.

[kvenkatrajan]

If the code has been reviewed, how do we feel about merging this and opening smaller issues for tracking alignment/other tweaks?

[JamesNK]

Looks good to me.

I like the design, but I still think there isn't enough padding around the content. Can merge as is and get it in front of more people. Feedback will come up organically if changes are required.

[tlmii]

Thanks. Yeah, that's what I was expecting. Need to get it in people's hands and we'll get more feedback. As long as the overall direction is fine (which it seems like it is) then the rest we can address later (since we're early in Preview 4 timeframe)