From 17199210fd95776a07c36517fcfc0b684dcbd725 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 11 Oct 2024 02:30:33 +1100
Subject: [PATCH] [8.x] Fix theme switch success toast layout (#195717)
 (#195755)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Fix theme switch success toast layout
(#195717)](https://github.com/elastic/kibana/pull/195717)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Krzysztof
Kowalczyk","email":"krzysztof.kowalczyk@elastic.co"},"sourceCommit":{"committedDate":"2024-10-10T12:08:31Z","message":"Fix
theme switch success toast layout (#195717)\n\n## Summary\r\n\r\nThis PR
fixes the layout of `Color theme updated` toast to match
[EUI\r\nguidelines on
success\r\ntoasts](https://eui.elastic.co/#/display/toast#success).\r\n\r\nFixes:
#165979 \r\n\r\n## Visuals\r\n| Previous | New
|\r\n|-----------------|-----------------|\r\n\r\n|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)\r\n|\r\n![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)\r\n|\r\n\r\n###
Checklist\r\n \r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"446ad9475ba4d419066977f776b4fcd20f8a8cc0","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor"],"title":"Fix
theme switch success toast
layout","number":195717,"url":"https://github.com/elastic/kibana/pull/195717","mergeCommit":{"message":"Fix
theme switch success toast layout (#195717)\n\n## Summary\r\n\r\nThis PR
fixes the layout of `Color theme updated` toast to match
[EUI\r\nguidelines on
success\r\ntoasts](https://eui.elastic.co/#/display/toast#success).\r\n\r\nFixes:
#165979 \r\n\r\n## Visuals\r\n| Previous | New
|\r\n|-----------------|-----------------|\r\n\r\n|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)\r\n|\r\n![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)\r\n|\r\n\r\n###
Checklist\r\n \r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"446ad9475ba4d419066977f776b4fcd20f8a8cc0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195717","number":195717,"mergeCommit":{"message":"Fix
theme switch success toast layout (#195717)\n\n## Summary\r\n\r\nThis PR
fixes the layout of `Color theme updated` toast to match
[EUI\r\nguidelines on
success\r\ntoasts](https://eui.elastic.co/#/display/toast#success).\r\n\r\nFixes:
#165979 \r\n\r\n## Visuals\r\n| Previous | New
|\r\n|-----------------|-----------------|\r\n\r\n|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)\r\n|\r\n![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)\r\n|\r\n\r\n###
Checklist\r\n \r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"446ad9475ba4d419066977f776b4fcd20f8a8cc0"}}]}]
BACKPORT-->

Co-authored-by: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
---
 .../src/hooks/use_update_user_profile.tsx     | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/kbn-user-profile-components/src/hooks/use_update_user_profile.tsx b/packages/kbn-user-profile-components/src/hooks/use_update_user_profile.tsx
index 8c276dc533f6c..edf11d43b2c84 100644
--- a/packages/kbn-user-profile-components/src/hooks/use_update_user_profile.tsx
+++ b/packages/kbn-user-profile-components/src/hooks/use_update_user_profile.tsx
@@ -74,23 +74,25 @@ export const useUpdateUserProfile = ({
           {
             title: notificationTitle,
             text: (
-              <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <p>{pageReloadText}</p>
-                  <EuiButton
-                    size="s"
-                    onClick={() => window.location.reload()}
-                    data-test-subj="windowReloadButton"
-                  >
-                    {i18n.translate(
-                      'userProfileComponents.updateUserProfile.notification.requiresPageReloadButtonLabel',
-                      {
-                        defaultMessage: 'Reload page',
-                      }
-                    )}
-                  </EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
+              <>
+                <p>{pageReloadText}</p>
+                <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      size="s"
+                      onClick={() => window.location.reload()}
+                      data-test-subj="windowReloadButton"
+                    >
+                      {i18n.translate(
+                        'userProfileComponents.updateUserProfile.notification.requiresPageReloadButtonLabel',
+                        {
+                          defaultMessage: 'Reload page',
+                        }
+                      )}
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </>
             ),
           },
           {