feat: New Clear Search Button

[popkinj]

• Button beside the sidebar title that clears both the search results and the text in the search title.
• Hides when not searching anything

---

Thanks for the PR!

Deployments, as required, will be available below:

• Frontend
• Backend

Please create PRs in draft mode. Mark as ready to enable:

• Analysis Workflow

After merge, new images are deployed in:

• Merge Workflow

[popkinj]

[sonarqubecloud]

Quality Gate passed for 'nr-omrr-transparency-frontend'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
87.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[kdbelair]

@popkinj Looks good - just noticing that the number of filters is being cut off at the top of screen on mobile.

[dawnbcgov]

There are a couple of issues I'm seeing:

• the buttons now are a different size than the search bar
• It looks like the borders are 2px when they should be 1px
• there is a white border now when active, which we don't need
• it looks like the search tray names haven't been updated
• I don't think the zoom on hover feels particularly clean
• I think carrying over the notification to the other buttons is interesting, but I wonder why we stopped using the notification colour from the mockups? Also there are clipping issues on mobile as seen in Konane's screenshot

On PR:

On mockups:

[popkinj]

Thanks for the feedback @dawnbcgov and @kdbelair . I'll take a look.

[popkinj]

Latest updates:

• Replace chip with red dot
• Updated text in bottom draw to match the buttons (Search & Filter)
• Removed the underline in the autosearch dropdown.
• Removed the hover effect for the filter/search buttons

[kdbelair]

The latest changes you have flagged in your latest update look good and are working well on my end. I understand you might be addressing these additional notes/observations in a different PR, but just flagging them here to keep track:

• the buttons are a different size than the search bar
• It looks like the borders are 2px when they should be 1px
• there is a white border now when active, which we don't need

I also noted this, but this would also change on the text search page too:

• the filter name of "Land Application Biosolids" should be updated to "Land Application" as shown in the Figma

[popkinj]

The latest changes you have flagged in your latest update look good and are working well on my end. I understand you might be addressing these additional notes/observations in a different PR, but just flagging them here to keep track:

* the buttons are a different size than the search bar

* It looks like the borders are 2px when they should be 1px

* there is a white border now when active, which we don't need

I also noted this, but this would also change on the text search page too:

* the filter name of "Land Application Biosolids" should be updated to "Land Application" as shown in the Figma

Correct @kdbelair . I would like to merge my existing PRs before I address the button issues. :)

[kdbelair]

Thanks @popkinj - approved.

[popkinj]

Working on these fixes now.

[popkinj]

I could probably tweak these styles all week long hahaha.
Think things are looking good now.

[kdbelair]

@popkinj -The status, filter and find me buttons still look slightly thicker than the search bar on desktop. Can you take a quick look if it can be adjusted? Everything else looks great

[kdbelair]

Confirming that the size of the icons has been fixed. Good to go from my end.