From bd79b0c74b287dd92c3da218ed0668a0eb47ce54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 17 Mar 2026 15:31:19 +0100
Subject: [PATCH] nicolium: migrate avatar stack to scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/accounts/avatar-stack.tsx  | 18 ++++++------
 .../nicolium/src/styles/new/accounts.scss     | 28 +++++++++++++++++++
 .../nicolium/src/styles/new/components.scss   |  7 +++--
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/packages/nicolium/src/components/accounts/avatar-stack.tsx b/packages/nicolium/src/components/accounts/avatar-stack.tsx
index ade2a3385..2bb6d30c3 100644
--- a/packages/nicolium/src/components/accounts/avatar-stack.tsx
+++ b/packages/nicolium/src/components/accounts/avatar-stack.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React from 'react';
 
 import Avatar from '@/components/ui/avatar';
@@ -10,19 +9,18 @@ interface IAvatarStack {
 }
 
 const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
-  const dedupAccountIds = React.useMemo(() => [...new Set(accountIds)], [accountIds]);
-  const { data: accounts } = useAccounts(dedupAccountIds.slice(0, limit));
+  const dedupAccountIds = React.useMemo(
+    () => [...new Set(accountIds)].slice(0, limit),
+    [accountIds],
+  );
+
+  const { data: accounts } = useAccounts(dedupAccountIds);
 
   return (
-    <div className='relative flex' aria-hidden>
+    <div className='⁂-avatar-stack' aria-hidden>
       {accounts.map((account, i) => (
-        <div
-          className={clsx('relative', { '-ml-3': i !== 0 })}
-          key={account.id}
-          style={{ zIndex: limit - i }}
-        >
+        <div key={account.id} style={{ zIndex: limit - i }}>
           <Avatar
-            className='!rounded-full ring-1 ring-white dark:ring-primary-900'
             src={account.avatar}
             alt={account.avatar_description}
             size={20}
diff --git a/packages/nicolium/src/styles/new/accounts.scss b/packages/nicolium/src/styles/new/accounts.scss
index 108a195aa..c8aae3f6e 100644
--- a/packages/nicolium/src/styles/new/accounts.scss
+++ b/packages/nicolium/src/styles/new/accounts.scss
@@ -286,3 +286,31 @@
     }
   }
 }
+
+.⁂-avatar-stack {
+  --avatar-stack-background: white;
+
+  position: relative;
+  display: flex;
+
+  .dark & {
+    --avatar-stack-background: rgb(var(--color-primary-900));
+  }
+
+  .black & {
+    --avatar-stack-background: black;
+  }
+
+  > div {
+    position: relative;
+
+    &:not(:first-child) {
+      margin-left: -0.75rem;
+    }
+
+    .⁂-avatar {
+      border-radius: 9999px !important;
+      outline: 2px solid var(--avatar-stack-background);
+    }
+  }
+}
diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss
index f3ca9ab21..4c219e366 100644
--- a/packages/nicolium/src/styles/new/components.scss
+++ b/packages/nicolium/src/styles/new/components.scss
@@ -542,10 +542,13 @@ a.⁂-list-item,
       @include mixins.text($theme: inherit, $size: sm);
     }
 
-    .⁂-avatar {
+    .⁂-avatar-stack .⁂-avatar {
+      --avatar-stack-background: rgb(var(--color-primary-600));
+
       width: 1.5rem !important;
       height: 1.5rem !important;
-      outline: 2px solid rgb(var(--color-primary-600));
+
+      /* outline: 2px solid rgb(var(--color-primary-600)); */
       box-shadow: none;
     }
   }