Update banner spacing and add rounded corners #2117
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
zackkrida
added
🟧 priority: high
zackkrida
requested review from
fcoveram and
dhruvkb
and removed request for
AetherUnbound and
obulat
|
Size Change: -6.82 kB (-1%) Total Size: 834 kB
ℹ️ View Unchanged
|
|
Here is an idea: One alert banner with four variants, and one customized banner. 
The alert banner has four variants (Info, Warning, Success, Error) and the customized banner is in dark charcoal and allows changing the icon as in the former types. These two banners are due to having yellow and white backgrounds, and since Openverse is mostly white, I prioritized a style without border color and rely on icon taxonomy to convey the banner's purpose. In that vein, the color contrast requirement is met between icon and banner background color. Our current case shows banners in the homepage, but I think we can address cases like Openverse is not working correctly. See the right side of the image below.
Reaching consistency is hard as the component needs to work over two different backgrounds, but if we use the customized dark banner for some cases, we can handle the alerts confidently. What do you think of this idea? Pinging @dhruvkb for visibility |
|
@fcoveram this PR was only focused on the spacing and rounded corners you mentioned previously, but I love your designs for an alert system! That would also require very little work—it is only a matter of small styling adjustments. Could you move those designs to their own issue for additional discussion? |
|
I like the alerts, but that would increase the scope of the PR considerably. It would be best to spin it out into its own issue. |
|
Sorry for extending the PR scope, last comments in #2015 mention style specs and that's what the design shared is about. Putting aside the alert variants, the style specs for the dark banner are: Small (for
|
|
Thanks, @fcoveram! This PR now uses 8px for the banner gap and top/side margins and is ready for review. We'll implement the dark banner styles and/or the alert styles in a separate PR. |
fcoveram
approved these changes
May 19, 2023
8 tasks
zackkrida
changed the title
zackkrida
commented
May 19, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes
Related to #2015 by @zackkrida
Description
Updates the banner styles to have padding and rounded edges.
Testing Instructions
Check out some localhost page(s) with banners, like:
localhost:8443/ar?referrer=creativecommons.org
localhost:8443/search-help?referrer=creativecommons.org
Checklist
Update index.md).main) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin