Set an "error" class instead of hardcoding a text color.

This commit is contained in:
David Fifield 2019-07-22 22:54:01 -06:00
parent 8a56baa8e1
commit 8f885c7557
4 changed files with 19 additions and 5 deletions

View file

@ -16,7 +16,7 @@ class BadgeUI extends UI {
missingFeature(missing) { missingFeature(missing) {
this.popup.setImgSrc('off'); this.popup.setImgSrc('off');
this.popup.setStatusText("Snowflake is off"); this.popup.setStatusText("Snowflake is off");
this.popup.setStatusDesc(missing, 'firebrick'); this.popup.setStatusDesc(missing, true);
this.popup.hideButton(); this.popup.hideButton();
} }

View file

@ -1,4 +1,5 @@
body { body {
color: black;
margin: 10px; margin: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
width: 300px; width: 300px;
@ -17,11 +18,15 @@ body {
} }
.b a { .b a {
color: black; color: inherit;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
.error {
color: firebrick;
}
.learn:before { .learn:before {
content : " "; content : " ";
display: block; display: block;

View file

@ -1,5 +1,14 @@
/* exported Popup */ /* exported Popup */
// Add or remove a class from elem.classList, depending on cond.
function setClass(elem, className, cond) {
if (cond) {
elem.classList.add(className);
} else {
elem.classList.remove(className);
}
}
class Popup { class Popup {
constructor() { constructor() {
this.div = document.getElementById('active'); this.div = document.getElementById('active');
@ -13,9 +22,9 @@ class Popup {
setStatusText(txt) { setStatusText(txt) {
this.statustext.innerText = txt; this.statustext.innerText = txt;
} }
setStatusDesc(desc, color) { setStatusDesc(desc, error) {
this.statusdesc.innerText = desc; this.statusdesc.innerText = desc;
this.statusdesc.style.color = color || 'black'; setClass(this.statusdesc, 'error', error);
} }
hideButton() { hideButton() {
document.querySelector('.button').style.display = 'none'; document.querySelector('.button').style.display = 'none';

View file

@ -11,7 +11,7 @@ port.onMessage.addListener((m) => {
if (missingFeature) { if (missingFeature) {
popup.setImgSrc('off'); popup.setImgSrc('off');
popup.setStatusText("Snowflake is off"); popup.setStatusText("Snowflake is off");
popup.setStatusDesc("WebRTC feature is not detected.", 'firebrick'); popup.setStatusDesc("WebRTC feature is not detected.", true);
popup.hideButton(); popup.hideButton();
return; return;
} }