PMM-11637 Adjust branding based on feedback (#614)

* PMM-11637 Adjust branding based on feedback

Use PMM logo in place of Percona.
Use app icon in navbar and preload page.

* PMM-11637 Fix icon templated alert in dark mode

public/app/core/components/Branding/Branding.tsx

@@ -10,7 +10,7 @@ export interface BrandComponentProps {
 }
 
 const LoginLogo: FC<BrandComponentProps & { logo?: string }> = ({ className }) => {
-  return <img className={className} src="public/img/percona-logo.svg" alt="PMM" />;
+  return <img className={className} src="public/img/icons/mono/pmm-logo.svg" alt="PMM" />;
 };
 
 const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
@@ -43,15 +43,7 @@ const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
 };
 
 const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
-  const theme = useTheme2();
-
-  return (
-    <img
-      className={className}
-      src={theme.isLight ? 'public/img/percona-logo-light.svg' : 'public/img/percona-logo.svg'}
-      alt="PMM"
-    />
-  );
+  return <img className={className} src="public/img/pmm-app-rounded-icon.svg" alt="PMM" />;
 };
 
 const LoginBoxBackground = () => {

public/app/features/alerting/unified/components/rule-editor/rule-types/TemplatedAlert.tsx

@@ -20,7 +20,7 @@ const TemplatedAlertRuleType: FC<SharedProps> = ({ selected = false, disabled, o
           Simpler initial alert setup with more robust alerting options.
         </span>
       }
-      image={theme.isLight ? 'public/img/percona-logo-light.svg' : 'public/img/percona-logo.svg'}
+      image={theme.isLight ? 'public/img/icons/mono/pmm-logo-light.svg' : 'public/img/icons/mono/pmm-logo.svg'}
       selected={selected}
       disabled={disabled}
       value={RuleFormType.templated}

public/views/index-template.html

@@ -72,7 +72,7 @@
         height: 60px;
         background-repeat: no-repeat;
         background-size: contain;
-        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE1NSIgdmlld0JveD0iMCAwIDE4MCAxNTUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNDYuMzI2IDk3LjU0NTZDMTY1LjQyMSA4NS4wNjQxIDE3MS42NjkgNTkuNjA0NSAxNjAuMTEzIDM5LjU5NDRDMTU0LjMyMyAyOS41NTc0IDE0NC45NjQgMjIuMzY5NCAxMzMuNzY3IDE5LjM2NzlDMTIzLjM5MyAxNi41ODI4IDExMi41NTcgMTcuNzIxNyAxMDMuMDIxIDIyLjUzOTdMOTAgMEw2Mi45NzIyIDQ2LjgxMDhMMC41MDA5NzcgMTU1SDE3OS40OTlMMTQ2LjMyNiA5Ny41NDU2Wk0xMzAuNzA1IDMwLjgzNDdDMTM4Ljg0NCAzMy4wMDI0IDE0NS42MTcgMzguMjI4NSAxNDkuODM1IDQ1LjUwNTJDMTU4LjEyNyA1OS44NDkzIDE1My44MTkgNzguMDQyOCAxNDAuMzczIDg3LjIzMThMMTA4Ljk2NyAzMi44NDI4QzExNS43MzMgMjkuNTg5NCAxMjMuMzY0IDI4Ljg3OTggMTMwLjcwNSAzMC44MzQ3Wk05MCAyMy43NTY2TDE1OC45MTQgMTQzLjExOEgxMTguNTkyTDY5LjgzMDIgNTguNjg5MUw4OS45OTY0IDIzLjc2MDJMOTAgMjMuNzU2NlpNMjEuMDg1OCAxNDMuMTE4TDYyLjk2ODYgNzAuNTkyM0wxMDQuODUxIDE0My4xMThIMjEuMDg1OFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xMDkzOF83MTMpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTA5MzhfNzEzIiB4MT0iMjEuOTk4MSIgeTE9IjE0Mi41IiB4Mj0iMTYxLjQ5OCIgeTI9IjY1Ljk5OTkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0ZDMzUxOSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGMEQxMzYiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K');
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgdmlld0JveD0iMCAwIDE2MCAxNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiByeD0iMjQiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbF8xMDg3M183Mzc1MCkiLz4KPHBhdGggb3BhY2l0eT0iMC4zMyIgZD0iTTI4IDgxLjc0NzNMNTQuOTY4OCAxMjUuNDg2TDU0Ljk3MzkgMTI1LjQ4MUw2NC40NjY2IDEwOC44NThMODIuMzAyMyAxNDBMMTAzLjI5NCAxMDMuMzQ4TDExMC40ODcgMTE1Ljk0N0wxMzIgODEuNzQ3NkwxMjYuNDMzIDgxLjc0NzNMMTEwLjQ5MiAxMDcuMzI2TDEwNS43NTYgOTkuMDU4TDExNS40ODIgODEuNzQ3M0gxMTAuMDIyTDEwMy4wOTQgOTQuNDA2Mkw5NS44NTkyIDgxLjc0NzNIOTAuODM5NkwxMDAuNjQ0IDk4LjY5MDNMODIuMzA3NCAxMzAuNzExTDY3LjEyNiAxMDQuMjA2TDc5Ljk1MDYgODEuNzQ3M0g3NS4wMjg3TDY0Ljc0NTIgMTAwLjA0OUw1NC4xMzA4IDgxLjc0NzNINDguNzQ3Mkw2Mi4wODU5IDEwNC42OTFMNTQuOTczOSAxMTcuMTA2TDMyLjQ0OTMgODEuNzQ3M0gyOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjEuODE0IDYzLjkwODlDMTIzLjc0NCA2Mi4yMDMyIDEyNS4xNDcgNTkuOTQwOSAxMjUuODIgNTcuNDA3OUMxMjYuNzMyIDUzLjk5MTQgMTI2LjI2NiA1MC40MjE3IDEyNC41MTQgNDcuMzU3NUMxMjIuNzYxIDQ0LjI5MzQgMTE5LjkyOSA0Mi4xMDI2IDExNi41NDEgNDEuMTg4NEMxMTUuNDIxIDQwLjg4NzEgMTE0LjI3NyA0MC43MzM5IDExMy4xMjcgNDAuNzMzOUMxMTEuNzI0IDQwLjczMzkgMTEwLjMxNiA0MC45NzM5IDEwOC45NzMgNDEuNDI4NUwxMDUuMDI3IDM0LjUxODlMOTUuNTM1MiA1MS4xNDE3TDc3LjcwMDQgMjBMNTYuNzA5OSA1Ni42NTIxTDQ5LjUxNzIgNDQuMDUzNEwyOCA4MS43NDczSDEzMkwxMjEuODE0IDYzLjkwODlaTTExMy4xMjcgNDQuOTE2NUMxMTMuOTEyIDQ0LjkxNjUgMTE0LjcwMiA0NS4wMjM3IDExNS40NzIgNDUuMjI4QzExNy43ODIgNDUuODQ1OSAxMTkuNzE3IDQ3LjM0MjIgMTIwLjkyMiA0OS40NDEyQzEyMi4xMjMgNTEuNTM1IDEyMi40NDIgNTMuOTc2MSAxMjEuODE5IDU2LjMxNUMxMjEuNDI0IDU3Ljc5MDkgMTIwLjY5NCA1OS4wOTgzIDExOS42ODYgNjAuMTc1OEwxMTEuMTExIDQ1LjE1NjVDMTExLjc3NCA0NC45OTgyIDExMi40NTggNDQuOTE2NSAxMTMuMTMyIDQ0LjkxNjVIMTEzLjEyN1pNMzUuNDAwMyA3Ny40MzcxTDQ5LjUxMjIgNTIuNjczOEw1NC4yNDgyIDYwLjk0MThMNDQuODcyNCA3Ny40MzcxSDM1LjQwMDNaTTU2LjkwNzUgNjUuNTg5MUw2My41MDI0IDc3LjQzNzFINTAuMzEyNUw1Ni45MDc1IDY1LjU4OTFaTTY4LjM3NTIgNzcuNDM3MUw1OS4zNTkgNjEuMzA5NUw3Ny42OTUzIDI5LjI4OTRMOTIuODc1OSA1NS43OTQxTDgwLjcwNDEgNzcuNDM3MUg2OC4zNzUyWk05NS4yNTY2IDU5Ljk1MTFMMTA1LjA3OCA3Ny40MzcxSDg1LjQzNUw5NS4yNTY2IDU5Ljk1MTFaTTExMC41ODkgNzcuNDM3MUw5Ny45MTU4IDU1LjMwOUwxMDUuMDI3IDQyLjg5NDFMMTI0LjgwNyA3Ny40MzcxSDExMC41ODlaIiBmaWxsPSJ3aGl0ZSIvPgo8ZGVmcz4KPHJhZGlhbEdyYWRpZW50IGlkPSJwYWludDBfcmFkaWFsXzEwODczXzczNzUwIiBjeD0iMCIgY3k9IjAiIHI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDIuNzMxOTcgMTU0LjE3Nykgc2NhbGUoMjEwLjY5MSkiPgo8c3RvcCBvZmZzZXQ9IjAuMjIiIHN0b3AtY29sb3I9IiNBQzMxMDAiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRTg3MzE4Ii8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==');
       }
 
       .preloader__text {