Global alert style tweaks

[gumbeauuu]

This update removes some styling to streamline the design and adjusts the yellow hue so that it's more harmonious with the primary blue, making the component more balanced in the interface.

Abstract collection: https://share.goabstract.com/4035d2f0-6e37-431c-9da7-4832eb5109a1

Dev issue: https://github.com/cityofaustin/techstack/issues/4954

Criteria

Before [desktop]

After [desktop]

Global alert

• [ ] Background color: face2f or USWDS: yellow-20v
• [ ] Text color: 1b1b1b or USWDS: gray-90

Alert label

• [ ] We don't need the container around the label anymore, so this can just be inline with the description text
• [ ] font-weight: medium or 500

Description

• [ ] Description text is now static, and no longer a link

Links

• [ ] Add a new "Read more" link after the description
  • [ ] EN: "Read me"
  • [ ] ES: " "
• [ ] The distance between the description text and read more link is 8px
• [ ] Add the trailing icon after the "Read me" string, the distance between those two elements are 4px
• [ ] Links to pages on alpha.austin.gov should display the arrow_forward icon from the Material icon font within our codebase
• [ ] Outbound links hosted outside of alpha.austin.gov should display the open_in_new icon from the Material icon font within our codebase

Conditional styling

• [ ] If >1 alert, add border-bottom: 1px, #fee685 or USWDS yellow-20v to all except the final alert in the list
• [ ] Mobile: don't display description

Responsive behavior

• [ ] Since the alert is now restyled to be all in-line, with no pill shaped label, lets let the text use the overflow-wrap. (I could be wrong on the property, but ultimately I'm wanting the text to flow normally, breaking into however many lines it needs to as the viewport contracts.)
  • [ ] Notice the tablet view, where the line break is flush left with the alert label but not the leading icon
• [ ] Entire banner becomes the tap-target
• [ ] Hide leading icon
• [ ] Hide link
• [ ] Place trailing icons to the right of the container

Location alert

Location alerts are similar but have some important distinctions since they are displayed in the body of a page instead of inline at the global level.

• Alert label is treated as a header for the component/object
• There are two descriptions:
  • a description that's specific to location content types
  • the description that comes from the global/parent alert, and this entire row is a clickable link
• "Read more" doesn't appear here, and instead the description row is the tap/click target.

[gumbeauuu]

Dev issue ported to: https://github.com/cityofaustin/techstack/issues/4954