Skip to content

Commit

Permalink
Fix theme switch success toast layout (elastic#195717)
Browse files Browse the repository at this point in the history
## 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: elastic#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 446ad94)
  • Loading branch information
kowalczyk-krzysztof committed Oct 10, 2024
1 parent 8cb2d82 commit 75aacf9
Showing 1 changed file with 19 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
),
},
{
Expand Down

0 comments on commit 75aacf9

Please sign in to comment.