commit d5836731f7b0a2710f1c008d269d77ef3d2316c3
author Adrià Vilanova Martínez <me@avm99963.com> Fri Mar 03 21:33:16 2023 +0100
committer Adrià Vilanova Martínez <me@avm99963.com> Fri Mar 03 21:35:01 2023 +0100
tree 75c1736d4690a1205b4a4f2e98a78e5f2e3cce4e
parent fcaf5b62eef0ce7386bfebfa1e1d80eaaed75a2b

Flatten threads: improve quote styles

The author component has been made smaller.

Bug: twpowertools:153, twpowertools:156

Change-Id: I34649c4ec572c3f069b96d64a77c761446e9b267

src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js

diff --git a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
index 2f1fb95..59bc6b6 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/QuoteAuthor.js
@@ -25,10 +25,15 @@
       margin-right: 4px;
     }
 
+    .reply-icon {
+      font-size: 20px;
+    }
+
     .name {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      font-size: 15px;
     }
     `,
   ];
@@ -40,7 +45,7 @@
 
   render() {
     return html`
-      <md-icon>reply</md-icon>
+      <md-icon class="reply-icon">reply</md-icon>
       <span class="name">${this.prevMessage?.author?.[1]?.[1]}</span>
       <md-standard-icon-button
           icon="arrow_upward"

src/contentScripts/communityConsole/flattenThreads/components/index.js

diff --git a/src/contentScripts/communityConsole/flattenThreads/components/index.js b/src/contentScripts/communityConsole/flattenThreads/components/index.js
index 13b4dba..bf532fb 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/index.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/index.js
@@ -78,7 +78,7 @@
 
     @media (hover: hover) {
       @supports selector(:has(div)) {
-        .quote-container:not(:hover) .buttons-row:not(:has(md-tonal-button:focus)) {
+        .quote-container:not(:hover) .buttons-row:not(:focus-within) {
           opacity: 0;
         }
       }