LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix hover style for char count field #7620

Merged
ByronEricPerez merged 6 commits from 7564-comment-box-hides-icon-when-hovering-over-button into master 2022-07-07 22:55:31 +02:00
Conversation 7 Commits 6 Files changed 3 +37 -5
3 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/common/form-components/form-field.jsx
View file

@ -261,7 +261,7 @@ export class FormField extends React.PureComponent<Props> {
{!noEmojis && openEmoteMenu && ( {!noEmojis && openEmoteMenu && (
<Button <Button
type="alt" type="alt"
className="button--file-action" className="button--comment-icons"
title="Emotes" title="Emotes"
onClick={openEmoteMenu} onClick={openEmoteMenu}
icon={ICONS.EMOJI} icon={ICONS.EMOJI}

38
ui/scss/component/_button.scss
View file

@ -378,15 +378,47 @@ a.button--alt {
} }
&:hover { &:hover {
.icon {
stroke: var(--color-link);
}
.button__label { .button__label {
color: var(--color-link); color: var(--color-link);
} }
} }
} }
.button--comment-icons {
@extend .button--alt;
color: var(--color-text);
background-color: transparent;
margin-right: var(--spacing-m);
padding: 0 var(--spacing-xxs);
height: initial;
padding: 5px;
jessopb commented 2022-07-05 17:28:45 +02:00 (Migrated from github.com)
Review
Copy link

I know it's not super D.R.Y. but I would duplicate the button--file-action class contents here.

Then we can get rid of commented out lines.

I know it's not super D.R.Y. but I would duplicate the button--file-action class contents here. Then we can get rid of commented out lines.
@media (max-width: $breakpoint-small) {
jessopb commented 2022-07-06 00:01:02 +02:00 (Migrated from github.com)
Review
Copy link

There's a duplicate padding: line here. Also, whenever possible, we're trying to use vars for spacing, as above. Does one of those work?

There's a duplicate padding: line here. Also, whenever possible, we're trying to use vars for spacing, as above. Does one of those work?
padding: 0 0;
}
.icon {
&:not(.color-override) {
stroke: var(--color-text);
}
}
.button__label {
min-width: 10px;
}
&:last-child {
margin-right: 0;
}
&:hover {
.button__label {
color: var(--color-link);
}
background-color: var(--color-primary);
}
}
[aria-expanded='true'].button--file-action { [aria-expanded='true'].button--file-action {
background-color: var(--color-header-background); background-color: var(--color-header-background);
.icon { .icon {

2
ui/scss/component/_form-field.scss
View file

@ -547,7 +547,7 @@ fieldset-group {
text-align: right; text-align: right;
span { span {
display: inline-block; vertical-align: super;
padding-right: 0px; padding-right: 0px;
} }
} }