diff --git a/public/blocked.css b/public/blocked.css
index 35b1ab2..d3a4e1f 100644
--- a/public/blocked.css
+++ b/public/blocked.css
@@ -1,4 +1,27 @@
#url, #rule {
font-family: monospace;
- opacity: .4;
+ padding: var(--border-radius);
+ border-radius: var(--border-radius);
+}
+
+#url {
+ background: #c6c6c6;
+ color: white;
+}
+
+#rule {
+ background: #ff0100;
+ color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+ #url {
+ background: #606060;
+ color: #121212;
+ }
+
+ #rule {
+ filter: saturate(50%);
+ color: #e8e8e8;
+ }
}
diff --git a/public/common.css b/public/common.css
index 95be70b..ede128a 100644
--- a/public/common.css
+++ b/public/common.css
@@ -1,5 +1,6 @@
:root {
--background-color: white;
+ --border-radius: 3px;
--text-color: black;
}
diff --git a/public/options.css b/public/options.css
index 45e4b70..d351090 100644
--- a/public/options.css
+++ b/public/options.css
@@ -1,6 +1,5 @@
:root {
--border-color: black;
- --border-radius: 3px;
--input-background-color: white;
}
diff --git a/src/helpers/__tests__/get-blocked-message.test.ts b/src/helpers/__tests__/get-blocked-message.test.ts
index df4dea5..9538675 100644
--- a/src/helpers/__tests__/get-blocked-message.test.ts
+++ b/src/helpers/__tests__/get-blocked-message.test.ts
@@ -4,7 +4,7 @@ test("getBlockedMessage() returns blocked message", () => {
expect(getBlockedMessage({
url: "http://youtube.com/",
rule: "youtube.com",
- })).toBe('http://youtube.com/ was blocked by rule youtube.com');
+ })).toBe('http://youtube.com/ was blocked by youtube.com');
expect(getBlockedMessage({
url: "http://youtube.com/",
@@ -13,7 +13,7 @@ test("getBlockedMessage() returns blocked message", () => {
count: 42,
period: "ALL_TIME",
},
- })).toBe('http://youtube.com/ was blocked (42x overall) by rule youtube.com');
+ })).toBe('http://youtube.com/ was blocked by youtube.com (42x overall)');
expect(getBlockedMessage({
url: "http://youtube.com/",
@@ -22,7 +22,7 @@ test("getBlockedMessage() returns blocked message", () => {
count: 5,
period: "TODAY",
},
- })).toBe('http://youtube.com/ was blocked (5x today) by rule youtube.com');
+ })).toBe('http://youtube.com/ was blocked by youtube.com (5x today)');
expect(getBlockedMessage({
url: "http://youtube.com/",
@@ -31,7 +31,7 @@ test("getBlockedMessage() returns blocked message", () => {
count: 12,
period: "THIS_WEEK",
},
- })).toBe('http://youtube.com/ was blocked (12x this week) by rule youtube.com');
+ })).toBe('http://youtube.com/ was blocked by youtube.com (12x this week)');
expect(getBlockedMessage({
url: "http://youtube.com/",
@@ -40,5 +40,5 @@ test("getBlockedMessage() returns blocked message", () => {
count: 38,
period: "THIS_MONTH",
},
- })).toBe('http://youtube.com/ was blocked (38x this month) by rule youtube.com');
+ })).toBe('http://youtube.com/ was blocked by youtube.com (38x this month)');
});
diff --git a/src/helpers/get-blocked-message.ts b/src/helpers/get-blocked-message.ts
index 315be7e..bbf7454 100644
--- a/src/helpers/get-blocked-message.ts
+++ b/src/helpers/get-blocked-message.ts
@@ -8,6 +8,6 @@ const periodStrings: Record = {
TODAY: "today",
};
-export default ({ url, rule, countParams: cp }: GetBlockedUrlParams): string => cp
- ? `${url} was blocked (${cp.count}x ${periodStrings[cp.period]}) by rule ${rule}`
- : `${url} was blocked by rule ${rule}`;
+export default ({ url, rule, countParams: cp }: GetBlockedUrlParams): string =>
+ `${url} was blocked by ${rule}`
+ + (cp ? ` (${cp.count}x ${periodStrings[cp.period]})` : "");