Use transient props for Alert component

Author: koesie10

extensions/ql-vscode/src/view/common/Alert.tsx

@@ -3,46 +3,46 @@ import { ReactNode } from "react";
 import { styled } from "styled-components";
 
 type ContainerProps = {
-  type: "warning" | "error";
-  inverse?: boolean;
+  $type: "warning" | "error";
+  $inverse?: boolean;
 };
 
-const getBackgroundColor = ({ type, inverse }: ContainerProps): string => {
-  if (!inverse) {
+const getBackgroundColor = ({ $type, $inverse }: ContainerProps): string => {
+  if (!$inverse) {
     return "var(--vscode-notifications-background)";
   }
 
-  switch (type) {
+  switch ($type) {
     case "warning":
       return "var(--vscode-editorWarning-foreground)";
     case "error":
       return "var(--vscode-debugExceptionWidget-border)";
   }
 };
 
-const getTextColor = ({ type, inverse }: ContainerProps): string => {
-  if (!inverse) {
+const getTextColor = ({ $type, $inverse }: ContainerProps): string => {
+  if (!$inverse) {
     return "var(--vscode-editor-foreground)";
   }
 
-  switch (type) {
+  switch ($type) {
     case "warning":
       return "var(--vscode-editor-background)";
     case "error":
       return "var(--vscode-list-activeSelectionForeground)";
   }
 };
 
-const getBorderColor = ({ type }: ContainerProps): string => {
-  switch (type) {
+const getBorderColor = ({ $type }: ContainerProps): string => {
+  switch ($type) {
     case "warning":
       return "var(--vscode-editorWarning-foreground)";
     case "error":
       return "var(--vscode-editorError-foreground)";
   }
 };
 
-const getTypeText = (type: ContainerProps["type"]): string => {
+const getTypeText = (type: ContainerProps["$type"]): string => {
   switch (type) {
     case "warning":
       return "Warning";
@@ -108,7 +108,7 @@ export const Alert = ({
   role,
 }: Props) => {
   return (
-    <Container type={type} inverse={inverse} role={role}>
+    <Container $type={type} $inverse={inverse} role={role}>
       <Title>
         {getTypeText(type)}: {title}
       </Title>