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 +47 -2
2 changed files with 47 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 8a163e0f02 - Show all commits

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

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

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

@ -350,6 +350,51 @@ a.button--alt {
background-color: transparent;
margin-right: var(--spacing-m);
padding: 0 var(--spacing-xxs);
&.button--comment-icons {
height: initial;
padding: 5px;
}
&.button--file-action-active {
.icon {
fill: var(--color-primary-alt);
stroke: var(--color-primary) !important; //fixme
color: var(--color-primary);
}
}
@media (max-width: $breakpoint-small) {
padding: 0 0;
}
.icon {
&:not(.color-override) {
stroke: var(--color-text);
}
}
.button__label {
jessopb commented 2022-07-05 23:49:48 +02:00 (Migrated from github.com)
Review
Copy link

If you look in the code for button--file-action-active, you'll see that it's used like this:

<Button
        title={__('I like this')}
        authSrc="filereaction_like"
        className={classnames('button--file-action button-like', {
          'button--file-action-active': myReaction === REACTION_TYPES.LIKE,
        })}

It does not seem that button--comment-icons-active is used anywhere - I'm not sure it's necessary.

If you look in the code for button--file-action-active, you'll see that it's used like this: ``` <Button title={__('I like this')} authSrc="filereaction_like" className={classnames('button--file-action button-like', { 'button--file-action-active': myReaction === REACTION_TYPES.LIKE, })} ``` It does not seem that `button--comment-icons-active` is used anywhere - I'm not sure it's necessary.
min-width: 10px;
}
&:last-child {
margin-right: 0;
}
&:hover {
.button__label {
color: var(--color-link);
}
}
}
.button--comment-icons {
/* @extend .button--alt;
color: var(--color-text);
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.
background-color: transparent;
margin-right: var(--spacing-m);
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 var(--spacing-xxs);
height: initial;
padding: 5px;
@ -383,7 +428,7 @@ a.button--alt {
.button__label {
color: var(--color-link);
}
}
} */
}
[aria-expanded='true'].button--file-action {