From 2265d0a928bdbe1e64cc87c3c6392f910170fb2e Mon Sep 17 00:00:00 2001
From: Sebastiaan Janssen <sebastiaan@umbraco.com>
Date: Fri, 21 Oct 2022 17:47:51 +0200
Subject: [PATCH] Changed Logo button behavior to be more consistent with the
 rest of the header

(cherry picked from commit 7d9ee69fbc06c0166a7acc62abc36734a5cba4d5)
---
 .../EmbeddedResources/Lang/en.xml             |  1 +
 .../EmbeddedResources/Lang/en_us.xml          |  1 +
 .../application/umbappheader.directive.js     |  4 +++
 .../application/umb-app-header.html           | 31 +++++++++++++++----
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
index a9458171bd..c3d2ab8bb4 100644
--- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
+++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml
@@ -829,6 +829,7 @@
     <key alias="retry">Retry</key>
     <key alias="rights">Permissions</key>
     <key alias="scheduledPublishing">Scheduled Publishing</key>
+    <key alias="umbracoInfo">Umbraco info</key>
     <key alias="search">Search</key>
     <key alias="searchNoResult">Sorry, we can not find what you are looking for.</key>
     <key alias="noItemsInList">No items have been added</key>
diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
index c548d0d423..6ddedc7797 100644
--- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
+++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml
@@ -857,6 +857,7 @@
     <key alias="retry">Retry</key>
     <key alias="rights">Permissions</key>
     <key alias="scheduledPublishing">Scheduled Publishing</key>
+    <key alias="umbracoInfo">Umbraco info</key>
     <key alias="search">Search</key>
     <key alias="searchNoResult">Sorry, we can not find what you are looking for.</key>
     <key alias="noItemsInList">No items have been added</key>
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
index dd83f6546b..a184967ca2 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
@@ -97,6 +97,8 @@
                     if(anchorLink) {
                         anchorLink.focus();
                     }
+                    const anchorButton = element[0].querySelector('#umbraco-logo-mark');
+                    anchorButton.classList.add("active");
                 });
             };
             scope.keepLogoModal = function() {
@@ -108,6 +110,8 @@
                     scope.logoModal.timer = $timeout(function () {
                         scope.logoModal.show = false;
                     }, 100);
+                  const anchorButton = element[0].querySelector('#umbraco-logo-mark');
+                  anchorButton.classList.remove("active");
                 }
             };
             scope.stopClickEvent = function($event) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
index 7936a7848e..9d673ce8bb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
@@ -2,13 +2,32 @@
     <div class="umb-app-header">
         <div class="umb-app-header__logo" ng-if="hideBackofficeLogo !== true">
             <button type="button"
+                    id="umbraco-logo-mark"
                     class="btn-reset"
-                    ng-click="toggleLogoModal()">
-                <img src="assets/img/application/umbraco_logomark_white.svg"
-                     alt="Umbraco"
-                     width="30"
-                     height="30"
-                     draggable="false" />
+                    ng-click="toggleLogoModal()"
+                    localize="title"
+                    title="@general_umbracoInfo">
+
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 315.89 315.89" width="30" height="30">
+                <style type="text/css">
+                  #umbraco-logo-mark svg {
+                    vertical-align: top;
+                  }
+                  #umbraco-logo-mark svg path {
+                    fill: white;
+                    opacity: 0.8;
+                  }
+                  #umbraco-logo-mark:hover svg path {
+                    opacity: 1;
+                  }
+                  #umbraco-logo-mark.active svg path {
+                    fill: #f5c1bc;
+                    opacity: 1;
+                  }
+                </style>
+                <path d="M0,157.74A157.95,157.95,0,1,1,158,315.89,157.95,157.95,0,0,1,0,157.74Zm154.74,54.09a155.41,155.41,0,0,1-36.5-3.29,27.92,27.92,0,0,1-19.94-16q-5.35-12.34-5.21-38.1a243,243,0,0,1,1.69-26.84q1.55-13,3.09-21.46l1.07-5.59a2,2,0,0,0,0-.49,3.2,3.2,0,0,0-2.65-3.17L75.92,93.67h-.44a3.19,3.19,0,0,0-3.11,2.48c-.35,1.31-.56,2.27-1.17,5.38-1.16,6-2.24,11.85-3.43,20.38a264.17,264.17,0,0,0-2.3,27.94,145.24,145.24,0,0,0,0,19.57q.72,25.94,8.9,41.42t27.72,22.3q19.53,6.81,54.43,6.66h2.91q34.94.15,54.41-6.66t27.71-22.3q8.17-15.53,8.91-41.42a145.24,145.24,0,0,0,0-19.57,266.84,266.84,0,0,0-2.3-27.94c-1.2-8.44-2.27-14.26-3.44-20.38-.61-3.11-.81-4.07-1.16-5.38a3.21,3.21,0,0,0-3.12-2.48h-.52l-20.38,3.18a3.2,3.2,0,0,0-2.68,3.17,4,4,0,0,0,0,.49l1.08,5.59q1.55,8.48,3.12,21.46a245.68,245.68,0,0,1,1.65,26.84q.27,25.69-5.21,38.07a27.9,27.9,0,0,1-19.76,16.07,155.19,155.19,0,0,1-36.48,3.29Z"/>
+              </svg>
+
             </button>
             <div
                 tabindex="0"