web: `HoverOverlay` redesign

Created by: valerybugakov

Changes

• Updated line-height for a couple of global classes and elements to match the latest mockups and to be Pixel Perfect HoverOverlay component. Broader inspection of this rule will be done in a separate PR: https://github.com/sourcegraph/sourcegraph/issues/21324.
• Updated .alert-link styles.
• Update .badge and .btn paddings and font-size.
• Fixed strange Safari issue related to the sticky close button in the HoverOverlay.
• Added redesign styles for the HoverOverlay component.

Notes

• In a couple of places, new classes were added. i.e. additionally to .hover-overlay__hover-error new .hover-overlay__hover-error-redesign is added. It's done because it's easier to omit all the current version styles and add new ones for the redesign theme. After the redesign release, we will keep only one class.
• For the redesign styles color CSS variables are used which might not be defined on every code host. I see that we practice that in other components. It looks fine because if the color variable is not present the element will use another color defined for the containing element.
• In the current implementation, badges are aligned between different content entries. It means that in the first content entry, the margin between the close icon and badge is smaller than in the mockups. Screenshots: left — mockups, right — implementation. @sourcegraph/design, let me know if want to change this.

       

• Additional padding-top and border-top were added in the implementation to the alerts container to separate it from the scrollable content. Otherwise, text scrolls right from the alert border which doesn't look good. @sourcegraph/design, let me know if want to change this.

       

Github issue: https://github.com/sourcegraph/sourcegraph/issues/19633. Figma mockups.