ui tweaks & minor fixes

Signed-off-by: Roman <ixrock@gmail.com>

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 {
+      .CopyToClick:hover code {
-        &:hover {
+        color: $textColorSecondary;
-          color: $textColorSecondary;
-        }
-        cursor: pointer;
       }
     }
   }

src/renderer/components/+extensions/extensions.tsx

@@ -115,17 +115,28 @@ export class Extensions extends React.Component {
             label="Select local extensions"
             onClick={this.selectLocalExtensionsDialog}
           />
-          <small className="hint">
+          <p className="hint">
-            <Trans>Pro-Tip 1: you can download extension archive.tgz via npm by</Trans>{" "}
+            <Trans><b>Pro-Tip 1</b>: you can download extension archive.tgz via NPM:</Trans>
-            <CopyToClick showNotification><code>npm pack %name</code></CopyToClick>
+          </p>
-            <CopyToClick showNotification><code>npm view %name dist.tarball</code></CopyToClick>{" "}
+          <ul>
-            <em className="text-secondary">(click to copy)</em>
+            <CopyToClick showNotification selector="code">
-          </small>
+              <li>
-          <small className="hint">
+                <code>npm pack %name</code>
-            <Trans>Pro-Tip 2: you also can drop archive from file-system to this window to install</Trans>
+                <em> (click to copy)</em>
-          </small>
+              </li>
+            </CopyToClick>
+            <CopyToClick showNotification selector="code">
+              <li className="click-to-copy">
+                <code>npm view %name dist.tarball</code>
+                <em> (click to copy)</em>
+              </li>
+            </CopyToClick>
+          </ul>
+          <p className="hint">
+            <Trans><b>Pro-Tip 2</b>: you also can drop archive from file-system to this window to request installation</Trans>
+          </p>
         </div>
-        <div className="more-info flex inline gaps">
+        <div className="more-info flex inline gaps align-center">
           <Icon material="local_fire_department"/>
           <p>
             Check out documentation to <a href="https://docs.k8slens.dev/" target="_blank">learn more</a>

src/renderer/components/copy-to-click/copy-to-click.scss

@@ -0,0 +1,3 @@
+.CopyToClick {
+  cursor: pointer;
+}

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
+  resetSelection?: boolean;
-  showNotification?: 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<CopyToClickProps> = {
   getNotificationMessage(copiedText: string) {
-    return <p>Copied to clipboard: <em className="contrast">{copiedText}</em></p>
+    return <p>Copied to clipboard: <em>{copiedText}</em></p>
   }
 }
 
@@ -24,7 +27,7 @@ export class CopyToClick extends React.Component<CopyToClickProps> {
     return findDOMNode(this) as HTMLElement;
   }
 
-  get rootReactElem(): React.ReactElement<React.DOMAttributes<any>> {
+  get rootReactElem(): React.ReactElement<React.HTMLProps<any>> {
     return React.Children.only(this.props.children) as React.ReactElement;
   }
 
@@ -33,8 +36,9 @@ export class CopyToClick extends React.Component<CopyToClickProps> {
     if (!this.rootElem || !this.rootElem.contains(evt.target as any)) {
       return;
     }
-    const { showNotification, resetSelection, getNotificationMessage } = this.props;
+    const { showNotification, resetSelection, getNotificationMessage, selector } = this.props;
-    const { copiedText, copied } = copyToClipboard(this.rootElem, { resetSelection });
+    const contentElem = selector ? this.rootElem.querySelector<HTMLElement>(selector) : this.rootElem;
+    const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection });
     if (copied && showNotification) {
       Notifications.ok(getNotificationMessage(copiedText));
     }
@@ -45,8 +49,9 @@ export class CopyToClick extends React.Component<CopyToClickProps> {
 
   render() {
     try {
-      const rootElem = this.rootReactElem;
+      let rootElem = this.rootReactElem;
       return React.cloneElement(rootElem, {
+        className: cssNames("CopyToClick", rootElem.props.className),
         onClick: this.onClick,
       });
     } catch (err) {