diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 96bdff11..be9a752b 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -5,6 +5,7 @@ import { Comment, useAccount, useAccountComments, useAuthorAvatar, useComment, u
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
+import { hashStringToColor, getTextColorForBackground } from '../../lib/utils/post-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isValidURL } from '../../lib/utils/url-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
@@ -71,6 +72,9 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
+ const userIDBackgroundColor = hashStringToColor(shortAddress || accountShortAddress);
+ const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
+
return (
{!isHidden &&
}
@@ -106,10 +110,15 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:

)}
- (u/
+ (ID: {''}
handleUserAddressClick(shortAddress || accountShortAddress, postCid)}>
+ handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
+ style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
+ >
{shortAddress || accountShortAddress}
}
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 81f07724..0854ac03 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -5,6 +5,7 @@ import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } fr
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import styles from '../../views/post/post.module.css';
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/post-utils';
import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
import useAuthorAddressClick from '../../hooks/use-author-address-click';
@@ -52,6 +53,9 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
const handleUserAddressClick = useAuthorAddressClick();
const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
+ const userIDBackgroundColor = hashStringToColor(shortAddress || accountShortAddress);
+ const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);
+
return (
<>
@@ -79,10 +83,15 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P

)}
- (u/
+ (ID: {''}
handleUserAddressClick(shortAddress || accountShortAddress, postCid)}>
+ handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
+ style={{ backgroundColor: userIDBackgroundColor, color: userIDTextColor }}
+ >
{shortAddress || accountShortAddress}
}
diff --git a/src/lib/utils/post-utils.ts b/src/lib/utils/post-utils.ts
new file mode 100644
index 00000000..63a4188d
--- /dev/null
+++ b/src/lib/utils/post-utils.ts
@@ -0,0 +1,18 @@
+export function hashStringToColor(str: string): string {
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ }
+
+ const r = (hash >> 24) & 0xff;
+ const g = (hash >> 16) & 0xff;
+ const b = (hash >> 8) & 0xff;
+
+ return `rgb(${r}, ${g}, ${b})`;
+}
+
+export function getTextColorForBackground(rgb: string): string {
+ const [r, g, b] = rgb.match(/\d+/g)?.map(Number) || [0, 0, 0];
+ const brightness = r * 0.299 + g * 0.587 + b * 0.114;
+ return brightness > 125 ? 'black' : 'white';
+}
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 14e78581..60bc1f02 100644
--- a/src/views/post/post.module.css
+++ b/src/views/post/post.module.css
@@ -73,11 +73,14 @@
}
.userAddress {
+ padding: 0 5px;
+ border-radius: 6px;
+ font-size: 0.8em;
cursor: pointer;
}
-.postDesktop .userAddress:hover {
- color: var(--button-desktop-text-color-hover);
+.userAddress:hover {
+ color: var(--post-quotelink-text-color-hover) !important;
}
.postDesktop .subject {