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
ByronEricPerez commented 2022-06-21 00:02:14 +02:00 (Migrated from github.com)

Fixes

Issue Number: https://github.com/lbryio/lbry-desktop/issues/7564

What is the current behavior?

image

What is the new behavior?

image

Other information

PR Checklist

Toggle...

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting)
  • Refactoring (no functional changes)
  • Documentation changes
  • Other - Please describe:

Please check all that apply to this PR using "x":

  • I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
  • I added a line describing my change to CHANGELOG.md
  • I have checked that this PR does not introduce a breaking change
  • This PR introduces breaking changes and I have provided a detailed explanation below
## Fixes Issue Number: https://github.com/lbryio/lbry-desktop/issues/7564 <!-- Tip: - Add keywords to directly close the Issue when the PR is merged. - Skip the keyword if the Issue contains multiple items. - https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword --> ## What is the current behavior? ![image](https://user-images.githubusercontent.com/89370060/175113363-cce6e79c-142f-42cf-8fb9-52e9f5097c56.png) ## What is the new behavior? ![image](https://user-images.githubusercontent.com/89370060/175113227-6a43d5b5-bfd5-468d-b4d9-873dd798db29.png) ## Other information <!-- If this PR contains a breaking change, please describe the impact and solution strategy for existing applications below. --> ## PR Checklist <!-- For the checkbox formatting to work properly, make sure there are no spaces on either side of the "x" --> <details><summary>Toggle...</summary> What kind of change does this PR introduce? - [x] Bugfix - [ ] Feature - [ ] Code style update (formatting) - [ ] Refactoring (no functional changes) - [ ] Documentation changes - [ ] Other - Please describe: Please check all that apply to this PR using "x": - [x] I have checked that this PR is not a duplicate of an existing PR (open, closed or merged) - [ ] I added a line describing my change to CHANGELOG.md - [x] I have checked that this PR does not introduce a breaking change - [ ] This PR introduces breaking changes and I have provided a detailed explanation below </details>
jessopb commented 2022-06-22 20:49:59 +02:00 (Migrated from github.com)

thanks! I'll take a look.

thanks! I'll take a look.
ByronEricPerez commented 2022-06-28 14:52:53 +02:00 (Migrated from github.com)

Hi @jessopb all good with this, do you need me to change something?

Hi @jessopb all good with this, do you need me to change something?
jessopb commented 2022-06-28 21:30:44 +02:00 (Migrated from github.com)

I think this would be cleaner if it weren't class "button--file-action". It's not completely clear what file-action is, but this is a comment action or something. I think it deserves its own class. button--comment-icons, perhaps.

I think this would be cleaner if it weren't class "button--file-action". It's not completely clear what file-action is, but this is a comment action or something. I think it deserves its own class. button--comment-icons, perhaps.
ByronEricPerez commented 2022-06-30 22:01:52 +02:00 (Migrated from github.com)

Hello, @jessopb I have already sent the changes, is this ok?

Hello, @jessopb I have already sent the changes, is this ok?
jessopb commented 2022-07-01 16:25:49 +02:00 (Migrated from github.com)

@ByronEricPerez I think it just needs a clean class that takes the place of button--file-actions because it's not a "file-action".

@ByronEricPerez I think it just needs a clean class that takes the place of button--file-actions because it's not a "file-action".
ByronEricPerez commented 2022-07-05 15:09:48 +02:00 (Migrated from github.com)

Hello @jessopb , it is not entirely clear to me, would it be to rename the class?

Hello @jessopb , it is not entirely clear to me, would it be to rename the class?
jessopb (Migrated from github.com) requested changes 2022-07-05 17:28:52 +02:00
jessopb (Migrated from github.com) commented 2022-07-05 17:25:17 +02:00

this should not need button--file-action
One class should be sufficient to specify what this should look like.
button--comment-icons should contain all that it needs.

this should not need button--file-action One class should be sufficient to specify what this should look like. button--comment-icons should contain all that it needs.
@ -390,0 +391,4 @@
margin-right: var(--spacing-m);
padding: 0 var(--spacing-xxs);
height: initial;
padding: 5px;
jessopb (Migrated from github.com) commented 2022-07-05 17:28:45 +02:00

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.
ByronEricPerez commented 2022-07-05 21:37:15 +02:00 (Migrated from github.com)

Hi @jessopb , would that be ok?

Hi @jessopb , would that be ok?
jessopb (Migrated from github.com) reviewed 2022-07-06 00:02:15 +02:00
jessopb (Migrated from github.com) left a comment

Yeah, this is better. Just a couple more comments.

Yeah, this is better. Just a couple more comments.
jessopb (Migrated from github.com) commented 2022-07-05 23:49:48 +02:00

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.
@ -390,0 +393,4 @@
height: initial;
padding: 5px;
@media (max-width: $breakpoint-small) {
jessopb (Migrated from github.com) commented 2022-07-06 00:01:02 +02:00

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?
jessopb (Migrated from github.com) approved these changes 2022-07-07 19:43:01 +02:00
jessopb (Migrated from github.com) left a comment

This looks good!

This looks good!
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#7620
No description provided.