From bc23361fb037779de5d7c6fe89cdbefd2ce0479d Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 13 Aug 2024 17:26:21 +0200
Subject: [PATCH] refactor: move styles from page to Avatar Group component

---
 src/components/DisplaySigit/index.tsx         |  2 +-
 src/components/DisplaySigit/style.module.scss | 20 -------------------
 src/components/UserAvatarGroup/index.tsx      |  2 +-
 .../UserAvatarGroup/style.module.scss         | 20 +++++++++++++++++++
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/DisplaySigit/index.tsx b/src/components/DisplaySigit/index.tsx
index ce82f47..dfbcbba 100644
--- a/src/components/DisplaySigit/index.tsx
+++ b/src/components/DisplaySigit/index.tsx
@@ -77,7 +77,7 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
         {submittedBy && signers.length ? (
           <Divider orientation="vertical" flexItem />
         ) : null}
-        <UserAvatarGroup className={styles.signers} max={7}>
+        <UserAvatarGroup max={7}>
           {signers.map((signer) => {
             const pubkey = npubToHex(signer)!
             const profile = profiles[pubkey]
diff --git a/src/components/DisplaySigit/style.module.scss b/src/components/DisplaySigit/style.module.scss
index 7544fc4..4bb2f15 100644
--- a/src/components/DisplaySigit/style.module.scss
+++ b/src/components/DisplaySigit/style.module.scss
@@ -93,26 +93,6 @@
   grid-gap: 10px;
 }
 
-.signers {
-  padding: 0 0 0 10px;
-
-  > * {
-    transition: margin ease 0.2s;
-    margin: 0 0 0 -10px;
-    position: relative;
-    z-index: 1;
-    &:first-child {
-      margin-left: -10px !important;
-    }
-  }
-
-  > *:hover,
-  > *:focus-within {
-    margin: 0 15px 0 5px;
-    z-index: 2;
-  }
-}
-
 .details {
   color: rgba(0, 0, 0, 0.3);
   font-size: 14px;
diff --git a/src/components/UserAvatarGroup/index.tsx b/src/components/UserAvatarGroup/index.tsx
index 13f8b25..f8e231f 100644
--- a/src/components/UserAvatarGroup/index.tsx
+++ b/src/components/UserAvatarGroup/index.tsx
@@ -28,7 +28,7 @@ export const UserAvatarGroup = ({
 
   const childrenArray = Children.toArray(children)
   return (
-    <div {...rest}>
+    <div className={styles.container} {...rest}>
       {surplus > 1
         ? childrenArray.slice(0, surplus * -1).map((c) => c)
         : children}
diff --git a/src/components/UserAvatarGroup/style.module.scss b/src/components/UserAvatarGroup/style.module.scss
index 9604202..c9ee551 100644
--- a/src/components/UserAvatarGroup/style.module.scss
+++ b/src/components/UserAvatarGroup/style.module.scss
@@ -1,5 +1,25 @@
 @import '../../styles/colors.scss';
 
+.container {
+  padding: 0 0 0 10px;
+
+  > * {
+    transition: margin ease 0.2s;
+    margin: 0 0 0 -10px;
+    position: relative;
+    z-index: 1;
+    &:first-child {
+      margin-left: -10px !important;
+    }
+  }
+
+  > *:hover,
+  > *:focus-within {
+    margin: 0 15px 0 5px;
+    z-index: 2;
+  }
+}
+
 .icon {
   width: 40px;
   height: 40px;