diff --git a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss
index 55aeee8d8e..2312dbf55c 100644
--- a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOSTable/_styles.scss
+++ b/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 @@
}
}
}
-
}
diff --git a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
index eaa7dd014f..2a3d226f82 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/_styles.scss
@@ -2,6 +2,7 @@
&__count {
display: flex;
gap: 12px;
+ align-items: center;
}
&__vuln_dropdown {
diff --git a/frontend/components/EnrollSecrets/SecretField/SecretField.stories.tsx b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.stories.tsx
similarity index 100%
rename from frontend/components/EnrollSecrets/SecretField/SecretField.stories.tsx
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.stories.tsx
diff --git a/frontend/components/EnrollSecrets/SecretField/SecretField.tsx b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.tsx
similarity index 66%
rename from frontend/components/EnrollSecrets/SecretField/SecretField.tsx
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/SecretField.tsx
index bceed62222..5f54f08b6f 100644
--- a/frontend/components/EnrollSecrets/SecretField/SecretField.tsx
+++ b/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 (
-
-
- {copyMessage && (
- {`${copyMessage} `}
- )}
-
-
-
-
-
-
+
+ {copyMessage && (
+ {`${copyMessage} `}
+ )}
+
+
+
);
};
@@ -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()}
);
};
diff --git a/frontend/components/EnrollSecrets/SecretField/_styles.scss b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/_styles.scss
similarity index 58%
rename from frontend/components/EnrollSecrets/SecretField/_styles.scss
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/_styles.scss
index 29401c7f25..fee0ee67cc 100644
--- a/frontend/components/EnrollSecrets/SecretField/_styles.scss
+++ b/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;
diff --git a/frontend/components/EnrollSecrets/SecretField/index.ts b/frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/index.ts
similarity index 100%
rename from frontend/components/EnrollSecrets/SecretField/index.ts
rename to frontend/pages/UserSettingsPage/APITokenModal/TokenSecretField/index.ts
diff --git a/frontend/pages/UserSettingsPage/UserSettingsPage.tsx b/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
index fae48a210d..19c389c867 100644
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.tsx
+++ b/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 (