MM-60312 - replace office365 logo with entraId new logo (#28234)

* MM-60312 - replace office365 logo with entraId new logo

* rename icon file name

* remove unncessary aria-label in svg inside a button

* remove unnecessary translation

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/login/login.tsx

@@ -39,10 +39,10 @@ import type {CustomizeHeaderType} from 'components/header_footer_route/header_fo
 import LoadingScreen from 'components/loading_screen';
 import Markdown from 'components/markdown';
 import SaveButton from 'components/save_button';
+import EntraIdIcon from 'components/widgets/icons/entra_id_icon';
 import LockIcon from 'components/widgets/icons/lock_icon';
 import LoginGitlabIcon from 'components/widgets/icons/login_gitlab_icon';
 import LoginGoogleIcon from 'components/widgets/icons/login_google_icon';
-import LoginOffice365Icon from 'components/widgets/icons/login_office_365_icon';
 import LoginOpenIDIcon from 'components/widgets/icons/login_openid_icon';
 import Input, {SIZE} from 'components/widgets/inputs/input/input';
 import PasswordInput from 'components/widgets/inputs/password_input/password_input';
@@ -185,7 +185,7 @@ const Login = ({onCustomizeHeader}: LoginProps) => {
             externalLoginOptions.push({
                 id: 'office365',
                 url,
-                icon: <LoginOffice365Icon/>,
+                icon: <EntraIdIcon/>,
                 label: formatMessage({id: 'login.office365', defaultMessage: 'Entra ID'}),
                 onClick: desktopExternalAuth(url),
             });

webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap

@@ -409,7 +409,7 @@ exports[`components/signup/Signup should match snapshot for all signup options e
               url="/oauth/google/signup"
             />
             <ExternalLoginButton
-              icon={<LoginOffice365Icon />}
+              icon={<EntraIdIcon />}
               id="office365"
               key="office365"
               label="Entra ID"

webapp/channels/src/components/signup/signup.tsx

@@ -43,10 +43,10 @@ import type {CustomizeHeaderType} from 'components/header_footer_route/header_fo
 import LoadingScreen from 'components/loading_screen';
 import Markdown from 'components/markdown';
 import SaveButton from 'components/save_button';
+import EntraIdIcon from 'components/widgets/icons/entra_id_icon';
 import LockIcon from 'components/widgets/icons/lock_icon';
 import LoginGitlabIcon from 'components/widgets/icons/login_gitlab_icon';
 import LoginGoogleIcon from 'components/widgets/icons/login_google_icon';
-import LoginOffice365Icon from 'components/widgets/icons/login_office_365_icon';
 import LoginOpenIDIcon from 'components/widgets/icons/login_openid_icon';
 import CheckInput from 'components/widgets/inputs/check';
 import Input, {SIZE} from 'components/widgets/inputs/input/input';
@@ -200,7 +200,7 @@ const Signup = ({onCustomizeHeader}: SignupProps) => {
             externalLoginOptions.push({
                 id: 'office365',
                 url,
-                icon: <LoginOffice365Icon/>,
+                icon: <EntraIdIcon/>,
                 label: formatMessage({id: 'login.office365', defaultMessage: 'Entra ID'}),
                 onClick: desktopExternalAuth(url),
             });

webapp/channels/src/components/widgets/icons/entra_id_icon.tsx

@@ -0,0 +1,45 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+export default function EntraIdIcon(props: React.HTMLAttributes<HTMLSpanElement>) {
+    return (
+        <span {...props}>
+            <svg
+                width='16'
+                height='16'
+                viewBox='0 0 16 16'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+            >
+                <path
+                    d='M3.38 12.473c0.345 0.215 0.918 0.454 1.524 0.454 0.552 0 1.065 -0.16 1.49 -0.433l0.002 -0.001L8 11.491V15.111a1.387 1.387 0 0 1 -0.732 -0.208z'
+                    fill='#225086'
+                />
+                <path
+                    d='m6.98 1.34 -6.667 7.52c-0.515 0.581 -0.38 1.46 0.287 1.876l2.779 1.737c0.345 0.215 0.918 0.454 1.524 0.454 0.552 0 1.065 -0.16 1.49 -0.433l0.002 -0.001L8 11.491l-3.879 -2.425 3.88 -4.377V0.889c-0.377 0 -0.753 0.15 -1.02 0.451Z'
+                    fill='#6df'
+                />
+                <path
+                    points='4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199'
+                    fill='#cbf8ff'
+                    d='M4.121 9.066L4.167 9.094L8 11.491L8.001 11.491L8.001 11.491L8.001 4.69L8 4.689L4.121 9.066Z'
+                />
+                <path
+                    d='M15.399 10.736c0.668 -0.417 0.802 -1.295 0.287 -1.876l-4.374 -4.934a2.756 2.756 0 0 0 -1.167 -0.259c-0.822 0 -1.557 0.355 -2.046 0.912l-0.097 0.109 3.879 4.377 -3.88 2.425v3.62c0.255 0 0.509 -0.069 0.732 -0.208l6.667 -4.167Z'
+                    fill='#074793'
+                />
+                <path
+                    d='M8.001 0.889v3.8l0.097 -0.109a2.711 2.711 0 0 1 2.046 -0.912c0.42 0 0.814 0.095 1.167 0.259l-2.292 -2.586A1.351 1.351 0 0 0 8 0.89Z'
+                    fill='#0294e4'
+                />
+                <path
+                    points='13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199'
+                    fill='#96bcc2'
+                    d='M11.88 9.066L11.88 9.066L11.88 9.066L8.001 4.69L8.001 11.49L11.88 9.066Z'
+                />
+            </svg>
+        </span>
+    );
+}

webapp/channels/src/components/widgets/icons/login_office_365_icon.tsx

@@ -1,27 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-export default function LoginOffice365Icon(props: React.HTMLAttributes<HTMLSpanElement>) {
-    const {formatMessage} = useIntl();
-
-    return (
-        <span {...props}>
-            <svg
-                width='16'
-                height='16'
-                viewBox='0 0 16 16'
-                fill='none'
-                xmlns='http://www.w3.org/2000/svg'
-                aria-label={formatMessage({id: 'generic_icons.login.oneLogin', defaultMessage: 'One Login Icon'})}
-            >
-                <path
-                    d='M1.25 12.5V3.50005L10.25 0.872048L14.75 2.00605V13.616L9.872 15.128L2.006 12.5L10.25 13.616V2.74405L4.256 4.25605V11.366L1.25 12.5Z'
-                    fill='#DC3C00'
-                />
-            </svg>
-        </span>
-    );
-}

webapp/channels/src/i18n/en.json

@@ -3755,7 +3755,6 @@
   "generic_icons.lock.circleSolid": "Lock Circle Solid Icon",
   "generic_icons.login.gitlab": "Gitlab Icon",
   "generic_icons.login.google": "Google Icon",
-  "generic_icons.login.oneLogin": "One Login Icon",
   "generic_icons.login.openid": "OpenID Icon",
   "generic_icons.logout": "Logout Icon",
   "generic_icons.mail": "Mail Icon",