diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
index ae9553623c..6bdf62a4f3 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/FileInfoModal.tsx
@@ -9,7 +9,7 @@ import CustomButton from "../../Elements/CustomButton"
import { Trans } from "@lingui/macro"
import { FileFullInfo } from "../../../Contexts/FilesContext"
import {
- Button,
+ CopyIcon,
formatBytes,
Grid,
Loading,
@@ -44,7 +44,6 @@ const useStyles = makeStyles(
},
closeButton: {
flex: 1,
- marginLeft: constants.generalUnit * 2,
[breakpoints.down("md")]: {
position: "fixed",
bottom: 0,
@@ -61,13 +60,6 @@ const useStyles = makeStyles(
textAlign: "center"
}
},
- heading: {
- fontWeight: typography.fontWeight.semibold,
- textAlign: "left",
- [breakpoints.down("md")]: {
- textAlign: "center"
- }
- },
infoHeading: {
fontWeight: typography.fontWeight.semibold,
textAlign: "left"
@@ -89,7 +81,8 @@ const useStyles = makeStyles(
color: palette.additional["gray"][8],
whiteSpace: "nowrap",
overflow: "hidden",
- textOverflow: "ellipsis"
+ textOverflow: "ellipsis",
+ marginRight: constants.generalUnit * 2
},
technicalContainer: {
paddingTop: constants.generalUnit,
@@ -114,7 +107,7 @@ const useStyles = makeStyles(
alignItems: "center",
justifyContent: "center",
left: "50%",
- bottom: "calc(100% + 5px)",
+ bottom: "calc(100% + 8px)",
position: "absolute",
transform: "translate(-50%, 0%)",
zIndex: zIndex?.layer1,
@@ -143,17 +136,20 @@ const useStyles = makeStyles(
visibility: "visible"
}
},
- copyButton: {
- width: "100%"
- },
copyContainer: {
- position: "relative",
- flexBasis: "75%",
- color: palette.additional["gray"][9],
+ position: "relative"
+ },
+ copyIcon: {
+ fontSize: "16px",
+ fill: palette.additional["gray"][9],
[breakpoints.down("md")]: {
- flexBasis: "100%",
- margin: `${constants.generalUnit * 2}px`
+ fontSize: "18px",
+ fill: palette.additional["gray"][9]
}
+ },
+ copyRow: {
+ display: "flex",
+ cursor: "pointer"
}
})
}
@@ -186,15 +182,27 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {
}
, [bucket, filePath, filesApiClient])
- const [copied, setCopied] = useState(false)
- const debouncedSwitchCopied = debounce(() => setCopied(false), 3000)
+ const [copiedCID, setCopiedCID] = useState(false)
+ const [copiedKey, setCopiedKey] = useState(false)
+ const debouncedSwitchCopiedCID = debounce(() => setCopiedCID(false), 3000)
+ const debouncedSwitchCopiedKey = debounce(() => setCopiedKey(false), 3000)
const onCopyCID = () => {
if (fullFileInfo?.content?.cid) {
- navigator.clipboard.writeText(fullFileInfo?.content?.cid)
+ navigator.clipboard.writeText(fullFileInfo.content.cid)
+ .then(() => {
+ setCopiedCID(true)
+ debouncedSwitchCopiedCID()
+ }).catch(console.error)
+ }
+ }
+
+ const onCopyKey = () => {
+ if (bucket?.encryptionKey) {
+ navigator.clipboard.writeText(bucket.encryptionKey)
.then(() => {
- setCopied(true)
- debouncedSwitchCopied()
+ setCopiedKey(true)
+ debouncedSwitchCopiedKey()
}).catch(console.error)
}
}
@@ -360,13 +368,27 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => {