V13: login screen design refresh (#15037)

* add new login images

* layout styling

* styling

* fix line height

* use image and logo

* add comments

* remove border and shadow

* change logos and images

* use styleMap and add dark logo property

* add new content setting for dark logo variant

* add loginLogoImageDark to angular server variables

* set logo-dark attribute on the auth element and rename "logo-image" to "logo-light"

* styling

* update auth element

* replace logo files with new brand logos

* use different logo on install screen

* no-nodes: move logo to img file

* use different logo for umb-avatar

* use different logo for backoffice

* use different logo for BootFailed

* tranparent background

* switch dark and light logo

* image flip horizontal

* fix background

* inject native inputs into auth element

* use native inputs in login

* get input values and submit on enter press

* wip validation

* wip custom login input. And inject entire form instead

* use external submit button

* use uui-labels instead

* style inputs

* cleanup

* convert to function

* add translations

* wait for slot update before getting form

* fix divider to work on transparent backgrounds

* background less transparent

* load css from file

* fix logo

* fix mobile padding

* add documentation and fix name of input field for username

* revert to old login background

* revert to old login background

* add labels for login fields

* fix label warning

* fix fallback for messages

* replace background image

* do not transform background image

* add mocked texts

* use new generic "Welcome" title

* use correct user_email for email field

* update "Welcome..." to "Welcome" to use with the new login screen

* reformat code

* update greeting headline

* update actions

* update mocks

* update fallback value

* update texts

* improve query safety

* add logoImageAlternative and ensure naming is correct from backend to frontend

* add remarks to avoid changing the color configuration of an external login button

* format

* update auth styles

* external login provider element

* auth layout

* external login providers layout

* login input element

* invite page

* login page

* new password page

* typesafe

* fix custom view login provider

* divider color

* prevent pink lines from overflowing image

* replace login background

* add umb prefix to css variables

* avoid using 'umbraco' in alt texts and add check for logo alternative

* adjust greeting size

* Revert "add umb prefix to css variables"

This reverts commit 005813cbfd5df4b72d6ba61f6bfe7b368cb98823.

* add new blue button color

* font-size on headlines

* align styling on all pages

* use error layout

* ts happy

* adjust divider to work better with rounded buttons

* add overflow to in case of very long forms

* adjust h2 size

* update mocks to match cms

* first headline on a page should be a h1

* first headline on a page should be a h1

* first headline on a page should be a h1

* copy styling to mfa page

* first headline on a page should be a h1

* make the blue logo default for Umbraco 13

* move background-color to auth-layout so it also takes effect inside the cms

* adjust padding on the internal div on the buttons

* reformat code

* fix async text for external login buttons

* align design of mfa page with the other screens

* align logos

* reformat code

* use white logo for nonodes

* add safety measure to returnPath

* lowercase the 'or' text

* force uui-select to use the background-color as other regular inputs

* match uui-select-height with other input fields

* revert back to default look for outline uui-button

* move background-color to layout element to span the entire browser

* align headlines across components

* adjust max-width on #content to better fit headlines

* align line-height on headlines across components

* allow error text a bit of top margin

---------

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

src/Umbraco.Core/Configuration/Models/ContentSettings.cs

@@ -152,8 +152,9 @@ public class ContentSettings
     internal const string StaticMacroErrors = "Inline";
     internal const string StaticDisallowedUploadFiles = "ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,xamlx";
     internal const bool StaticShowDeprecatedPropertyEditors = false;
-    internal const string StaticLoginBackgroundImage = "assets/img/login.svg";
-    internal const string StaticLoginLogoImage = "assets/img/application/umbraco_logo_white.svg";
+    internal const string StaticLoginBackgroundImage = "assets/img/login.jpg";
+    internal const string StaticLoginLogoImage = "assets/img/application/umbraco_logo_blue.svg";
+    internal const string StaticLoginLogoImageAlternative = "assets/img/application/umbraco_logo_blue.svg";
     internal const bool StaticHideBackOfficeLogo = false;
     internal const bool StaticDisableDeleteWhenReferenced = false;
     internal const bool StaticDisableUnpublishWhenReferenced = false;
@@ -219,11 +220,21 @@ public class ContentSettings
     public string LoginBackgroundImage { get; set; } = StaticLoginBackgroundImage;
 
     /// <summary>
-    ///     Gets or sets a value for the path to the login screen logo image.
+    ///     Gets or sets a value for the path to the login screen logo image
+    ///     shown on top of the background image set in <see cref="LoginBackgroundImage" />.
     /// </summary>
+    /// <remarks>The alternative version of this logo can be found at <see cref="LoginLogoImageAlternative"/>.</remarks>
     [DefaultValue(StaticLoginLogoImage)]
     public string LoginLogoImage { get; set; } = StaticLoginLogoImage;
 
+    /// <summary>
+    ///     Gets or sets a value for the path to the login screen logo image when shown on top
+    ///     of a light background (e.g. in mobile resolutions).
+    /// </summary>
+    /// <remarks>This is the alternative version to the regular logo found at <see cref="LoginLogoImage"/>.</remarks>
+    [DefaultValue(StaticLoginLogoImageAlternative)]
+    public string LoginLogoImageAlternative { get; set; } = StaticLoginLogoImageAlternative;
+
     /// <summary>
     ///     Gets or sets a value indicating whether to hide the backoffice umbraco logo or not.
     /// </summary>