move default style to module css

apps/app/src/styles/style-app.scss

@@ -56,32 +56,6 @@
   flex-basis: 0;
 }
 
-.picture {
-  width: 24px;
-  height: 24px;
-
-  // size list
-  &.picture-lg {
-    width: 48px;
-    height: 48px;
-  }
-
-  &.picture-md {
-    width: 24px;
-    height: 24px;
-  }
-
-  &.picture-sm {
-    width: 18px;
-    height: 18px;
-  }
-
-  &.picture-xs {
-    width: 14px;
-    height: 14px;
-  }
-}
-
 .grw-page-control-dropdown-item {
   display: flex !important;
   align-items: center;

packages/ui/src/components/UserPicture.module.scss

@@ -0,0 +1,50 @@
+.user-picture {
+  width: 24px;
+  height: 24px;
+
+  &:global {
+    // size list
+    &.user-picture-lg {
+      width: 48px;
+      height: 48px;
+    }
+
+    &.user-picture-md {
+      width: 24px;
+      height: 24px;
+    }
+
+    &.user-picture-sm {
+      width: 18px;
+      height: 18px;
+    }
+
+    &.user-picture-xs {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.user-picture-tooltip {
+  --bs-tooltip-margin: 12px 0 0 0;
+
+  &:global {
+    // size list
+    &.user-picture-tooltip-lg {
+      --bs-tooltip-margin: 24px 0 0 0;
+    }
+
+    &.user-picture-tooltip-md {
+      --bs-tooltip-margin: 12px 0 0 0;
+    }
+
+    &.user-picture-tooltip-sm {
+      --bs-tooltip-margin: 9px 0 0 0;
+    }
+
+    &.user-picture-tooltip-xs {
+      --bs-tooltip-margin: 7px 0 0 0;
+    }
+  }
+}

packages/ui/src/components/UserPicture.tsx

@@ -9,13 +9,21 @@ import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type { UncontrolledTooltipProps } from 'reactstrap';
 
+import styles from './UserPicture.module.scss';
+
+const moduleClass = styles['user-picture'];
+const moduleTooltipClass = styles['user-picture-tooltip'];
+
 const UncontrolledTooltip = dynamic<UncontrolledTooltipProps>(() => import('reactstrap').then(mod => mod.UncontrolledTooltip), { ssr: false });
 
 const DEFAULT_IMAGE = '/images/icons/user.svg';
 
 
+type UserPitureSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 type UserPictureRootProps = {
   user: IUser,
+  size?: UserPitureSize,
   className?: string,
   children?: ReactNode,
 }
@@ -44,14 +52,23 @@ const UserPictureRootWithLink = forwardRef<HTMLSpanElement, UserPictureRootProps
 // wrapper with Tooltip
 const withTooltip = (UserPictureSpanElm: React.ForwardRefExoticComponent<UserPictureRootProps & React.RefAttributes<HTMLSpanElement>>) => {
   return (props: UserPictureRootProps) => {
-    const { user } = props;
+    const { user, size } = props;
+
+    const tooltipClassName = `${moduleTooltipClass} user-picture-tooltip-${size ?? 'md'}`;
 
     const userPictureRef = useRef<HTMLSpanElement>(null);
 
     return (
       <>
         <UserPictureSpanElm ref={userPictureRef} user={user}>{props.children}</UserPictureSpanElm>
-        <UncontrolledTooltip placement="bottom" target={userPictureRef} delay={0} fade={false} show>
+        <UncontrolledTooltip
+          placement="bottom"
+          target={userPictureRef}
+          popperClassName={tooltipClassName}
+          delay={0}
+          fade={false}
+          show
+        >
           @{user.username}<br />
           {user.name}
         </UncontrolledTooltip>
@@ -71,21 +88,21 @@ const isUserObj = (obj: Partial<IUser> | Ref<IUser>): obj is IUser => {
 
 type Props = {
   user?: Partial<IUser> | Ref<IUser> | null,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  size?: UserPitureSize,
   noLink?: boolean,
   noTooltip?: boolean,
-  additionalClassName?: string
+  className?: string
 };
 
 export const UserPicture = memo((props: Props): JSX.Element => {
 
   const {
-    user, size, noLink, noTooltip, additionalClassName,
+    user, size, noLink, noTooltip, className: additionalClassName,
   } = props;
 
-  const classNames = ['rounded-circle', 'picture'];
+  const classNames = [moduleClass, 'user-picture', 'rounded-circle'];
   if (size != null) {
-    classNames.push(`picture-${size}`);
+    classNames.push(`user-picture-${size}`);
   }
   if (additionalClassName != null) {
     classNames.push(additionalClassName);
@@ -111,7 +128,7 @@ export const UserPicture = memo((props: Props): JSX.Element => {
   const userPictureSrc = user.imageUrlCached ?? DEFAULT_IMAGE;
 
   return (
-    <UserPictureRootElm user={user}>
+    <UserPictureRootElm user={user} size={size}>
       <img
         src={userPictureSrc}
         alt={user.username}