update user list popover

apps/app/src/components/PageControls/BookmarkButtons.tsx

@@ -14,6 +14,7 @@ import { BookmarkFolderMenu } from '../Bookmarks/BookmarkFolderMenu';
 import UserPictureList from '../Common/UserPictureList';
 
 import styles from './BookmarkButtons.module.scss';
+import popoverStyles from './user-list-popover.module.scss';
 
 interface Props {
   pageId: string,
@@ -92,7 +93,7 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
         {bookmarkCount}
       </button>
       <Popover placement="bottom" isOpen={isBookmarkUsersPopoverOpen} target="po-total-bookmarks" toggle={toggleBookmarkUsersPopover} trigger="legacy">
-        <PopoverBody className="user-list-popover">
+        <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
           { isLoadingBookmarkedUsers && <i className="fa fa-spinner fa-pulse"></i> }
           { !isLoadingBookmarkedUsers && bookmarkedUsers != null && (
             <>

apps/app/src/components/PageControls/LikeButtons.tsx

@@ -9,6 +9,7 @@ import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 import UserPictureList from '../Common/UserPictureList';
 
 import styles from './LikeButtons.module.scss';
+import popoverStyles from './user-list-popover.module.scss';
 
 type LikeButtonsProps = {
 
@@ -66,7 +67,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         {sumOfLikers}
       </button>
       <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">
-        <PopoverBody className="user-list-popover">
+        <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
           <div className="px-2 text-end user-list-content text-truncate text-muted">
             {props.likers?.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
           </div>

apps/app/src/components/PageControls/SeenUserInfo.tsx

@@ -10,6 +10,7 @@ import UserPictureList from '../Common/UserPictureList';
 
 
 import styles from './SeenUserInfo.module.scss';
+import popoverStyles from './user-list-popover.module.scss';
 
 
 interface Props {
@@ -33,7 +34,7 @@ const SeenUserInfo: FC<Props> = (props: Props) => {
         <span className="total-counts">{sumOfSeenUsers || seenUsers.length}</span>
       </button>
       <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-seen-user" toggle={togglePopover} trigger="legacy" disabled={disabled}>
-        <PopoverBody className="user-list-popover">
+        <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
           <div className="px-2 text-end user-list-content text-truncate text-muted">
             <UserPictureList users={seenUsers} />
           </div>

apps/app/src/components/PageControls/user-list-popover.module.scss

@@ -0,0 +1,5 @@
+@use '@growi/ui/scss/molecules/user-list-popover';
+
+.user-list-popover :global {
+  @extend %user-list-popover
+}

apps/app/src/components/PageHeader/EditingUserList.tsx

@@ -6,6 +6,8 @@ import { Popover, PopoverBody } from 'reactstrap';
 
 import UserPictureList from '../Common/UserPictureList';
 
+import popoverStyles from './user-list-popover.module.scss';
+
 type Props = {
   className: string,
   userList: IUserHasId[]
@@ -38,7 +40,7 @@ export const EditingUserList: FC<Props> = ({ className, userList }) => {
                 <span className="fw-bold text-info p-1">+{remainingUsers.length}</span>
               </button>
               <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-editing-user" toggle={togglePopover} trigger="legacy">
-                <PopoverBody className="user-list-popover">
+                <PopoverBody className={`user-list-popover ${popoverStyles['user-list-popover']}`}>
                   <UserPictureList users={remainingUsers} />
                 </PopoverBody>
               </Popover>

apps/app/src/components/PageHeader/user-list-popover.module.scss

@@ -0,0 +1,5 @@
+@use '@growi/ui/scss/molecules/user-list-popover';
+
+.user-list-popover :global {
+  @extend %user-list-popover;
+}

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

@@ -12,7 +12,6 @@
 // molecules
 @import 'molecules/toastr';
 @import 'molecules/list-group-item';
-@import 'molecules/user-list-popover';
 // @import 'molecules/slack-notification';
 // @import 'molecules/duplicated-paths-table.scss';
 

apps/app/src/styles/molecules/user-list-popover.scss → packages/ui/scss/molecules/_user-list-popover.scss

@@ -1,4 +1,4 @@
-.user-list-popover {
+%user-list-popover {
   --bs-popover-max-width: 200px;
   --bs-popover-body-padding-x: .5rem;
   --bs-popover-body-padding-y: .5rem;