New icon!

[stmoy]

Description

Fixes #374

Motivation and Context

How Has This Been Tested?

Built and run locally

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

[marcelwgn]

The new icon looks awesome!

However, in start menu, there is still the white monochromatic icon of the app, is that expected?:

Also, was there a specific reason to remove the blue background color? Most other MS apps use a hard coded color and not the accent color.

[mdtauk]

Not sure the shadowing and shading on the icon's layers - matches the ones used on other Microsoft icons. Has this design been sent to the Icon design team for their approval?

The design is nice and simple, so makes sense coming from the previous logo. :)

[salmanmkc]

Looks great!

[mdtauk]

A quick idea of how more Fluent shading and shadows would look on the design.

[stmoy]

Thanks for the feedback, y'all.

However, in start menu, there is still the white monochromatic icon of the app, is that expected?

This is a caching issue and should clear up after a little while. You could also try manually uninstalling the app and reinstalling it. I was seeing this for a little while too, but it seems to have fixed itself this afternoon.

Also, was there a specific reason to remove the blue background color? Most other MS apps use a hard coded color and not the accent color.

This was requested by @niels9001 in #374. The blue color of the Gallery didn't have a significant meaning or brand, so that's why I removed it.

Has this design been sent to the Icon design team for their approval?

As the owner of the XCG app, I personally think it's the most important app in the world 😉 But since it's just a small sample app written by the WinUI team, the icon folks don't have the bandwidth to review this asset.

A quick idea of how more Fluent shading and shadows would look on the design.

Thanks for putting this together - I like the lighting and shadows. However, the design in this PR maintains consistency with @niels9001's original design, so that's the one I'm going with.

[niels9001]

@stmoy Looks great :)!!!

One minor comment: could we increase the blurradius of the background shadow a bit more for the tile images so it fits in a bit more with the other Fluent icons? I think one of the icon designers could help there (Mike was on the Windows Insider podcasts talking about icons, maybe we can reach out to him https://twitter.com/MsyndicateD?)

[mdtauk]

@stmoy Looks great :)!!!

One minor comment: could we increase the blurradius of the background shadow a bit more for the tile images so it fits in a bit more with the other Fluent icons? I think one of the icon designers could help there (Mike was on the Windows Insider podcasts talking about icons, maybe we can reach out to him https://twitter.com/MsyndicateD?)

This was what I was talking about in my earlier comment. The icon shadowing and shading does not follow the Fluent icons. I used the values included in the WinUI Figma design kit.

The gradient of the colour should be from Top Left to Bottom Right.

On Windows the Icons do not include the extra bevelling, however they do on Android and iOS, so that is not a problem.

[stmoy]

Gotcha, thanks for the help @mdtauk.

Thoughts on this?

I'm still having a bit of trouble with the shadow. The difficulty is that the colors for the icon are very close to the default accent color - the reason I "hardened" the shadow was to help ensure that the icon itself was visible in all the blue. The shadows shown here have been modified from the original submission but I don't want to regenerate all of the assets yet.

[mdtauk]

You could increase the contrast if you are worried about the blue's visibility. But not everyone uses the default Microsoft blue Accent Color. Eventually of course, the Live Tiles will be using Acrylic, which will help.

You are also missing the drop shadow that appears below the logo.

These are example values taken from FluentUI and the Figma design kit.

.ms-depth-64 {
    box-shadow: 0 25.6px 57.6px 0 rgba(0,0,0,.22), 0 4.8px 14.4px 0 rgba(0,0,0,.18);
}

Shadow 64px

_Shadow 1_                        _Shadow 2_
Blur: 57.6                        Blur: 14.4
X: 0                              X: 0
Y: 25.6                           Y: 4.8
Colour: Black                     Colour: Black
Opacity: 22%                      Opacity: 18%

The lightest blue area is #50e6ff top left - #29b0ea bottom right

Medium blue is #28afea - 0a86da

Dark blue strip is #0669bb - #0f5195

[stmoy]

Third try's a charm? @mdtauk

EDIT: Hrm, maybe not. It looks like the VS asset generator is making the brackets look jagged. Investigating...

EDIT EDIT: All better with latest commit.

[marcelwgn]

Since the office apps are now using a grey for their background, maybe we should do the same? 🤔

[mdtauk]

Since the office apps are now using a grey for their background, maybe we should do the same? 🤔

In light theme, the grey may be a bit overpowering in its darkness. I wish the Windows Team would get the Acrylic tiles working ASAP

[stmoy]

Since the office apps are now using a grey for their background, maybe we should do the same?

Yeah, I considered that, but the XCG isn't an Office app. It's more akin to a "widget" app like Calculator or Alarms, which use the user accent color.

If y'all are good with this, I'm going to go ahead and approve/merge this PR.

[marcelwgn]