fix: adjust styling

bitfocus · Oct 9, 2023 · 01398e3 · 01398e3
1 parent 29cc5e2
commit 01398e3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/webui/src/Controls/OptionsInputField.jsx b/webui/src/Controls/OptionsInputField.jsx
@@ -132,13 +132,15 @@ export function OptionsInputField({
 		control = <CInputGroupText>Unknown type "{option.type}"</CInputGroupText>
 	}
 
+	const featureIcons = []
+	if (features.variables)
+		featureIcons.push(<FontAwesomeIcon key="variables" icon={faDollarSign} title={'Supports variables'} />)
+
 	return (
 		<CFormGroup style={{ display: visibility === false ? 'none' : null }}>
 			<CLabel>
 				{option.label}
-				{features.variables && (
-					<FontAwesomeIcon className="feature-icon" icon={faDollarSign} title={'Supports variables'} />
-				)}
+				{featureIcons.length && <span className="feature-icons">{featureIcons}</span>}
 				{option.tooltip && <FontAwesomeIcon icon={faQuestionCircle} title={option.tooltip} />}
 			</CLabel>
 			{control}

diff --git a/webui/src/scss/_button-edit.scss b/webui/src/scss/_button-edit.scss
@@ -23,9 +23,20 @@
 
 		svg {
 			margin-left: 5px;
+		}
+
+		.feature-icons {
+			background-color: #ddd;
+			border-radius: 50%;
+
+			margin-left: 3px;
+
+			padding-left: 3px;
+			padding-right: 3px;
 
-			&.feature-icon {
-				margin-left: 3px;
+			svg {
+				margin-left: 2px;
+				margin-right: 2px;
 
 				font-size: 0.8rem;
 			}