update header and theme #2261
update header and theme #2261
Conversation
|
[frontend] [Sun Jun 23 04:25:37 UTC 2024] - Deployed c132019 to https://genshin-optimizer-prs.github.io/pr/2261/frontend (Takes 3-5 minutes after this completes to be available) [frontend] [Sun Jun 23 04:36:37 UTC 2024] - Deployed 27e0939 to https://genshin-optimizer-prs.github.io/pr/2261/frontend (Takes 3-5 minutes after this completes to be available) [frontend] [Sun Jun 23 11:39:30 UTC 2024] - Deployed 78e379b to https://genshin-optimizer-prs.github.io/pr/2261/frontend (Takes 3-5 minutes after this completes to be available) [frontend] [Sun Jun 23 11:42:34 UTC 2024] - Deployed 9f9677a to https://genshin-optimizer-prs.github.io/pr/2261/frontend (Takes 3-5 minutes after this completes to be available) [Mon Jun 24 04:32:26 UTC 2024] - Deleted deployment |
| @@ -217,37 +220,34 @@ function HeaderContent({ anchor }: { anchor: string }) { | |||
| transition: 'background-color 0.5s ease', | |||
| backgroundColor: 'rgba(255,255,255,0.1)', | |||
| }, | |||
| }} | |||
| '& .Mui-selected': { | |||
There was a problem hiding this comment.
I think the text is supposed to be bolded as well
design doc:
site:
There was a problem hiding this comment.
I did try to do that, but bolding the text makes it slightly wider, so it causes a tiny bit of layout shift.
There was a problem hiding this comment.
Can you try with pseudoelement with prebolded text? I think the current design is a bit hard to notice which tab you're on even with the colorization
https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover
There was a problem hiding this comment.
I've tried that, and many other solutions like fake bolding with dropshadow and manual letter-spacing. I've not gotten it to work and I don't want to spend more time on it.
also, you can't seriously argue that you can't see which tab is activated here if the text isn't bolded?
Describe your changes
Issue or discord link
Testing/validation
New(left) vs. Old(right)
Mobile
Checklist before requesting a review (leave this PR as draft if any part of this list is not done.)
yarn run mini-cilocally to validate format and lint.