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

Focus rings on more info icon doesn't align the icon at centre #41379

Closed
3 of 6 tasks
srirambv opened this issue Oct 3, 2024 · 6 comments · Fixed by brave/brave-core#25840
Closed
3 of 6 tasks

Focus rings on more info icon doesn't align the icon at centre #41379

srirambv opened this issue Oct 3, 2024 · 6 comments · Fixed by brave/brave-core#25840
Assignees
@fallaciousreasoning
Labels
browser-ai bug feature/settings OS/Desktop polish Nice to have — usually related to front-end/visual tasks priority/P4 Planned work. We expect to get to it "soon". QA Pass-Linux QA Pass-macOS QA Pass-Win64 QA/Test-All-Platforms QA/Yes release-notes/include
Milestone
1.73.x - Release

Comments

@srirambv
Copy link
Contributor

srirambv commented Oct 3, 2024

Description

Focus rings on more info icon doesn't align the icon at centre

Steps to reproduce

  1. Open Settings->Leo
  2. Select Add model
  3. Tab select info button
  4. Focus ring doesn't align the icon at centre

Actual result

image

Expected result

Centre align icons similar to other settings
image

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Brave 1.71.102 Chromium: 129.0.6668.70 (Official Build) beta (64-bit)
Revision d901535b1091c5f39eb2b5426b8fa8e7f3c5edf0
OS Windows 11 Version 23H2 (Build 22631.4169)

Channel information

  • release (stable)
  • beta
  • nightly

Reproducibility

  • with Brave Shields disabled
  • with Brave Rewards disabled
  • in the latest version of Chrome

Miscellaneous information

cc: @aguscruiz @rebron @MadhaviSeelam
@srirambv srirambv added this to General Oct 3, 2024
@aguscruiz
Copy link

@fallaciousreasoning @petemill May be a Nala button issue?

@fallaciousreasoning
Copy link

This is caused because the cr_icon is 18x20 pixels and the actual button is 18x18 pixels, so the outline isn't outside the icon.

We could fix this by:

  1. Adding some padding to the button
  2. Using a leo-icon instead of a cr-icon (this would be my preference)

@rebron rebron added polish Nice to have — usually related to front-end/visual tasks priority/P4 Planned work. We expect to get to it "soon". labels Oct 4, 2024
@rebron rebron moved this to P4 Backlog in General Oct 4, 2024
@rebron rebron moved this from P4 Backlog to On Deck in General Oct 4, 2024
@jonathansampson
Copy link
Contributor

Interesting, I'm on W11 as well, and I see considerably better alignment:
image

@aguscruiz
Copy link

This is caused because the cr_icon is 18x20 pixels and the actual button is 18x18 pixels, so the outline isn't outside the icon.

We could fix this by:

  1. Adding some padding to the button
  2. Using a leo-icon instead of a cr-icon (this would be my preference)

Makes sense to fix it properly like you suggest @fallaciousreasoning

@fallaciousreasoning
Copy link

Interesting - definitely shows up for me on Linux
image

@fallaciousreasoning fallaciousreasoning mentioned this issue Oct 7, 2024
Merged
24 tasks
@github-project-automation github-project-automation bot moved this from On Deck to Completed in General Oct 8, 2024
@brave-builds brave-builds added this to the 1.72.x - Nightly milestone Oct 8, 2024
@srirambv
Copy link
Contributor Author

Verification passed on

Brave 1.72.85 Chromium: 130.0.6723.58 (Official Build) beta (64-bit)
Revision 2c872aa4d2694bc73ec58e3b14538a4008a6381e
OS Windows 11 Version 23H2 (Build 22631.4317)
  • Verified steps from issue description
  • Verified focus rings on more info icon shows correctly
  • Encountered #41853
41379.mp4

Verification passed on

Brave 1.72.85 Chromium: 130.0.6723.58 (Official Build) beta (64-bit)
Revision 2c872aa4d2694bc73ec58e3b14538a4008a6381e
OS Linux
  • Verified steps from issue description
  • Verified focus rings on more info icon shows correctly
  • Encountered #41853
41379.mp4

Verification passed on

Brave 1.72.85 Chromium: 130.0.6723.58 (Official Build) beta (64-bit)
Revision 2c872aa4d2694bc73ec58e3b14538a4008a6381e
OS macOS Version 15.0.1 (Build 24A348)
  • Verified steps from issue description
  • Verified focus rings on more info icon shows correctly
  • Encountered #41853
41379.mov

@LaurenWags LaurenWags mentioned this issue Nov 11, 2024
Closed
@rebron rebron removed this from General Nov 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@fallaciousreasoning fallaciousreasoning

Labels
browser-ai bug feature/settings OS/Desktop polish Nice to have — usually related to front-end/visual tasks priority/P4 Planned work. We expect to get to it "soon". QA Pass-Linux QA Pass-macOS QA Pass-Win64 QA/Test-All-Platforms QA/Yes release-notes/include
Projects
None yet
Milestone
1.73.x - Release
Development

Successfully merging a pull request may close this issue.

[Settings]: Use Nala icons for AI Chat brave/brave-core
7 participants
@jonathansampson @rebron @fallaciousreasoning @aguscruiz @srirambv @LaurenWags @brave-builds