filter for specific attester organization on UI

[divine-comedian]

Showing to the user when we have applied filtering for a specific attester group that the user knows they are sorting by most vouches from given attester organizations.

AC

on the all projects page:

• when filtering by source platform the filter selection component is shown above list of projects
• when filtering by attester org the filter selection component is shown above list of projects
• the filtered item selected from drop down filter menu matches the one shown in the component text
• can remove a filter by clicking the x on the filter component
• removing the filter from the drop down menu also removes the corresponding filter component

[Tosinolawale]

https://www.figma.com/design/QBvhJZY3C93a8NKqcMnEHX/DeVouch?node-id=8310-13429&t=dIG7jJEkfjqgr5Oe-1
@divine-comedian @mateodaza @MohammadPCh

[mateodaza]

Linking this issue here as reference from the backend

[divine-comedian]

@Tosinolawale what does this design look like if multiple sources and groups are filtered for? How does it handle overflow if we fill up the whole line block with filter conditions?
i.e. Imagine the possible filter conditions

Attested By: Gitcoin Passport Holders, Optimism Badgeholders, Giveth Verifiers From: Retro Funding 4, Retro Funding 5, Gitcoin, Giveth

[mateodaza]

@Tosinolawale does this design make sense if we add more than one organization on the filter?

[Tosinolawale]

@Tosinolawale what does this design look like if multiple sources and groups are filtered for? How does it handle overflow if we fill up the whole line block with filter conditions? i.e. Imagine the possible filter conditions

Attested By: Gitcoin Passport Holders, Optimism Badgeholders, Giveth Verifiers From: Retro Funding 4, Retro Funding 5, Gitcoin, Giveth

@divine-comedian @mateodaza that Page itself is a component variant which detailed the multiple selection states and overflow. I should have shown the different states clearly.
I have shown the separate states here

https://www.figma.com/design/QBvhJZY3C93a8NKqcMnEHX/DeVouch?node-id=8310-13429&t=IKoPfB4QtGGSnX17-1

[divine-comedian]

@mateodaza - I think we pushed this out too with the latest changes to sorting / filtering - can you confirm if its ready for QA?

[mateodaza]

@mateodaza - I think we pushed this out too with the latest changes to sorting / filtering - can you confirm if its ready for QA?

Yep I think @LatifatAbdullahi already did it. If not, it's ready for QA

[LatifatAbdullahi]

• When filtering by source platform the filter selection component is shown above list of projects - Pass
• When filtering by attester org the filter selection component is shown above list of projects - Pass
• The filtered item selected from drop down filter menu matches the one shown in the component text - Pass
• Removing a filter by clicking the x on the filter component - Pass
• Removing the filter from the drop down menu also removes the corresponding filter component - Pass

@mateodaza

UI issues

Staging

Design

• In the "Sort by" section the font weight of the selected option should be 700
• The background of the Filter selection component should not be white, please check the design above
• The Filter selection component in the Design, there is no colon (please remove the colon)
• In the Design there is no search bar component @Tosinolawale @divine-comedian (Are we removing the Search bar component?)
• From the design, when Users select 3 or more Source platforms to be filtered, we should have atmost 3 filter tags in a single line, same goes for filtering Attested Org (Currently, if we have 3 or more tags, only 2 tags are in a single line instead of 3)

[divine-comedian]

The search bar is definitely staying on that page

@Tosinolawale can you confirm the position of the search bar is correct?
@mateodaza I'll let you take a look and correct the other UI issues reported.

[Tosinolawale]

The search bar is definitely staying on that page

@Tosinolawale can you confirm the position of the search bar is correct? @mateodaza I'll let you take a look and correct the other UI issues reported.

@mateodaza @LatifatAbdullahi