Remove plus button and fix outline
Created by: philipp-spiess
Currently, the action buttons shown in the saved searches panel on the home pages shows an outline for when one button is selected:
This is an issue in multiple ways:
- It steals attention even though there's nothing to work on
- It makes the site less accessible since it can be confused with the active element.
This has also been raised internally: https://sourcegraph.slack.com/archives/CHEKCRWKV/p1645538194224819
To fix this and also pave the way for making this panel a tab component for the user invitations work (https://github.com/sourcegraph/sourcegraph/issues/31214), we're making two small changes here as also discussed in this Figma:
- We remove the plus sign since it looks really odd and people clashes with the null page that also has an "add" CTA. Additionally, if a user already has saved searches, they can add one by following the link at the bottom of this panel.
- Instead of showing an active outline, we toggle between the outline properties of the button to make it appear "grayed out"
Note: as part of the above work we will also make this button group collapsable if there's not enough space to avoid it overlapping the tab elements. This will happen later in https://github.com/sourcegraph/sourcegraph/pull/31406.