From 253dabe6a742676f069e1cb224fc34bb08c02d3e Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Tue, 24 Jun 2025 09:21:13 +0200 Subject: [PATCH 1/3] Moved photo-placeholder to geti-ui --- web_ui/packages/ui/index.ts | 1 + .../photo-placeholder.component.tsx | 18 +++-- .../ui/src/photo-placeholder/utils.ts | 75 +++++++++++++++++++ .../organization-overview.component.tsx | 16 +++- .../organization-name-cell.component.tsx | 3 +- .../change-role-dialog.component.tsx | 15 +++- .../sidebar/sidebar-header.component.tsx | 3 +- .../organizations-picker.component.tsx | 3 +- .../user-photo-placeholder.component.tsx | 4 +- 9 files changed, 118 insertions(+), 20 deletions(-) rename web_ui/{src/shared/components => packages/ui/src}/photo-placeholder/photo-placeholder.component.tsx (72%) create mode 100644 web_ui/packages/ui/src/photo-placeholder/utils.ts diff --git a/web_ui/packages/ui/index.ts b/web_ui/packages/ui/index.ts index 8e594a80c2..9c609097f7 100644 --- a/web_ui/packages/ui/index.ts +++ b/web_ui/packages/ui/index.ts @@ -143,6 +143,7 @@ export { VirtualizedListLayout } from './src/virtualize-list-layout/virtualize-l export { CornerIndicator } from './src/corner-indicator/corner-indicator.component'; export { VirtualizedHorizontalGrid } from './src/virtualized-horizontal-grid/virtualized-horizontal-grid'; export { ToggleButtons } from './src/toggle-buttons/toggle-buttons.component'; +export { PhotoPlaceholder } from './src/photo-placeholder/photo-placeholder.component'; export { ListBox as AriaComponentsListBox, diff --git a/web_ui/src/shared/components/photo-placeholder/photo-placeholder.component.tsx b/web_ui/packages/ui/src/photo-placeholder/photo-placeholder.component.tsx similarity index 72% rename from web_ui/src/shared/components/photo-placeholder/photo-placeholder.component.tsx rename to web_ui/packages/ui/src/photo-placeholder/photo-placeholder.component.tsx index eb32966bfc..4ea93a9c5b 100644 --- a/web_ui/src/shared/components/photo-placeholder/photo-placeholder.component.tsx +++ b/web_ui/packages/ui/src/photo-placeholder/photo-placeholder.component.tsx @@ -1,27 +1,30 @@ // Copyright (C) 2022-2025 Intel Corporation // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE -import { Flex, Text, View, type ViewProps } from '@geti/ui'; +import { FC } from 'react'; + +import { Flex, Text, View, ViewProps } from '@adobe/react-spectrum'; +import { StyleProps } from '@react-types/shared'; import { isEmpty } from 'lodash-es'; -import { getDistinctColorBasedOnHash } from '../../../pages/create-project/components/distinct-colors'; -import { getForegroundColor, hexaToRGBA } from '../../../pages/utils'; +import { getDistinctColorBasedOnHash, getForegroundColor, hexaToRGBA } from './utils'; -interface PhotoPlaceholderProps { +export interface PhotoPlaceholderProps extends StyleProps { name: string; email: string; - width?: ViewProps<5>['height']; + width?: ViewProps<5>['width']; height?: ViewProps<5>['height']; borderRadius?: string; } -export const PhotoPlaceholder = ({ +export const PhotoPlaceholder: FC = ({ name, email, width = 'size-1600', height = 'size-1600', borderRadius = '50%', -}: PhotoPlaceholderProps): JSX.Element => { + ...viewProps +}) => { const backgroundColor = getDistinctColorBasedOnHash(email); const letter = (isEmpty(name.trim()) ? email : name).charAt(0); @@ -39,6 +42,7 @@ export const PhotoPlaceholder = ({ height={height} UNSAFE_style={{ backgroundColor, color, borderRadius }} data-testid={'placeholder-avatar-id'} + {...viewProps} > {letter.toUpperCase()} diff --git a/web_ui/packages/ui/src/photo-placeholder/utils.ts b/web_ui/packages/ui/src/photo-placeholder/utils.ts new file mode 100644 index 0000000000..fb41dc197c --- /dev/null +++ b/web_ui/packages/ui/src/photo-placeholder/utils.ts @@ -0,0 +1,75 @@ +// Copyright (C) 2022-2025 Intel Corporation +// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE + +import { isEmpty } from 'lodash-es'; + +export const getDistinctColorBasedOnHash = (value: string): string => { + const hash = Array.from(value).reduce((s, c) => (Math.imul(31, s) + c.charCodeAt(0)) | 0, 0); + + const index = ((hash % DISTINCT_COLORS.length) + DISTINCT_COLORS.length) % DISTINCT_COLORS.length; + + return DISTINCT_COLORS[index]; +}; + +export const DISTINCT_COLORS = [ + '#708541', + '#E96115', + '#EDB200', + '#FF5662', + '#CC94DA', + '#5B69FF', + '#548FAD', + // + '#25A18E', + '#9D3B1A', + '#C9E649', + '#F15B85', + '#81407B', + '#26518E', + '#076984', + // + '#00F5D4', + '#FF7D00', + '#F7DAB3', + '#80E9AF', + '#9B5DE5', + '#00A5CF', + '#D7BC5E', +]; + +type RGBArray = [number, number, number, number]; + +export const hexaToRGBA = (hex: string): RGBArray => { + if (isEmpty(hex)) { + return [0, 0, 0, 0]; + } + + if (hex.length == 9) { + return [ + Number('0x' + hex[1] + hex[2]), + Number('0x' + hex[3] + hex[4]), + Number('0x' + hex[5] + hex[6]), + Number('0x' + hex[7] + hex[8]), + ]; + } + + const alpha = Number('0x' + hex[4] + hex[4]); + + return [ + Number('0x' + hex[1] + hex[1]), + Number('0x' + hex[2] + hex[2]), + Number('0x' + hex[3] + hex[3]), + Number.isNaN(alpha) ? 1 : alpha, + ]; +}; + +/** + * Determines the appropriate foreground color based on background color + * source https://css-tricks.com/css-variables-calc-rgb-enforcing-high-contrast-colors/ + */ +export const getForegroundColor = (backgroundRgb: RGBArray, lowContrast: string, highContrast: string): string => { + const [r, g, b] = backgroundRgb; + const sum = Math.round((r * 299 + g * 587 + b * 114) / 1000); + + return sum > 128 ? lowContrast : highContrast; +}; diff --git a/web_ui/src/intel-admin-app/pages/organization/organization-overview.component.tsx b/web_ui/src/intel-admin-app/pages/organization/organization-overview.component.tsx index 28b03318e6..71583be066 100644 --- a/web_ui/src/intel-admin-app/pages/organization/organization-overview.component.tsx +++ b/web_ui/src/intel-admin-app/pages/organization/organization-overview.component.tsx @@ -5,7 +5,20 @@ import { FormEvent, useEffect, useState } from 'react'; import { paths } from '@geti/core'; import { useFeatureFlags } from '@geti/core/src/feature-flags/hooks/use-feature-flags.hook'; -import { ActionGroup, Button, ButtonGroup, Divider, Flex, Form, Item, Key, Text, TextField, View } from '@geti/ui'; +import { + ActionGroup, + Button, + ButtonGroup, + Divider, + Flex, + Form, + Item, + Key, + PhotoPlaceholder, + Text, + TextField, + View, +} from '@geti/ui'; import { CheckmarkCircleOutline, DeleteOutline, RemoveCircle } from '@geti/ui/icons'; import dayjs from 'dayjs'; import { isEmpty } from 'lodash-es'; @@ -14,7 +27,6 @@ import { useOverlayTriggerState } from 'react-stately'; import { AccountStatus, Organization } from '../../../core/organizations/organizations.interface'; import { DeleteDialog } from '../../../shared/components/delete-dialog/delete-dialog.component'; -import { PhotoPlaceholder } from '../../../shared/components/photo-placeholder/photo-placeholder.component'; import { Header } from '../../shared/components/header/header.component'; import { useOrganization } from './hooks/organization.hook'; diff --git a/web_ui/src/intel-admin-app/pages/organizations/cells/organization-name-cell.component.tsx b/web_ui/src/intel-admin-app/pages/organizations/cells/organization-name-cell.component.tsx index c210aff71e..37d1759d66 100644 --- a/web_ui/src/intel-admin-app/pages/organizations/cells/organization-name-cell.component.tsx +++ b/web_ui/src/intel-admin-app/pages/organizations/cells/organization-name-cell.component.tsx @@ -1,9 +1,8 @@ // Copyright (C) 2022-2025 Intel Corporation // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE -import { Flex, PressableElement, Tooltip, TooltipTrigger } from '@geti/ui'; +import { Flex, PhotoPlaceholder, PressableElement, Tooltip, TooltipTrigger } from '@geti/ui'; -import { PhotoPlaceholder } from '../../../../shared/components/photo-placeholder/photo-placeholder.component'; import { TruncatedText } from '../../../../shared/components/truncated-text/truncated-text.component'; import { OrganizationAdminsCopyText } from './organization-admins-copy-text.component'; diff --git a/web_ui/src/intel-admin-app/pages/user/membership-actions/change-role-dialog.component.tsx b/web_ui/src/intel-admin-app/pages/user/membership-actions/change-role-dialog.component.tsx index f5e7a2facb..16f9343f55 100644 --- a/web_ui/src/intel-admin-app/pages/user/membership-actions/change-role-dialog.component.tsx +++ b/web_ui/src/intel-admin-app/pages/user/membership-actions/change-role-dialog.component.tsx @@ -4,9 +4,20 @@ import { FC, Key, useState } from 'react'; import { RESOURCE_TYPE, RoleResource, USER_ROLE } from '@geti/core/src/users/users.interface'; -import { Button, ButtonGroup, Content, Dialog, DialogContainer, Divider, Flex, Heading, Item, Picker } from '@geti/ui'; +import { + Button, + ButtonGroup, + Content, + Dialog, + DialogContainer, + Divider, + Flex, + Heading, + Item, + PhotoPlaceholder, + Picker, +} from '@geti/ui'; -import { PhotoPlaceholder } from '../../../../shared/components/photo-placeholder/photo-placeholder.component'; import { TruncatedText } from '../../../../shared/components/truncated-text/truncated-text.component'; import { Membership } from '../mocked-memberships'; diff --git a/web_ui/src/intel-admin-app/shared/components/sidebar/sidebar-header.component.tsx b/web_ui/src/intel-admin-app/shared/components/sidebar/sidebar-header.component.tsx index 56760eb126..7a1654c5f8 100644 --- a/web_ui/src/intel-admin-app/shared/components/sidebar/sidebar-header.component.tsx +++ b/web_ui/src/intel-admin-app/shared/components/sidebar/sidebar-header.component.tsx @@ -3,9 +3,8 @@ import { FC } from 'react'; -import { Flex, Skeleton, View } from '@geti/ui'; +import { Flex, PhotoPlaceholder, Skeleton, View } from '@geti/ui'; -import { PhotoPlaceholder } from '../../../../shared/components/photo-placeholder/photo-placeholder.component'; import { TruncatedTextWithTooltip } from '../../../../shared/components/truncated-text/truncated-text.component'; import classes from './sidebar.module.scss'; diff --git a/web_ui/src/pages/landing-page/landing-page-sidebar/organizations-picker/organizations-picker.component.tsx b/web_ui/src/pages/landing-page/landing-page-sidebar/organizations-picker/organizations-picker.component.tsx index a8c939f584..f170f52067 100644 --- a/web_ui/src/pages/landing-page/landing-page-sidebar/organizations-picker/organizations-picker.component.tsx +++ b/web_ui/src/pages/landing-page/landing-page-sidebar/organizations-picker/organizations-picker.component.tsx @@ -5,7 +5,7 @@ import { useRef } from 'react'; import { getErrorMessage } from '@geti/core/src/services/utils'; import { useOnboardUserMutation } from '@geti/core/src/users/hook/use-onboard-user-mutation.hook'; -import { CustomPopover, dimensionValue, Flex, Item, ListBox, Picker, View } from '@geti/ui'; +import { CustomPopover, dimensionValue, Flex, Item, ListBox, PhotoPlaceholder, Picker, View } from '@geti/ui'; import { useOverlayTriggerState } from '@react-stately/overlays'; import { isNil } from 'lodash-es'; @@ -17,7 +17,6 @@ import { isOrganizationVisible, isUserInvitedInOrg, } from '../../../../routes/organizations/util'; -import { PhotoPlaceholder } from '../../../../shared/components/photo-placeholder/photo-placeholder.component'; import { QuietToggleButton } from '../../../../shared/components/quiet-button/quiet-toggle-button.component'; import { hasEqualId, isNonEmptyString } from '../../../../shared/utils'; diff --git a/web_ui/src/pages/user-management/profile-page/user-photo-container/user-photo-placeholder/user-photo-placeholder.component.tsx b/web_ui/src/pages/user-management/profile-page/user-photo-container/user-photo-placeholder/user-photo-placeholder.component.tsx index bac76b20a3..1e2c9463ae 100644 --- a/web_ui/src/pages/user-management/profile-page/user-photo-container/user-photo-placeholder/user-photo-placeholder.component.tsx +++ b/web_ui/src/pages/user-management/profile-page/user-photo-container/user-photo-placeholder/user-photo-placeholder.component.tsx @@ -3,12 +3,10 @@ import { ComponentProps } from 'react'; -import { ActionButton, View } from '@geti/ui'; +import { ActionButton, PhotoPlaceholder, View } from '@geti/ui'; import { isNil } from 'lodash-es'; import { usePress } from 'react-aria'; -import { PhotoPlaceholder } from '../../../../../shared/components/photo-placeholder/photo-placeholder.component'; - import classes from './user-photo-placeholder.module.scss'; interface UserPhotoPlaceholderProps { From fca2ac6bbca512346d6ab0614fde0f035d998eb8 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Wed, 25 Jun 2025 09:26:08 +0200 Subject: [PATCH 2/3] Refactored indicator components --- .../test-media-item-card.component.tsx | 16 +++++- .../indicator-wrapper.component.tsx | 32 ----------- .../indicator-wrapper.module.scss | 3 - .../media-item-view.component.tsx | 4 +- ...video-frame-number-indicator.component.tsx | 12 +++- .../video-indicator.component.tsx | 57 +++++++++++++++++++ .../video-indicator.module.scss | 0 .../video-indicator.test.tsx | 0 .../video-frames-indicator.component.tsx | 23 -------- .../video-indicator.component.tsx | 33 ----------- 10 files changed, 81 insertions(+), 99 deletions(-) delete mode 100644 web_ui/src/shared/components/indicator-wrapper/indicator-wrapper.component.tsx delete mode 100644 web_ui/src/shared/components/indicator-wrapper/indicator-wrapper.module.scss rename web_ui/src/shared/components/{video-indicator => media-item-view}/video-frame-number-indicator.component.tsx (65%) create mode 100644 web_ui/src/shared/components/media-item-view/video-indicator.component.tsx rename web_ui/src/shared/components/{video-indicator => media-item-view}/video-indicator.module.scss (100%) rename web_ui/src/shared/components/{video-indicator => media-item-view}/video-indicator.test.tsx (100%) delete mode 100644 web_ui/src/shared/components/video-indicator/video-frames-indicator.component.tsx delete mode 100644 web_ui/src/shared/components/video-indicator/video-indicator.component.tsx diff --git a/web_ui/src/pages/project-details/components/project-test/test-media-item-card.component.tsx b/web_ui/src/pages/project-details/components/project-test/test-media-item-card.component.tsx index 6d17f956fb..8af1ce9cc0 100644 --- a/web_ui/src/pages/project-details/components/project-test/test-media-item-card.component.tsx +++ b/web_ui/src/pages/project-details/components/project-test/test-media-item-card.component.tsx @@ -7,7 +7,6 @@ import { usePress } from 'react-aria'; import { isVideo } from '../../../../core/media/video.interface'; import { TestMediaItem } from '../../../../core/tests/test-media.interface'; import { TestScore } from '../../../../core/tests/tests.interface'; -import { IndicatorWrapper } from '../../../../shared/components/indicator-wrapper/indicator-wrapper.component'; import { MediaItemView } from '../../../../shared/components/media-item-view/media-item-view.component'; import { getMediaId } from '../../../media/utils'; import { SCORE_FORMATTER_OPTIONS } from './utils'; @@ -58,9 +57,20 @@ export const TestMediaItemCard = ({ style={{ position: 'relative', width: 'inherit', height: 'inherit', cursor: 'pointer' }} {...pressProps} > - + {formatter.format(Number(labelScore?.value))} - + { - children: ReactNode; -} - -export const IndicatorWrapper = ({ - children, - UNSAFE_className: customClasses = '', - ...rest -}: IndicatorProps): JSX.Element => { - return ( - - {children} - - ); -}; diff --git a/web_ui/src/shared/components/indicator-wrapper/indicator-wrapper.module.scss b/web_ui/src/shared/components/indicator-wrapper/indicator-wrapper.module.scss deleted file mode 100644 index 1eb258a80f..0000000000 --- a/web_ui/src/shared/components/indicator-wrapper/indicator-wrapper.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.indicatorWrapper { - background-color: var(--spectrum-global-color-gray-50); -} diff --git a/web_ui/src/shared/components/media-item-view/media-item-view.component.tsx b/web_ui/src/shared/components/media-item-view/media-item-view.component.tsx index 99ed43ab25..d334cd6376 100644 --- a/web_ui/src/shared/components/media-item-view/media-item-view.component.tsx +++ b/web_ui/src/shared/components/media-item-view/media-item-view.component.tsx @@ -15,8 +15,8 @@ import { isMediaPreprocessing } from '../../../core/media/utils/preprocessing.ut import { isVideo, isVideoFrame } from '../../../core/media/video.interface'; import { AnnotationStateIndicator } from '../annotation-indicator/annotation-state-indicator.component'; import { VideoAnnotationIndicator } from '../annotation-indicator/video-annotation-indicator.component'; -import { VideoFrameNumberIndicator } from '../video-indicator/video-frame-number-indicator.component'; -import { VideoIndicator } from '../video-indicator/video-indicator.component'; +import { VideoFrameNumberIndicator } from './video-frame-number-indicator.component'; +import { VideoIndicator } from './video-indicator.component'; import classes from '../../shared.module.scss'; diff --git a/web_ui/src/shared/components/video-indicator/video-frame-number-indicator.component.tsx b/web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx similarity index 65% rename from web_ui/src/shared/components/video-indicator/video-frame-number-indicator.component.tsx rename to web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx index e12aeed182..73d75a3423 100644 --- a/web_ui/src/shared/components/video-indicator/video-frame-number-indicator.component.tsx +++ b/web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx @@ -1,7 +1,7 @@ // Copyright (C) 2022-2025 Intel Corporation // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE -import { IndicatorWrapper } from '../indicator-wrapper/indicator-wrapper.component'; +import { View } from '@geti/ui'; import classes from './video-indicator.module.scss'; @@ -11,14 +11,20 @@ interface VideoFrameIndicatorProps { export const VideoFrameNumberIndicator = ({ frameNumber }: VideoFrameIndicatorProps): JSX.Element => { return ( - {frameNumber}F - + ); }; diff --git a/web_ui/src/shared/components/media-item-view/video-indicator.component.tsx b/web_ui/src/shared/components/media-item-view/video-indicator.component.tsx new file mode 100644 index 0000000000..d8e8a00078 --- /dev/null +++ b/web_ui/src/shared/components/media-item-view/video-indicator.component.tsx @@ -0,0 +1,57 @@ +// Copyright (C) 2022-2025 Intel Corporation +// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE + +import { View } from '@geti/ui'; + +import { useDurationText } from '../../hooks/data-format/use-duration-text.hook'; +import { useFramesText } from '../../hooks/data-format/use-frames-text.hook'; + +import classes from './video-indicator.module.scss'; + +interface VideoIndicatorProps { + duration: number; + frames: number | undefined; +} + +export const VideoIndicator = ({ duration, frames }: VideoIndicatorProps): JSX.Element => { + const shouldShowFramesIndicator = frames !== undefined; + const durationText = useDurationText(duration); + const frameText = useFramesText(frames ?? 0); + + return ( + <> + {shouldShowFramesIndicator && ( + + {frameText} + + )} + + {durationText} + + + ); +}; diff --git a/web_ui/src/shared/components/video-indicator/video-indicator.module.scss b/web_ui/src/shared/components/media-item-view/video-indicator.module.scss similarity index 100% rename from web_ui/src/shared/components/video-indicator/video-indicator.module.scss rename to web_ui/src/shared/components/media-item-view/video-indicator.module.scss diff --git a/web_ui/src/shared/components/video-indicator/video-indicator.test.tsx b/web_ui/src/shared/components/media-item-view/video-indicator.test.tsx similarity index 100% rename from web_ui/src/shared/components/video-indicator/video-indicator.test.tsx rename to web_ui/src/shared/components/media-item-view/video-indicator.test.tsx diff --git a/web_ui/src/shared/components/video-indicator/video-frames-indicator.component.tsx b/web_ui/src/shared/components/video-indicator/video-frames-indicator.component.tsx deleted file mode 100644 index ef81d0aec6..0000000000 --- a/web_ui/src/shared/components/video-indicator/video-frames-indicator.component.tsx +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright (C) 2022-2025 Intel Corporation -// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE - -import { useFramesText } from '../../hooks/data-format/use-frames-text.hook'; -import { IndicatorWrapper } from '../indicator-wrapper/indicator-wrapper.component'; - -import classes from './video-indicator.module.scss'; - -export const VideoFramesIndicator = ({ frames }: { frames: number }): JSX.Element => { - const frameText = useFramesText(frames); - - return ( - - {frameText} - - ); -}; diff --git a/web_ui/src/shared/components/video-indicator/video-indicator.component.tsx b/web_ui/src/shared/components/video-indicator/video-indicator.component.tsx deleted file mode 100644 index fda99d35f8..0000000000 --- a/web_ui/src/shared/components/video-indicator/video-indicator.component.tsx +++ /dev/null @@ -1,33 +0,0 @@ -// Copyright (C) 2022-2025 Intel Corporation -// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE - -import { useDurationText } from '../../hooks/data-format/use-duration-text.hook'; -import { IndicatorWrapper } from '../indicator-wrapper/indicator-wrapper.component'; -import { VideoFramesIndicator } from './video-frames-indicator.component'; - -import classes from './video-indicator.module.scss'; - -interface VideoIndicatorProps { - duration: number; - frames: number | undefined; -} - -export const VideoIndicator = ({ duration, frames }: VideoIndicatorProps): JSX.Element => { - const shouldShowFramesIndicator = frames !== undefined; - const durationText = useDurationText(duration); - - return ( - <> - {shouldShowFramesIndicator && } - - {durationText} - - - ); -}; From 51eedd546fb6884c1384ca2b99ed8a7e66e2bd06 Mon Sep 17 00:00:00 2001 From: Dmitry Kalinin Date: Fri, 11 Jul 2025 09:38:53 +0200 Subject: [PATCH 3/3] move inline styles to SCSS for consistency. --- .../media-item-view/video-frame-number-indicator.component.tsx | 1 - .../components/media-item-view/video-indicator.component.tsx | 2 -- .../components/media-item-view/video-indicator.module.scss | 1 + 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx b/web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx index 73d75a3423..134b220387 100644 --- a/web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx +++ b/web_ui/src/shared/components/media-item-view/video-frame-number-indicator.component.tsx @@ -22,7 +22,6 @@ export const VideoFrameNumberIndicator = ({ frameNumber }: VideoFrameIndicatorPr borderRadius={'small'} height={'size-200'} UNSAFE_className={classes.videoFrameText} - UNSAFE_style={{ backgroundColor: 'var(--spectrum-global-color-gray-50)' }} > {frameNumber}F diff --git a/web_ui/src/shared/components/media-item-view/video-indicator.component.tsx b/web_ui/src/shared/components/media-item-view/video-indicator.component.tsx index d8e8a00078..956ebe53f8 100644 --- a/web_ui/src/shared/components/media-item-view/video-indicator.component.tsx +++ b/web_ui/src/shared/components/media-item-view/video-indicator.component.tsx @@ -32,7 +32,6 @@ export const VideoIndicator = ({ duration, frames }: VideoIndicatorProps): JSX.E borderRadius={'small'} height={'size-200'} UNSAFE_className={classes.videoFrameText} - UNSAFE_style={{ backgroundColor: 'var(--spectrum-global-color-gray-50)' }} > {frameText} @@ -48,7 +47,6 @@ export const VideoIndicator = ({ duration, frames }: VideoIndicatorProps): JSX.E borderRadius={'small'} height={'size-200'} UNSAFE_className={classes.videoFrameText} - UNSAFE_style={{ backgroundColor: 'var(--spectrum-global-color-gray-50)' }} > {durationText} diff --git a/web_ui/src/shared/components/media-item-view/video-indicator.module.scss b/web_ui/src/shared/components/media-item-view/video-indicator.module.scss index 7fd6a28ca3..8eea61f8f3 100644 --- a/web_ui/src/shared/components/media-item-view/video-indicator.module.scss +++ b/web_ui/src/shared/components/media-item-view/video-indicator.module.scss @@ -1,4 +1,5 @@ .videoFrameText { font-size: var(--spectrum-global-dimension-font-size-50); color: var(--spectrum-global-color-gray-900); + background-color: var(--spectrum-global-color-gray-50); }