+
diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx
index 7edf16ee..6df42524 100644
--- a/src/components/reply-quote-preview/reply-quote-preview.tsx
+++ b/src/components/reply-quote-preview/reply-quote-preview.tsx
@@ -15,7 +15,7 @@ interface ReplyQuotePreviewProps {
}
const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
- const targetElements = document.querySelectorAll(`.${cid}`);
+ const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
if (targetElements.length === 0) return;
@@ -97,7 +97,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
const handleMouseLeave = (cid: string | null) => {
if (cid) {
- const targetElements = document.querySelectorAll(`.${cid}`);
+ const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
targetElements.forEach((element) => {
element.classList.remove('highlight');
});
@@ -183,7 +183,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
const handleMouseLeave = (cid: string | null) => {
if (cid) {
- const targetElements = document.querySelectorAll(`.${cid}`);
+ const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
targetElements.forEach((element) => {
element.classList.remove('highlight');
});
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 346ce278..a0d2b4ab 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -5,9 +5,10 @@ import styles from './tooltip.module.css';
interface TooltipProps {
content: string;
children: ReactNode;
+ showTooltip?: boolean;
}
-const Tooltip = ({ content, children }: TooltipProps) => {
+const Tooltip = ({ content, children, showTooltip = true }: TooltipProps) => {
const [isOpen, setIsOpen] = useState(false);
const { refs, floatingStyles, context } = useFloating({
@@ -36,13 +37,15 @@ const Tooltip = ({ content, children }: TooltipProps) => {
{children}
-
- {isOpen && (
-
- {content}
-
- )}
-
+ {showTooltip && (
+
+ {isOpen && (
+
+ {content}
+
+ )}
+
+ )}
>
);
};
diff --git a/src/hooks/use-author-address-click.ts b/src/hooks/use-author-address-click.ts
index c8d50949..76ef510a 100644
--- a/src/hooks/use-author-address-click.ts
+++ b/src/hooks/use-author-address-click.ts
@@ -1,9 +1,11 @@
-const useAuthorAddressClick = () => {
- const handleUserAddressClick = (shortAddress: string | undefined) => {
- if (!shortAddress) return;
+import { useParams } from 'react-router-dom';
+const useAuthorAddressClick = () => {
+ const { commentCid } = useParams<{ commentCid: string }>();
+
+ const handleUserAddressClick = (shortAddress: string) => {
// Select the elements corresponding to the clicked short address
- const elements = document.querySelectorAll(`.${shortAddress}`);
+ const elements = document.querySelectorAll(`[data-author-address="${shortAddress}"]`);
// Check if the clicked address is already highlighted
const isAlreadyHighlighted = Array.from(elements).some((element) => element.classList.contains('highlight'));
@@ -17,9 +19,11 @@ const useAuthorAddressClick = () => {
// If the clicked address was already highlighted, don't add the highlight back
if (isAlreadyHighlighted) return;
- // Highlight the new elements
+ // Highlight the new elements, excluding the element matching the cid if it is the OP post
elements.forEach((element) => {
- element.classList.add('highlight');
+ if (element.getAttribute('data-cid') !== commentCid) {
+ element.classList.add('highlight');
+ }
});
};
diff --git a/src/index.css b/src/index.css
index 249adaf5..77265635 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,10 +26,6 @@ hr {
color: var(--post-greentext-color);
}
-.highlight {
- background: var(--reply-highlight-background-color) !important;
-}
-
.capitalize {
text-transform: capitalize;
}
@@ -55,6 +51,10 @@ hr {
select {
filter: var(--filter80);
}
+
+ .highlight {
+ background: var(--reply-highlight-background-color) !important;
+ }
}
@media (min-width: 640px) {
@@ -69,4 +69,11 @@ hr {
color: var(--button-desktop-text-color-hover);
cursor: pointer;
}
+
+ .highlight {
+ background: var(--reply-highlight-background-color) !important;
+ border: var(--reply-highlight-border) !important;
+ border-left: var(--reply-highlight-border-left, revert) !important;
+ border-top: var(--reply-highlight-border-top, revert) !important;
+ }
}
\ No newline at end of file
diff --git a/src/themes.css b/src/themes.css
index 0a54d42a..ebd4b670 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -170,6 +170,7 @@
/* reply highlight */
--reply-highlight-background-color: #f0c0b0;
+ --reply-highlight-border: 1px solid #d99f91;
/* reply modal */
--reply-modal-field-input-border: 1px solid #aaa;
@@ -375,6 +376,7 @@
/* reply highlight */
--reply-highlight-background-color: #d6bad0;
+ --reply-highlight-border: 1px solid #ba9dbf;
/* reply modal */
--reply-modal-field-input-border: 1px solid #aaa;
@@ -549,9 +551,7 @@
--quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
/* reply desktop */
- --side-arrows-color: #e0bfb7;
--reply-desktop-background-color: #f0e0d6;
- --reply-desktop-border: 1px solid #d9bfb7;
/* reply highlight */
--reply-highlight-background-color: #f0c0b0;
@@ -734,9 +734,7 @@
--quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
/* reply desktop */
- --side-arrows-color: #b7c5d9;
--reply-desktop-background-color: #d6daf0;
- --reply-desktop-border: 1px solid #b7c5d9;
/* reply highlight */
--reply-highlight-background-color: #d6bad0;
@@ -937,6 +935,8 @@
--side-arrows-color: #c5c8c6;
--reply-desktop-background-color: #282a2e;
--reply-desktop-border: 1px solid #282a2e;
+ --reply-desktop-border-left: 1px solid #282a2e;
+ --reply-desktop-border-top: 1px solid #282a2e;
/* reply modal */
--reply-modal-field-input-border: 1px solid #515151;
@@ -945,6 +945,9 @@
/* reply highlight */
--reply-highlight-background-color: #1d1d21;
+ --reply-highlight-border: 1px solid #111;
+ --reply-highlight-border-left: 1px solid #111;
+ --reply-highlight-border-top: 1px solid #111;
/* select */
--select-border: 1px solid #575a60;
@@ -1133,9 +1136,14 @@
--side-arrows-color: #333;
--reply-desktop-background-color: #ddd;
--reply-desktop-border: 1px solid #ccc;
+ --reply-desktop-border-left: 1px solid #ccc;
+ --reply-desktop-border-top: 1px solid #ccc;
/* reply highlight */
--reply-highlight-background-color: #ccc;
+ --reply-highlight-border: 1px solid #ccc;
+ --reply-highlight-border-left: 1px solid #ccc;
+ --reply-highlight-border-top: 1px solid #ccc;
/* reply modal */
--reply-modal-field-input-border: 1px solid #aaa;
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 184954ab..60aa0c95 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -350,8 +350,8 @@
.replyDesktop .reply {
background-color: var(--reply-desktop-background-color);
border: var(--reply-desktop-border);
- border-left: none;
- border-top: none;
+ border-top: var(--reply-desktop-border-top, revert);
+ border-left: var(--reply-desktop-border-left, revert);
display: table;
padding: 0 2px 2px 2px;
}