diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss
index f69470fc73..07571f9b7d 100644
--- a/src/renderer/components/+extensions/extensions.scss
+++ b/src/renderer/components/+extensions/extensions.scss
@@ -16,15 +16,15 @@
}
.extensions-info {
- .flex.gaps {
+ --flex-gap: #{$padding * 3};
+
+ > .flex.gaps {
--flex-gap: #{$padding};
}
+
.install-extension {
- code {
- &:hover {
- color: $textColorSecondary;
- }
- cursor: pointer;
+ .CopyToClick:hover code {
+ color: $textColorSecondary;
}
}
}
diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx
index d870245f6d..b8918078cd 100644
--- a/src/renderer/components/+extensions/extensions.tsx
+++ b/src/renderer/components/+extensions/extensions.tsx
@@ -115,17 +115,28 @@ export class Extensions extends React.Component {
label="Select local extensions"
onClick={this.selectLocalExtensionsDialog}
/>
-
- npm pack %namenpm view %name dist.tarball
+
npm pack %name
+ (click to copy)
+ npm view %name dist.tarball
+ (click to copy)
+
+
Check out documentation to learn more
diff --git a/src/renderer/components/copy-to-click/copy-to-click.scss b/src/renderer/components/copy-to-click/copy-to-click.scss
new file mode 100644
index 0000000000..af7a64d140
--- /dev/null
+++ b/src/renderer/components/copy-to-click/copy-to-click.scss
@@ -0,0 +1,3 @@
+.CopyToClick {
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/renderer/components/copy-to-click/copy-to-click.tsx b/src/renderer/components/copy-to-click/copy-to-click.tsx
index 53b86e4247..5ad4d7266b 100644
--- a/src/renderer/components/copy-to-click/copy-to-click.tsx
+++ b/src/renderer/components/copy-to-click/copy-to-click.tsx
@@ -1,19 +1,22 @@
+import "./copy-to-click.scss"
import React from "react"
import { findDOMNode } from "react-dom";
import { autobind } from "../../../common/utils";
import { Notifications } from "../notifications";
import { copyToClipboard } from "../../utils/copyToClipboard";
import logger from "../../../main/logger";
+import { cssNames } from "../../utils";
export interface CopyToClickProps {
- resetSelection?: boolean
- showNotification?: boolean
+ resetSelection?: boolean;
+ showNotification?: boolean;
+ selector?: string; // allows to copy partial content with css-selector from children-element
getNotificationMessage?(copiedText: string): React.ReactNode;
}
export const defaultProps: Partial Copied to clipboard: {copiedText} Copied to clipboard: {copiedText}