Update InAppNotification style

[ismaelestalayo]

Fixes

Fixes #3770 by bringing the style of the InfoBar to the InAppNotification control.

PR Type

What kind of change does this PR introduce?

• Feature

What is the current behavior?

#3770

What is the new behavior?

The coloring, font size and margins were updated to match the new InfoBar control.

PR Checklist

Please check if your PR fulfills the following requirements:

• Tested code with current supported SDKs
• Pull Request has been submitted to the documentation repository instructions. Link:
• Sample in sample app has been added / updated (for bug fixes / features)
  • Icon has been created (if new sample) following the Thumbnail Style Guide and templates
• New major technical changes in the toolkit have or will be added to the Wiki e.g. build changes, source generators, testing infrastructure, sample creation changes, etc...
• Tests for the changes have been added (for bug fixes / features) (if applicable)
• Header has been added to all new source files (run build/UpdateHeaders.bat)
• Contains NO breaking changes

[ghost]

Thanks ismaelestalayo for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌

[net-foundation-cla]

All CLA requirements met.

[net-foundation-cla]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

❌ ismaelestalayo sign now
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[Kyaa-dost]

@ismaelestalayo Thanks for submitting the PR. Can you please sign the CLA requirement above? ⬆️

[ismaelestalayo]

@ismaelestalayo Thanks for submitting the PR. Can you please sign the CLA requirement above? ⬆️

I already signed it, but the bot sent the CLA message twice, and only the first one updated to show that I signed it.
Clicking the link again just shows my signed agreement, which is not editable

[Kyaa-dost]

Looks good now. Thanks, @ismaelestalayo for double checking.

[ghost]

Hello @michael-hawker!

Because this pull request has the auto merge :zap: label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msftbot) and give me an instruction to get started! Learn more here.

[michael-hawker]

@msftbot only merge if @vgromfeld approves.

@vgromfeld which style are you using currently? Let me know how this looks to you.

[ghost]

Hello @michael-hawker!

Because you've given me some instructions on how to help merge this pull request, I'll be modifying my merge approach. Here's how I understand your requirements for merging this pull request:

• I'll only merge this pull request if it's approved by @vgromfeld and @vgromfeld

If this doesn't seem right to you, you can tell me to cancel these instructions and use the auto-merge policy that has been configured for this repository. Try telling me "forget everything I just told you".

[vgromfeld]

We are currently using a custom template to tweak some parts for our apps (mostly alignments) but with this change, it seems that we will not longer need them.

[michael-hawker]

@ismaelestalayo not sure if this is related to this PR or a regression from 6.1, but looks like the 'without DataTemplate' example doesn't position the close button properly:

Compared to current 6.1 sample app:

Is this something you'd mind taking a quick look at to fix in either case?

---

Also, to clarify, assuming some of the others have moved to the top-right based on the InfoBar template?

vs.

Just wanted to make sure it was intentional.

Thanks!

[ismaelestalayo]

@ismaelestalayo not sure if this is related to this PR or a regression from 6.1, but looks like the 'without DataTemplate' example doesn't position the close button properly:

Fixed in the next code i'm gonna push:

I also fixed the "notification with Drop Shadow" having the X in the center, as my intention was to put it in the top right corner like InfoBar, yes:

[ismaelestalayo]

Oh, you can see in the changes I made, but I took this oportunity to make the text and buttons from the examples smaller (font from 16 to 14, like the default, and buttons from 40x120 to 30x100)

[ghost]

This PR has been marked as "needs attention 👋" and awaiting a response from the team.

[michael-hawker]

@ismaelestalayo I believe the default is 32, no? As it's a multiple of 4. Currently at 150% DPI the bottom of the buttons don't scale properly:

[michael-hawker]

I've fixed locally, I'll see if I can just push the small change to 32:

[michael-hawker]

Oh, I just noticed this is based off the master of your fork. It needs to be in a feature branch. I'll rebase this off my fork and just push and commit, since we're ready to go. I'll close this PR for now and ping you on the new one.