From c852ec03cf290c841a22e5fc82d8ab254c6396ab Mon Sep 17 00:00:00 2001
From: penge <ppenge@gmail.com>
Date: Fri, 29 Dec 2023 04:53:48 +0100
Subject: [PATCH] Improve look of blocked info page

- replace "by rule" with simple "by"
- move count to the end of message
---
 public/blocked.css                            | 25 ++++++++++++++++++-
 public/common.css                             |  1 +
 public/options.css                            |  1 -
 .../__tests__/get-blocked-message.test.ts     | 10 ++++----
 src/helpers/get-blocked-message.ts            |  6 ++---
 5 files changed, 33 insertions(+), 10 deletions(-)

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('<span id="url">http://youtube.com/</span> <b>was blocked</b> by rule <span id="rule">youtube.com</span>');
+  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> by <span id="rule">youtube.com</span>');
 
   expect(getBlockedMessage({
     url: "http://youtube.com/",
@@ -13,7 +13,7 @@ test("getBlockedMessage() returns blocked message", () => {
       count: 42,
       period: "ALL_TIME",
     },
-  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> (42x overall) by rule <span id="rule">youtube.com</span>');
+  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> by <span id="rule">youtube.com</span> (42x overall)');
 
   expect(getBlockedMessage({
     url: "http://youtube.com/",
@@ -22,7 +22,7 @@ test("getBlockedMessage() returns blocked message", () => {
       count: 5,
       period: "TODAY",
     },
-  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> (5x today) by rule <span id="rule">youtube.com</span>');
+  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> by <span id="rule">youtube.com</span> (5x today)');
 
   expect(getBlockedMessage({
     url: "http://youtube.com/",
@@ -31,7 +31,7 @@ test("getBlockedMessage() returns blocked message", () => {
       count: 12,
       period: "THIS_WEEK",
     },
-  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> (12x this week) by rule <span id="rule">youtube.com</span>');
+  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> by <span id="rule">youtube.com</span> (12x this week)');
 
   expect(getBlockedMessage({
     url: "http://youtube.com/",
@@ -40,5 +40,5 @@ test("getBlockedMessage() returns blocked message", () => {
       count: 38,
       period: "THIS_MONTH",
     },
-  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> (38x this month) by rule <span id="rule">youtube.com</span>');
+  })).toBe('<span id="url">http://youtube.com/</span> <b>was blocked</b> by <span id="rule">youtube.com</span> (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<CounterPeriod, string> = {
   TODAY: "today",
 };
 
-export default ({ url, rule, countParams: cp }: GetBlockedUrlParams): string => cp
-  ? `<span id="url">${url}</span> <b>was blocked</b> (${cp.count}x ${periodStrings[cp.period]}) by rule <span id="rule">${rule}</span>`
-  : `<span id="url">${url}</span> <b>was blocked</b> by rule <span id="rule">${rule}</span>`;
+export default ({ url, rule, countParams: cp }: GetBlockedUrlParams): string =>
+  `<span id="url">${url}</span> <b>was blocked</b> by <span id="rule">${rule}</span>`
+  + (cp ? ` (${cp.count}x ${periodStrings[cp.period]})` : "");