Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark/light mode switch notification spacing #165979

Closed
vadimkibana opened this issue Sep 7, 2023 · 8 comments · Fixed by #195717
Closed

Dark/light mode switch notification spacing #165979

vadimkibana opened this issue Sep 7, 2023 · 8 comments · Fixed by #195717
Assignees
@kowalczyk-krzysztof
Labels
bug Fixes for quality problems that affect the customer experience cosmetic good first issue low hanging fruit SharedUX/fix-it-week Bugs that have been groomed and queued up for the team's next fix it week Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)

Comments

@vadimkibana
Copy link
Contributor

There is extra space on the left in the notification toast, which appears after switching light/dark modes.

image
@vadimkibana vadimkibana added the bug Fixes for quality problems that affect the customer experience label Sep 7, 2023
@botelastic botelastic bot added the needs-team Issues missing a team label label Sep 7, 2023
@vadimkibana vadimkibana added Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) and removed needs-team Issues missing a team label labels Sep 7, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@tsullivan
Copy link
Member

@vadimkibana where are you accessing the color theme setting when you see this bug?

I went to Edit Profile to change this setting, and didn't see the bug.

@vadimkibana
Copy link
Contributor Author

vadimkibana commented Sep 13, 2023 •
edited
Loading

@tsullivan in the top menu:

Image

@vadimkibana
Copy link
Contributor Author

This issue might be related: #163330

@tsullivan
Copy link
Member

@vadimkibana, I've tried in traditional and serverless modes. I don't see the same options in the top menu

Untitled

What am I missing?

@vadimkibana
Copy link
Contributor Author

It is there in production https://cloud.elastic.co/

@sebelga
Copy link
Contributor

sebelga commented Sep 26, 2023 •
edited
Loading

To see the correct dropdown menu items you need to mark the user as a cloud user. Modify the maybe_add_cloud_links.ts file

diff --git a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
index 2772c87d124..010bfedfedf 100644
--- a/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_links/public/maybe_add_cloud_links/maybe_add_cloud_links.ts
@@ -26,6 +26,7 @@ export function maybeAddCloudLinks({ core, security, cloud, share }: MaybeAddClo
   const userObservable = defer(() => security.authc.getCurrentUser()).pipe(
     // Check if user is a cloud user.
     map((user) => user.elastic_cloud_user),
+    map(() => true),
     // If user is not defined due to an unexpected error, then fail *open*.
     catchError(() => of(true)),
     filter((isElasticCloudUser) => isElasticCloudUser === true),

The fix for this issue is probably to change the justifyContent="flexEnd" to justifyContent="flexStart" here

https://github.com/elastic/kibana/blob/main/packages/kbn-user-profile-components/src/hooks/use_update_user_profile.tsx#L73

@vadimkibana vadimkibana self-assigned this Nov 9, 2023
@petrklapka petrklapka added SharedUX/fix-it-week Bugs that have been groomed and queued up for the team's next fix it week good first issue low hanging fruit labels Sep 13, 2024
@kowalczyk-krzysztof kowalczyk-krzysztof self-assigned this Oct 9, 2024
@ek-so
Copy link
Contributor

ek-so commented Oct 10, 2024

Hi @sebelga and @kowalczyk-krzysztof! We have this layout defined in EUI, so I suggest we follow it, namely:
Image

@kowalczyk-krzysztof kowalczyk-krzysztof mentioned this issue Oct 10, 2024
Merged
3 tasks
kowalczyk-krzysztof added a commit that referenced this issue Oct 10, 2024
@kowalczyk-krzysztof
Fix theme switch success toast layout (#195717)
446ad94 
## 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))
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 10, 2024
@kowalczyk-krzysztof
Fix theme switch success toast layout (elastic#195717)
75aacf9 
## 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)
kibanamachine added a commit that referenced this issue Oct 10, 2024
@kibanamachine @kowalczyk-krzysztof
[8.x] Fix theme switch success toast layout (#195717) (#195755)
1719921 
# Backport

This will backport the following commits from `main` to `8.x`:
- [Fix theme switch success toast layout
(#195717)](#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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kowalczyk-krzysztof kowalczyk-krzysztof

Labels
bug Fixes for quality problems that affect the customer experience cosmetic good first issue low hanging fruit SharedUX/fix-it-week Bugs that have been groomed and queued up for the team's next fix it week Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix theme switch success toast layout kowalczyk-krzysztof/kibana
8 participants
@tsullivan @sebelga @sophiec20 @elasticmachine @ek-so @kowalczyk-krzysztof @petrklapka @vadimkibana