Improve look of blocked info page

- replace "by rule" with simple "by" - move count to the end of message
penge · Dec 29, 2023 · c852ec0 · c852ec0
1 parent 9a48cfb
commit c852ec0
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 10 deletions.
diff --git 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
@@ -1,5 +1,6 @@
 :root {
   --background-color: white;
+  --border-radius: 3px;
   --text-color: black;
 }
 

diff --git 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
@@ -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
@@ -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]})` : "");