diff --git a/packages/common/components/MediaViewer/MediaViewer.js b/packages/common/components/MediaViewer/MediaViewer.js index ca50e41d39..59778c3222 100644 --- a/packages/common/components/MediaViewer/MediaViewer.js +++ b/packages/common/components/MediaViewer/MediaViewer.js @@ -7,6 +7,15 @@ import Hammer from "hammerjs"; import { isMobileOnly } from "react-device-detect"; import { FileStatus } from "@docspace/common/constants"; +import InfoOutlineReactSvgUrl from "../../../../public/images/info.outline.react.svg?url"; +import CopyReactSvgUrl from "../../../../public/images/copy.react.svg?url"; +import DuplicateReactSvgUrl from "../../../../public/images/duplicate.react.svg?url"; +import DownloadReactSvgUrl from "../../../../public/images/download.react.svg?url"; +import DownloadAsReactSvgUrl from "../../../../public/images/download-as.react.svg?url"; +import RenameReactSvgUrl from "../../../../public/images/rename.react.svg?url"; +import TrashReactSvgUrl from "../../../../public/images/trash.react.svg?url"; +import MoveReactSvgUrl from "../../../../public/images/duplicate.react.svg?url"; + const mediaTypes = Object.freeze({ audio: 1, video: 2, @@ -507,21 +516,21 @@ class MediaViewer extends React.Component { { key: "download", label: t("Common:Download"), - icon: "images/download.react.svg", + icon: { DownloadReactSvgUrl }, onClick: () => onClickDownload(targetFile, t), disabled: false, }, { key: "rename", label: t("Rename"), - icon: "images/rename.react.svg", + icon: { RenameReactSvgUrl }, onClick: () => onClickRename(targetFile), disabled: false, }, { key: "delete", label: t("Common:Delete"), - icon: "images/trash.react.svg", + icon: { TrashReactSvgUrl }, onClick: () => onClickDelete(targetFile, t), disabled: false, }, @@ -532,7 +541,7 @@ class MediaViewer extends React.Component { id: "option_room-info", key: "room-info", label: t("Common:Info"), - icon: "/static/images/info.outline.react.svg", + icon: { InfoOutlineReactSvgUrl }, onClick: () => { return onShowInfoPanel(targetFile); }, @@ -541,21 +550,21 @@ class MediaViewer extends React.Component { { key: "download", label: t("Common:Download"), - icon: "images/download.react.svg", + icon: { DownloadReactSvgUrl }, onClick: () => onClickDownload(targetFile, t), disabled: false, }, { key: "move-to", label: t("MoveTo"), - icon: "images/move.react.svg", + icon: { MoveReactSvgUrl }, onClick: onMoveAction, disabled: isPreviewFile, }, // { // key: "download-as", // label: t("Translations:DownloadAs"), - // icon: "images/download-as.react.svg", // TODO: uncomment when we can download media by changing the format + // icon: {DownloadAsReactSvgUrl}, // TODO: uncomment when we can download media by changing the format // onClick: onClickDownloadAs, // disabled: false, // }, @@ -563,7 +572,7 @@ class MediaViewer extends React.Component { id: "option_copy-to", key: "copy-to", label: t("Translations:Copy"), - icon: "/static/images/copy.react.svg", + icon: { CopyReactSvgUrl }, onClick: onCopyAction, disabled: isPreviewFile, }, @@ -571,14 +580,14 @@ class MediaViewer extends React.Component { id: "option_create-copy", key: "copy", label: t("Common:Duplicate"), - icon: "/static/images/duplicate.react.svg", + icon: { DuplicateReactSvgUrl }, onClick: () => onDuplicate(targetFile, t), disabled: isPreviewFile, }, { key: "rename", label: t("Rename"), - icon: "images/rename.react.svg", + icon: { RenameReactSvgUrl }, onClick: () => onClickRename(targetFile), disabled: isPreviewFile, }, @@ -591,7 +600,7 @@ class MediaViewer extends React.Component { { key: "delete", label: t("Common:Delete"), - icon: "images/trash.react.svg", + icon: { TrashReactSvgUrl }, onClick: () => onClickDelete(targetFile, t), disabled: isPreviewFile, }, diff --git a/packages/common/components/Section/section.stories.js b/packages/common/components/Section/section.stories.js index 2fd27f75bc..87978b3607 100644 --- a/packages/common/components/Section/section.stories.js +++ b/packages/common/components/Section/section.stories.js @@ -17,6 +17,8 @@ import withReadme from "storybook-readme/with-readme"; import { boolean, withKnobs } from "@storybook/addon-knobs/react"; import Readme from "./README.md"; import { Router } from "react-router-dom"; +import ActionsHeaderTouchReactSvgUrl from "../../../../public/images/actions.header.touch.react.svg?url"; + const { authStore } = store; const HeaderContent = styled.div` @@ -63,7 +65,7 @@ const sectionHeaderContent = ( /> Section Header action("PlusIcon Clicked")(e)} /> diff --git a/packages/components/empty-screen-container/empty-screen-container.stories.js b/packages/components/empty-screen-container/empty-screen-container.stories.js index 912499e055..398c83847d 100644 --- a/packages/components/empty-screen-container/empty-screen-container.stories.js +++ b/packages/components/empty-screen-container/empty-screen-container.stories.js @@ -2,6 +2,7 @@ import React from "react"; import EmptyScreenContainer from "./"; import Link from "../link"; import CrossReactSvgUrl from "../../../public/images/cross.react.svg"; +import EmptyScreenFilterPng from "../../../public/images/empty_screen_filter.png"; export default { title: "Components/EmptyScreenContainer", @@ -37,7 +38,7 @@ const Template = (args) => { export const Default = Template.bind({}); Default.args = { - imageSrc: "/static/images/empty_screen_filter.png", + imageSrc: { EmptyScreenFilterPng }, imageAlt: "Empty Screen Filter image", headerText: "No results matching your search could be found", subheadingText: "No files to be displayed in this section", diff --git a/packages/components/selector/README.md b/packages/components/selector/README.md index 0a09f889bb..19ff5c515d 100644 --- a/packages/components/selector/README.md +++ b/packages/components/selector/README.md @@ -13,7 +13,7 @@ import Selector from "@docspace/components/selector"; cancelButtonLabel="Cancel" emptyScreenDescription="The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time." emptyScreenHeader="No other accounts here yet" - emptyScreenImage="static/images/empty_screen_filter.png" + emptyScreenImage={EmptyScreenFilterPng} hasNextPage={false} headerLabel="Room list" items={[]} @@ -30,11 +30,11 @@ import Selector from "@docspace/components/selector"; rowLoader={<>} searchEmptyScreenDescription=" SEARCH !!! The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time." searchEmptyScreenHeader="No other accounts here yet search" - searchEmptyScreenImage="static/images/empty_screen_filter.png" + searchEmptyScreenImage={EmptyScreenFilterPng} searchLoader={<>} searchPlaceholder="Search" searchValue="" - selectAllIcon="static/images/room.archive.svg" + selectAllIcon={RoomArchiveSvgUrl} selectAllLabel="All accounts" selectedAccessRight={{}} selectedItems={[]} diff --git a/packages/components/viewer/index.js b/packages/components/viewer/index.js index b86444313b..59b4afe6ca 100644 --- a/packages/components/viewer/index.js +++ b/packages/components/viewer/index.js @@ -13,6 +13,7 @@ import IconButton from "@docspace/components/icon-button"; import { isMobileOnly } from "react-device-detect"; +import ViewerMediaCloseSvgUrl from "../../../public/images/viewer.media.close.svg?url"; import MediaNextIcon from "../../../public/images/viewer.next.react.svg"; import MediaPrevIcon from "../../../public/images/viewer.prew.react.svg"; import ViewerPlayer from "./sub-components/viewer-player"; @@ -215,7 +216,7 @@ export const Viewer = (props) => { >