Use pill instead of text

BrunoQuaresma · BrunoQuaresma · commit ae1890dfbde8 · 2024-01-26T13:48:25.000Z
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -10,6 +10,8 @@ import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import { MultiTextField } from "./MultiTextField";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { Pill } from "components/Pill/Pill";
+import ErrorOutline from "@mui/icons-material/ErrorOutline";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
   return parameter.type === "bool";
@@ -46,11 +48,6 @@ const styles = {
       fontSize: 14,
     },
   }),
-  immutableLabel: (theme) => ({
-    fontSize: 14,
-    color: theme.experimental.roles.warning.fill,
-    fontWeight: 500,
-  }),
   optionalLabel: (theme) => ({
     fontSize: 14,
     color: theme.palette.text.disabled,
@@ -127,7 +124,9 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
       )}
       {!parameter.mutable && (
         <Tooltip title="This value cannot be modified after the workspace has been created.">
-          <span css={styles.immutableLabel}>Immutable*</span>
+          <Pill type="warning" icon={<ErrorOutline />}>
+            Immutable
+          </Pill>
         </Tooltip>
       )}
     </span>
