fix: Moved HyperChat Settings button to YouTube Chat menu #196
Conversation
r2dev2
left a comment
r2dev2
left a comment
There was a problem hiding this comment.
Functionality is great and works!
However, I think there might be some rendering issues. On Chrome, it looked fine, but at least in my Firefox, the text looks weird (as seen below). Would you be able to fix this?
Also, would you be able to add a hover effect for when the mouse hovers over the button? See the comment I had for the :hover rule, I think the color just needs to be tweaked and then it'll work!
r2dev2
left a comment
r2dev2
left a comment
There was a problem hiding this comment.
Functionality good, just some quick css + logging changes!
| import outline from '../assets/outline.svg?raw'; | ||
| import { onDestroy, onMount } from "svelte"; | ||
| let instanceTracker = 0; |
There was a problem hiding this comment.
Since instanceTracker is a local variable to this component, there will be a new instanceTracker variable for each instance of the component so it will always be 0 or 1 even if there are multiple SettingsButtons.
Would you be able to remove the instanceTracker variable, but keep the log of creating / deleting the SettingsButton? Also, would you be able to change console.log to console.debug?
| .button-label { | ||
| color: var(--yt-spec-text-primary); | ||
| white-space: nowrap; | ||
| font-family: sans-serif; | ||
| font-size: 1.4rem; | ||
| line-height: 2rem; | ||
| font-weight: 100; | ||
| -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); | ||
| } |
There was a problem hiding this comment.
I think this is why it's rendering looks a bit funky in the screenshot I sent. From inspecting element, I see that the other items in the menu are rendered with below (font-weight is 400 and font-family is "Roboto","Arial",sans-serif)
| height: 24px; | ||
| } | ||
| .button-icon { |
There was a problem hiding this comment.
The icon isn't centered, as show in below screenshot:
I think you probably need display: flex; justify-content: center in .button-icon too in order to center the button.
2 participants
No description provided.