From 40b0976c35f7d0fef2e78c0dbc2f486da7e45f19 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Sun, 14 Dec 2025 14:58:35 +0100
Subject: [PATCH] FriendsSince: fix in dms profile sidebar

---
 src/plugins/friendsSince/index.tsx  | 65 +++++++++++++++++------------
 src/plugins/friendsSince/styles.css |  3 ++
 2 files changed, 42 insertions(+), 26 deletions(-)
 create mode 100644 src/plugins/friendsSince/styles.css

diff --git a/src/plugins/friendsSince/index.tsx b/src/plugins/friendsSince/index.tsx
index 8c0c11c7e..c39b2600e 100644
--- a/src/plugins/friendsSince/index.tsx
+++ b/src/plugins/friendsSince/index.tsx
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./styles.css";
+
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { getCurrentChannel } from "@utils/discord";
@@ -15,7 +17,7 @@ const containerWrapper = findByPropsLazy("memberSinceWrapper");
 const container = findByPropsLazy("memberSince");
 const getCreatedAtDate = findByCodeLazy('month:"short",day:"numeric"');
 const locale = findByPropsLazy("getLocale");
-const Section = findComponentByCodeLazy('headingVariant:"text-xs/medium"', ".section");
+const Section = findComponentByCodeLazy("headingVariant:", ".section", ".header");
 
 export default definePlugin({
     name: "FriendsSince",
@@ -54,35 +56,46 @@ export default definePlugin({
         const friendsSince = RelationshipStore.getSince(userId);
         if (!friendsSince) return null;
 
+        if (isSidebar) {
+            return (
+                <Section
+                    heading="Friends Since"
+                    headingVariant="text-xs/semibold"
+                    headingColor="text-strong"
+                >
+                    <Text variant="text-sm/normal">
+                        {getCreatedAtDate(friendsSince, locale.getLocale())}
+                    </Text>
+                </Section>
+            );
+        }
+
         return (
-            <Section heading="Friends Since">
-                {
-                    isSidebar ? (
+            <Section
+                heading="Friends Since"
+                headingVariant="text-xs/medium"
+                headingColor="text-default"
+                className="vc-friendsSince-profile-section"
+            >
+                <div className={containerWrapper.memberSinceWrapper}>
+                    <div className={container.memberSince}>
+                        {!!getCurrentChannel()?.guild_id && (
+                            <svg
+                                aria-hidden="true"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 24 24"
+                                fill="var(--interactive-icon-default, var(--interactive-normal))"
+                            >
+                                <path d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
+                                <path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
+                            </svg>
+                        )}
                         <Text variant="text-sm/normal">
                             {getCreatedAtDate(friendsSince, locale.getLocale())}
                         </Text>
-                    ) : (
-                        <div className={containerWrapper.memberSinceWrapper}>
-                            <div className={container.memberSince}>
-                                {!!getCurrentChannel()?.guild_id && (
-                                    <svg
-                                        aria-hidden="true"
-                                        width="16"
-                                        height="16"
-                                        viewBox="0 0 24 24"
-                                        fill="var(--interactive-icon-default, var(--interactive-normal))"
-                                    >
-                                        <path d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
-                                        <path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
-                                    </svg>
-                                )}
-                                <Text variant="text-sm/normal">
-                                    {getCreatedAtDate(friendsSince, locale.getLocale())}
-                                </Text>
-                            </div>
-                        </div>
-                    )
-                }
+                    </div>
+                </div>
             </Section>
         );
     }, { noop: true }),
diff --git a/src/plugins/friendsSince/styles.css b/src/plugins/friendsSince/styles.css
new file mode 100644
index 000000000..0e404c1b6
--- /dev/null
+++ b/src/plugins/friendsSince/styles.css
@@ -0,0 +1,3 @@
+.vc-friendsSince-profile-section {
+    gap: 4px;
+}
\ No newline at end of file