From 5ae2b747b0b75db9264a6f43450fd6b00c5841a3 Mon Sep 17 00:00:00 2001
From: Marcus <marcustyphoon@gmail.com>
Date: Mon, 9 Dec 2024 15:42:42 -0800
Subject: [PATCH] implement quote replies css

---
 src/features/quote_replies.css | 43 ------------------------------
 src/features/quote_replies.js  | 48 +++++++++++++++++++++++++++++++---
 2 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/features/quote_replies.css b/src/features/quote_replies.css
index f38f96ae1..e69de29bb 100644
--- a/src/features/quote_replies.css
+++ b/src/features/quote_replies.css
@@ -1,43 +0,0 @@
-button.xkit-quote-replies {
-  position: relative;
-  align-self: center;
-  transform: translateY(-2px);
-
-  display: inline-flex;
-  align-items: center;
-  margin: 0 6px;
-
-  cursor: pointer;
-}
-
-button.xkit-quote-replies svg {
-  width: 21.5px;
-  height: 21.5px;
-
-  fill: rgb(var(--blue));
-  transition: all .25s ease-out .4s;
-}
-
-button.xkit-quote-replies:disabled svg {
-  fill: rgba(var(--black), 0.65);
-  transition-property: none;
-}
-
-button.xkit-quote-replies-dropdown {
-  align-self: flex-start;
-  margin: 10px 0 0;
-}
-
-@media (hover: hover) {
-  button.xkit-quote-replies svg {
-    opacity: 0;
-    transform: scale(0);
-  }
-
-  /* temporary. this probably needs keyToCss */
-  [aria-label="Notification"]:is(:hover, :focus-within) button.xkit-quote-replies svg,
-  [aria-label="Notification"]:is(:hover, :focus-within) + div button.xkit-quote-replies svg {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
diff --git a/src/features/quote_replies.js b/src/features/quote_replies.js
index a34041bd4..f8d9dd5c7 100644
--- a/src/features/quote_replies.js
+++ b/src/features/quote_replies.js
@@ -2,7 +2,7 @@ import { keyToCss } from '../utils/css_map.js';
 import { dom } from '../utils/dom.js';
 import { inject } from '../utils/inject.js';
 import { showErrorModal } from '../utils/modals.js';
-import { notificationSelector } from '../utils/interface.js';
+import { buildStyle, notificationSelector } from '../utils/interface.js';
 import { pageModifications } from '../utils/mutations.js';
 import { notify } from '../utils/notifications.js';
 import { getPreferences } from '../utils/preferences.js';
@@ -14,6 +14,50 @@ const storageKey = 'quote_replies.draftLocation';
 const buttonClass = 'xkit-quote-replies';
 const dropdownButtonClass = 'xkit-quote-replies-dropdown';
 
+export const styleElement = buildStyle(`
+button.xkit-quote-replies {
+  position: relative;
+  align-self: center;
+  transform: translateY(-2px);
+
+  display: inline-flex;
+  align-items: center;
+  margin: 0 6px;
+
+  cursor: pointer;
+}
+
+button.xkit-quote-replies svg {
+  width: 21.5px;
+  height: 21.5px;
+
+  fill: rgb(var(--blue));
+  transition: all .25s ease-out .4s;
+}
+
+button.xkit-quote-replies:disabled svg {
+  fill: rgba(var(--black), 0.65);
+  transition-property: none;
+}
+
+button.xkit-quote-replies-dropdown {
+  align-self: flex-start;
+  margin: 10px 0 0;
+}
+
+@media (hover: hover) {
+  button.xkit-quote-replies svg {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  ${notificationSelector}:is(:hover, :focus-within) button.xkit-quote-replies svg {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+`);
+
 const originalPostTagStorageKey = 'quick_tags.preferences.originalPostTag';
 
 const activitySelector = `:is(${keyToCss('notification')} > ${keyToCss('activity')}, ${keyToCss('activityContent')})`;
@@ -178,5 +222,3 @@ export const onStorageChanged = async function (changes) {
     ({ tagReplyingBlog, newTab } = await getPreferences('quote_replies'));
   }
 };
-
-export const stylesheet = true;