UI – Adjust API Token modal, other small fixes (#16396)

<img width="653" alt="Screenshot 2024-01-26 at 4 03 14 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/4cb59fbc-1cde-4b07-bbf4-cc73091c26b1">

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss

@@ -2,6 +2,7 @@
   &__count {
     display: flex;
     gap: 12px;
+    align-items: center;
   }
 
   .hosts-cell__wrapper {
@@ -36,5 +37,4 @@
       }
     }
   }
-
 }

frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss

@@ -2,6 +2,7 @@
   &__count {
     display: flex;
     gap: 12px;
+    align-items: center;
   }
 
   &__vuln_dropdown {

frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.tsx

@@ -36,29 +36,29 @@ const SecretField = ({ secret }: ISecretFieldProps): JSX.Element | null => {
     return false;
   };
 
-  const renderLabel = () => {
+  const renderCopyShowButtons = () => {
     return (
-      <span className={`${baseClass}`}>
-        <span className="buttons">
-          {copyMessage && (
-            <span className="copy-message">{`${copyMessage} `}</span>
-          )}
-          <Button
-            variant="unstyled"
-            className={`${baseClass}__secret-copy-icon`}
-            onClick={onCopySecret}
-          >
-            <Icon name="copy" />
-          </Button>
-          <a
-            href="#showSecret"
-            onClick={onToggleSecret}
-            className={`${baseClass}__show-secret`}
-          >
-            <Icon name="eye" />
-          </a>
-        </span>
-      </span>
+      <div className="buttons">
+        {copyMessage && (
+          <span
+            className={`${baseClass}__copy-message`}
+          >{`${copyMessage} `}</span>
+        )}
+        <Button
+          variant="unstyled"
+          className={`${baseClass}__copy-secret-icon`}
+          onClick={onCopySecret}
+        >
+          <Icon name="copy" />
+        </Button>
+        <Button
+          variant="unstyled"
+          className={`${baseClass}__show-secret-icon`}
+          onClick={onToggleSecret}
+        >
+          <Icon name="eye" />
+        </Button>
+      </div>
     );
   };
 
@@ -68,10 +68,10 @@ const SecretField = ({ secret }: ISecretFieldProps): JSX.Element | null => {
         disabled
         inputWrapperClass={`${baseClass}__secret-input`}
         name="secret-field"
-        label={renderLabel()}
         type={showSecret ? "text" : "password"}
         value={secret}
       />
+      {renderCopyShowButtons()}
     </div>
   );
 };

frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/_styles.scss

@@ -1,17 +1,17 @@
 .secret-field {
-  &__secret-input {
-    margin-bottom: 8px;
-
-    .form-field__label {
-      position: relative;
-      font-size: $x-small;
-      font-weight: $bold;
-      margin-top: $pad-small;
-      width: 100%;
-      height: 0;
-      min-height: 0;
+  &__secret {
+    display: flex;
+    align-items: center;
+    .buttons {
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      position: absolute;
+      left: 466px;
+      min-width: 130px;
     }
-
+  }
+  &__secret-input {
     .input-field {
       width: 100%;
       padding-right: 16%;
@@ -26,13 +26,11 @@
     }
   }
 
-  &__secret-copy-icon {
+  &__copy-secret-icon {
     color: $core-vibrant-blue;
-    margin-left: $pad-small;
-    margin-right: $pad-small;
   }
 
-  .copy-message {
+  &__copy-message {
     font-weight: $regular;
     vertical-align: top;
     background-color: $ui-light-grey;
@@ -41,29 +39,6 @@
     padding: 2px 6px;
   }
 
-  .buttons {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    right: 16px;
-    top: 12px;
-    height: 16px;
-
-    span {
-      font-weight: $regular;
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    img {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
   &__secret-download-icon {
     display: block;
     font-size: $x-small;

frontend/pages/UserSettingsPage/UserSettingsPage.tsx

@@ -20,11 +20,11 @@ import Modal from "components/Modal";
 // @ts-ignore
 import UserSettingsForm from "components/forms/UserSettingsForm";
 import InfoBanner from "components/InfoBanner";
-import SecretField from "components/EnrollSecrets/SecretField";
 import MainContent from "components/MainContent";
 import SidePanelContent from "components/SidePanelContent";
 import CustomLink from "components/CustomLink";
 
+import SecretField from "./APITokenModal/TokenSecretField/SecretField";
 import UserSidePanel from "./UserSidePanel";
 
 const baseClass = "user-settings";
@@ -170,6 +170,7 @@ const UserSettingsPage = ({
       return false;
     }
 
+    // TODO - move to its own component
     return (
       <Modal
         title="Get API token"

frontend/pages/UserSettingsPage/_styles.scss

@@ -24,6 +24,21 @@
   }
 
   .token-message {
+    @include help-text;
+    .custom-link {
+      font-size: inherit;
+      .icon {
+        scale: 0.88;
+      }
+      &__no-wrap {
+        // adjust for multi-line custom links
+        .icon {
+          padding-left: 4px;
+          position: relative;
+          top: 2px;
+        }
+      }
+    }
     margin-bottom: 2rem;
   }