Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Fix topbanner dark mode#418

Closed
SMotaal wants to merge 6 commits intonodejs:stagingfrom
SMotaal:fix-topbanner-dark-mode
Closed

Fix topbanner dark mode#418
SMotaal wants to merge 6 commits intonodejs:stagingfrom
SMotaal:fix-topbanner-dark-mode

Conversation

@SMotaal
Copy link
Contributor

@SMotaal SMotaal commented Feb 29, 2020

Description

Note This PR branches off #398

Add a new --color-fill-top-banner custom property in tokens.css using alpha blending to match light and dark.

This also restructures the pill-button as <a><button> instead of <button><a> to avoid the clashing hover color of the text. As a result, it was possible to refactor its styling as a single bannerButton instead of bannerCta and bannerButtonText.

Screen Shots

Screen Shot 2020-02-29 at 1 35 24 PM

Screen Shot 2020-02-29 at 1 35 29 PM

Live Build

Feb29 https://storage.googleapis.com/staging.nodejs.dev/a003e53/index.html

Related Issues

#398

@SMotaal SMotaal requested a review from benhalverson February 29, 2020 18:45
@codecov-io
Copy link

Codecov Report

❗ No coverage uploaded for pull request base (staging@2906dbc). Click here to learn what that means.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##             staging     #418   +/-   ##
==========================================
  Coverage           ?   27.69%           
==========================================
  Files              ?       37           
  Lines              ?      455           
  Branches           ?      129           
==========================================
  Hits               ?      126           
  Misses             ?      313           
  Partials           ?       16
Impacted Files Coverage Δ
src/pages/index.tsx 0% <ø> (ø)
src/components/banner.tsx 100% <100%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2906dbc...a003e53. Read the comment docs.

@SMotaal
Copy link
Contributor Author

SMotaal commented Feb 29, 2020

/gcbrun

@SMotaal
Copy link
Contributor Author

SMotaal commented Feb 29, 2020

@benhalverson I just noticed this button styling issue:

Chrome vs. Safari

Screen Shot 2020-02-29 at 3 53 20 PM (2)

I think we can close this regardless but, this needs to be a separate PR… thoughts?

@benhalverson
Copy link
Member

Yes it should be a new PR against staging since my branch is merged and closed.

@SMotaal
Copy link
Contributor Author

SMotaal commented Mar 3, 2020

Closing after opening #422

@SMotaal SMotaal closed this Mar 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

Comments