diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx index ab3f8b616f1..44068b88e29 100644 --- a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx +++ b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopover.component.tsx @@ -18,7 +18,7 @@ import { getJobAbbreviation } from '@/v5/store/jobs/jobs.helpers'; import { IJob } from '@/v5/store/jobs/jobs.types'; import { AvatarWrapper, Data, Heading, PopoverContainer } from '../userPopoverCircle/userPopover/userPopover.styles'; -import { PopoverCircle } from '../popoverCircle.styles'; +import { PopoverCircle } from '../popoverCircle.component'; interface IJobPopover { job: IJob; diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx index 06eb99b5502..b1da9172c1a 100644 --- a/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx +++ b/frontend/src/v5/ui/components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component.tsx @@ -18,7 +18,7 @@ import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component'; import { getJobAbbreviation } from '@/v5/store/jobs/jobs.helpers'; import { IJob } from '@/v5/store/jobs/jobs.types'; -import { IPopoverCircle, PopoverCircle } from '../popoverCircle.styles'; +import { IPopoverCircle, PopoverCircle } from '../popoverCircle.component'; import { JobPopover } from './jobPopover.component'; type JobPopoverCircleProps = IPopoverCircle & { diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.component.tsx new file mode 100644 index 00000000000..3fc8631b67a --- /dev/null +++ b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.component.tsx @@ -0,0 +1,29 @@ +/** + * Copyright (C) 2024 3D Repo Ltd + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import { AvatarProps } from '@mui/material'; +import { forwardRef } from 'react'; +import { Popover } from './popoverCircle.styles'; + +export type IPopoverCircle = AvatarProps & { + size?: 'small' | 'medium'; + backgroundColor?: string; +}; + +export const PopoverCircle = forwardRef(({ backgroundColor, ...props }: IPopoverCircle, ref) => ( + +)); diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts index 260f70e841c..71507260841 100644 --- a/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts +++ b/frontend/src/v5/ui/components/shared/popoverCircles/popoverCircle.styles.ts @@ -16,7 +16,6 @@ */ import { AuthAvatarMui } from '@components/authenticatedResource/authAvatarMui.component'; -import { AvatarProps } from '@mui/material'; import { contrastColor } from 'contrast-color'; import styled, { css } from 'styled-components'; @@ -27,15 +26,10 @@ const CIRCLE_SIZE = { const isLight = (color) => contrastColor({ bgColor: color, threshold: 170 }) === '#FFFFFF'; -export type IPopoverCircle = AvatarProps & { - size?: 'small' | 'medium'; - backgroundColor?: string; -}; - -export const PopoverCircle = styled(AuthAvatarMui)` +export const Popover = styled(AuthAvatarMui)<{ $backgroundColor }>` margin: 0; - color: ${({ backgroundColor, theme }) => (isLight(backgroundColor) ? theme.palette.primary.contrast : theme.palette.secondary.main)}; - background-color: ${({ backgroundColor, theme }) => backgroundColor || theme.palette.primary.contrast}; + color: ${({ $backgroundColor, theme }) => (isLight($backgroundColor) ? theme.palette.primary.contrast : theme.palette.secondary.main)}; + background-color: ${({ $backgroundColor, theme }) => $backgroundColor || theme.palette.primary.contrast}; pointer-events: auto; font-size: 9px; ${({ size = 'medium' }) => css` diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx index 32f2ba695f4..2948ec5a791 100644 --- a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx +++ b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component.tsx @@ -17,7 +17,7 @@ import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component'; import { IUser } from '@/v5/store/users/users.redux'; -import { IPopoverCircle } from '../popoverCircle.styles'; +import { IPopoverCircle } from '../popoverCircle.component'; import { UserPopover } from './userPopover/userPopover.component'; import { UserCircle } from './userPopoverCircle.styles'; diff --git a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts index 5e9d833f16a..fdc9995c5ca 100644 --- a/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts +++ b/frontend/src/v5/ui/components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.styles.ts @@ -18,7 +18,7 @@ import { getUserInitials } from '@/v5/store/users/users.helpers'; import styled from 'styled-components'; import { IUser } from '@/v5/store/users/users.redux'; -import { IPopoverCircle, PopoverCircle } from '../popoverCircle.styles'; +import { IPopoverCircle, PopoverCircle } from '../popoverCircle.component'; type IUserCircle = Omit & { user: IUser; diff --git a/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx b/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx index e63deabc5c4..aba46ce069e 100644 --- a/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx +++ b/frontend/src/v5/ui/controls/assigneesSelect/assigneeCircle/assigneeCircle.component.tsx @@ -19,7 +19,7 @@ import { useSelector } from 'react-redux'; import { selectJobs } from '@/v4/modules/jobs/jobs.selectors'; import { JobPopoverCircle } from '@components/shared/popoverCircles/jobPopoverCircle/jobPopoverCircle.component'; import { UserPopoverCircle } from '@components/shared/popoverCircles/userPopoverCircle/userPopoverCircle.component'; -import { IPopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles'; +import { IPopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component'; import { UsersHooksSelectors, TeamspacesHooksSelectors } from '@/v5/services/selectorsHooks'; import { memo } from 'react'; diff --git a/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts b/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts index e37cbfa5bdf..9e8beeda9f6 100644 --- a/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts +++ b/frontend/src/v5/ui/controls/assigneesSelect/assigneesSelect.styles.ts @@ -15,7 +15,7 @@ * along with this program. If not, see . */ -import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles'; +import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component'; import { Tooltip as TooltipBase } from '@mui/material'; import styled from 'styled-components'; diff --git a/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts b/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts index 5e99f5aee4d..508bf0b6d71 100644 --- a/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts +++ b/frontend/src/v5/ui/controls/assigneesSelect/extraAssigneesCircle/extraAssignees.styles.ts @@ -15,7 +15,7 @@ * along with this program. If not, see . */ -import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles'; +import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component'; import styled from 'styled-components'; export const ExtraAssigneesList = styled.ul` diff --git a/frontend/stories/info/PopoverCircle.stories.tsx b/frontend/stories/info/PopoverCircle.stories.tsx index 08f2b2653b8..08d2cc0a01a 100644 --- a/frontend/stories/info/PopoverCircle.stories.tsx +++ b/frontend/stories/info/PopoverCircle.stories.tsx @@ -16,7 +16,7 @@ */ import { HoverPopover } from '@controls/hoverPopover/hoverPopover.component'; import { Meta, StoryObj } from '@storybook/react'; -import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.styles'; +import { PopoverCircle } from '@components/shared/popoverCircles/popoverCircle.component'; export default { title: 'Info/PopoverCircle',