From 1f3001b97e0d373a700035fa3dd32bc45215ae3e Mon Sep 17 00:00:00 2001
From: Luke Heath <luke@fleetdm.com>
Date: Wed, 15 Jun 2022 12:30:36 -0700
Subject: [PATCH] Update API token modal to use new clipboard icon (#6234)

---
 .../EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx   | 4 ++--
 frontend/components/SecretField/SecretField.tsx             | 4 ++--
 frontend/components/SecretField/_styles.scss                | 6 +++---
 frontend/pages/UserSettingsPage/UserSettingsPage.tsx        | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/components/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx b/frontend/components/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
index 80d715ced9..c578983e47 100644
--- a/frontend/components/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
+++ b/frontend/components/EnrollSecretTable/EnrollSecretRow/EnrollSecretRow.tsx
@@ -7,7 +7,7 @@ import Button from "components/buttons/Button";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 // @ts-ignore
-import FleetIcon from "components/icons/FleetIcon";
+import ClipboardIcon from "../../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png";
 import EyeIcon from "../../../../assets/images/icon-eye-16x16@2x.png";
 import EditIcon from "../../../../assets/images/icon-pencil-14x14@2x.png";
 import DeleteIcon from "../../../../assets/images/icon-trash-14x14@2x.png";
@@ -77,7 +77,7 @@ const EnrollSecretRow = ({
             className={`${baseClass}__secret-copy-icon`}
             onClick={onCopySecret}
           >
-            <FleetIcon name="clipboard" />
+            <img src={ClipboardIcon} alt="copy to clipboard" />
           </Button>
           <a
             href="#showSecret"
diff --git a/frontend/components/SecretField/SecretField.tsx b/frontend/components/SecretField/SecretField.tsx
index 64e158f327..338589745b 100644
--- a/frontend/components/SecretField/SecretField.tsx
+++ b/frontend/components/SecretField/SecretField.tsx
@@ -6,8 +6,8 @@ import Button from "components/buttons/Button";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 // @ts-ignore
-import FleetIcon from "components/icons/FleetIcon";
 import EyeIcon from "../../../assets/images/icon-eye-16x16@2x.png";
+import ClipboardIcon from "../../../assets/images/icon-copy-clipboard-fleet-blue-20x20@2x.png";
 
 const baseClass = "secret-field";
 
@@ -50,7 +50,7 @@ const SecretField = ({ secret }: ISecretFieldProps): JSX.Element | null => {
             className={`${baseClass}__secret-copy-icon`}
             onClick={onCopySecret}
           >
-            <FleetIcon name="clipboard" />
+            <img src={ClipboardIcon} alt="copy to clipboard" />
           </Button>
           <a
             href="#showSecret"
diff --git a/frontend/components/SecretField/_styles.scss b/frontend/components/SecretField/_styles.scss
index a6c40542e4..5d90c293c4 100644
--- a/frontend/components/SecretField/_styles.scss
+++ b/frontend/components/SecretField/_styles.scss
@@ -10,7 +10,7 @@
 
     .input-field {
       width: 100%;
-      padding-right: 20%;
+      padding-right: 16%;
 
       &--disabled {
         letter-spacing: 0;
@@ -25,13 +25,13 @@
   &__secret-copy-icon {
     color: $core-vibrant-blue;
     margin-left: $pad-small;
-    margin-right: $pad-medium;
+    margin-right: $pad-small;
   }
 
   .copy-message {
     position: absolute;
     top: -32px;
-    right: 16px;
+    right: 10px;
   }
 
   .buttons {
diff --git a/frontend/pages/UserSettingsPage/UserSettingsPage.tsx b/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
index 37d2a85ee1..281f5014ee 100644
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
+++ b/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
@@ -237,7 +237,7 @@ const UserSettingsPage = ({ router }: IUserSettingsPageProps) => {
               <strong>This token expires.</strong> If you want an API key for a
               permanent integration, create an&nbsp;
               <a
-                href="https://fleetdm.com/docs/deploying/configuration#session-duration?utm_medium=fleetui&utm_campaign=get-api-token"
+                href="https://fleetdm.com/docs/using-fleet/fleetctl-cli#using-fleetctl-with-an-api-only-user?utm_medium=fleetui&utm_campaign=get-api-token"
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -258,7 +258,7 @@ const UserSettingsPage = ({ router }: IUserSettingsPageProps) => {
             This token is intended for SSO users to authenticate in the fleetctl
             CLI. It expires based on the{" "}
             <a
-              href="https://fleetdm.com/docs/using-fleet/fleetctl-cli#using-fleetctl-with-an-api-only-user?utm_medium=fleetui&utm_campaign=get-api-token"
+              href="https://fleetdm.com/docs/deploying/configuration#session-duration?utm_medium=fleetui&utm_campaign=get-api-token"
               target="_blank"
               rel="noopener noreferrer"
             >