[DDW-852] Improve Stake Pools list view attention

[renanvalentin]

This PR separate the buttons from the search bar.

Todos

• List view tooltip visible for first-time users
• Improve button hover effect

Screenshots

Testing Checklist

• Slack QA thread
• Test

Test Scenarios

Scenario 1: List view tooltip displayed
Given I (freshly installed | upgraded) Daedalus
When I navigate to 'Stake pools' tab
Then the list view tool tip is displayed
And the list view tool tip has the words 'List View' printed

Scenario 2: List view tooltip after hover|click,  not displayed in subsequent launch(es)
Given I (freshly installed | upgraded) Daedalus
And I navigate to 'Stake pools' tab
And the list view tool tip is displayed
And I have (hovered | clicked) on List View icon
And the list view tool tip has disappeared
When I relaunch Daedalus
Then the list view tool tip is not displayed
And upon hover the list view tool tip is displayed
And  the list view tool tip has the words 'List View' printed

Scenario 3: List view tooltip displayed in subsequent launch(es)
Given I (freshly installed | upgraded) Daedalus
And I navigate to 'Stake pools' tab
And the list view tool tip is displayed
When I relaunch Daedalus
Then the list view tool tip is still displayed
And upon (hover | click) on List view icon, the list view tool tip disappears

---

Review Checklist

Basics

• PR assigned to the PR author(s)
• input-output-hk/daedalus-dev and input-output-hk/daedalus-qa assigned as PR reviewers
• If there are UI changes, Alexander Rukin assigned as an additional reviewer
• All visual regression testing has been reviewed (Go to Github Actions tab -> Select Chromatic workflow -> Run on your working branch)
• PR has appropriate labels (release-vNext, feature/bug/chore, WIP)
• PR link is added to a Jira ticket, ticket moved to In Review
• PR is updated to the most recent version of the target branch (and there are no conflicts)
• PR has a good description that summarizes all changes
• PR contains screenshots (in case of UI changes)
• CHANGELOG entry has been added to the top of the appropriate section (Features, Fixes, Chores) and is linked to the correct PR on GitHub
• There are no missing translations (running yarn manage:translations produces no changes)
• Text changes are proofread and approved (Jane Wild / Amy Reeve)
• Japanese text changes are proofread and approved (Junko Oda)
• Storybook works and no stories are broken (yarn storybook)
• In case of dependency changes yarn.lock file is updated

Code Quality

• Important parts of the code are properly commented and documented
• Code is properly typed with typescript types
• React components are split-up enough to avoid unnecessary re-renderings
• Any code that only works in main process is neatly separated from components

Testing

• New feature/change is covered by acceptance tests
• New feature/change is manually tested and approved by QA team
• All existing acceptance tests are still up-to-date
• New feature/change is covered by Daedalus Testing scenario
• All existing Daedalus Testing scenarios are still up-to-date

After Review

• Update Slack QA thread by marking it with a green checkmark

[alexander-rukin]

hm, this hover effect doesn't look right 😓 it should just go from 0.3 to 0.7 current problem is probably because of "< button >" usage

[alexander-rukin]

@daniloprates didn't we want to have this popup "pre-opened" for the first visit?

[thedanheller]

@daniloprates didn't we want to have this popup "pre-opened" for the first visit?

We do! @renanvalentin can we have it? Just so we make sure everyone knows the list view exists.

[renanvalentin]

@daniloprates didn't we want to have this popup "pre-opened" for the first visit?

We do! @renanvalentin can we have it? Just so we make sure everyone knows the list view exists.

@daniloprates @alexander-rukin should we do this in another ticket? Otherwise it will slight increase the scope of this one.

[renanvalentin]

@alexander-rukin @daniloprates added tooltip for list view. The user has to click on the list view button in order to register "seen" event. Does it makes sense?

[alexander-rukin]

It can act like this:

• you show tooltip when user sees it
• if he hovers it (or other icon) it's hidden for this "app run"
• if user clicks one of those icons it's marked as "seen" and never shown automatically again

cc @daniloprates

[alexander-rukin]

z index should be changed + scroll is not smoth 🤷

[alexander-rukin]

position is a bit wrong -> we use 4px distance from element for tooltip positioning, and in this case element we are pointing to is icon, not container - reference https://zpl.io/VOEEv6r

[renanvalentin]

z index should be changed + scroll is not smoth 🤷

@alexander-rukin created a new issue to fix the zIndex problem as it will result in regression testing:
https://input-output.atlassian.net/browse/DDW-939

[alexander-rukin]

hover issue is still not fixed

[miorsufianiohk]

LGTM. Great work @renanvalentin . Tested on 20763 👍

[renanvalentin]

hover issue is still not fixed

@alexander-rukin should've been fixed now

[alexander-rukin]

#2847 (comment)

hm, this hover effect doesn't look right 😓 it should just go from 0.3 to 0.7 current problem is probably because of "< button >" usage

current hover is 1 -> should be 0.7

[renanvalentin]

@alexander-rukin done 👏

[alexander-rukin]

screencast.2022-02-10.18-38-53.mp4

I've noticed strange behaviour =/
sorry 🙏

[alexander-rukin]

looks good