From 75aacf90bef1a5c8441ba333cad90c318d1e55b5 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Thu, 10 Oct 2024 14:08:31 +0200
Subject: [PATCH] Fix theme switch success toast layout (#195717)

## Summary

This PR fixes the layout of `Color theme updated` toast to match [EUI
guidelines on success
toasts](https://eui.elastic.co/#/display/toast#success).

Fixes: #165979

## Visuals
| Previous | New |
|-----------------|-----------------|

|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)
|
![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)
|

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

(cherry picked from commit 446ad9475ba4d419066977f776b4fcd20f8a8cc0)
---
 .../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>
+              </>
             ),
           },
           {