Change symbol warning style to error style for images and pasted lines

- use red color instead of yellow for faulty symbols
- [Changes] also rename to --error

├── .gitignore
└── packages
    └── ui
        └── src
            ├── components
            │   └── editor
            │       └── common
            │           └── prompts
            │               ├── PromptField
            │               │   ├── PromptField.module.scss
            │               │   ├── PromptField.stories.tsx
            │               │   ├── PromptField.tsx
            │               │   ├── hooks
            │               │   │   ├── use-drag-drop.ts
            │               │   │   ├── use-dropdown.ts
            │               │   │   ├── use-ghost-text.ts
            │               │   │   ├── use-handlers
            │               │   │   │   ├── handle-copy.ts
            │               │   │   │   ├── handle-cut.ts
            │               │   │   │   ├── handle-input-change.ts
            │               │   │   │   ├── handle-input-click.ts
            │               │   │   │   ├── handle-key-down.ts
            │               │   │   │   ├── handle-paste.ts
            │               │   │   │   ├── handle-submit.ts
            │               │   │   │   ├── index.ts
            │               │   │   │   ├── types.ts
            │               │   │   │   ├── use-handlers.ts
            │               │   │   │   └── utils.ts
            │               │   │   └── use-keyboard-shortcuts.ts
            │               │   └── index.ts
            │               ├── Template
            │               │   ├── Template.module.scss
            │               │   ├── Template.tsx
            │               │   └── index.ts
            │               └── shared
            │                   └── symbols
            │                       ├── caret.ts
            │                       ├── get-highlighted-text.tsx
            │                       ├── index.ts
            │                       ├── position-mapping.ts
            │                       ├── prompt-symbols.module.scss
            │                       ├── reconstruct-raw-value.ts
            │                       └── use-symbol-deletion.ts
            └── styles
                └── foundation
                    └── _colors.scss

Author: robertpiosik

packages/ui/src/components/editor/common/prompts/shared/symbols/get-highlighted-text.tsx

@@ -97,7 +97,7 @@ export const get_highlighted_text = (params: {
         return `<span class="${cn(
           styles['symbol'],
           styles['symbol--pasted-lines'],
-          { [styles['symbol--warning']]: is_warning }
+          { [styles['symbol--error']]: is_warning }
         )}" data-type="pasted-lines-symbol"${
           is_warning ? ' title="File with selection is not selected"' : ''
         } data-path="${escape_html(path)}" data-start-line="${start_line}" data-start-col="${start_col}" data-end-line="${end_line}" data-end-col="${end_col}"><span class="${
@@ -193,7 +193,7 @@ export const get_highlighted_text = (params: {
         const hash = image_match[1]
         const is_warning = params.is_web_target
         return `<span class="${cn(styles['symbol'], styles['symbol--image'], {
-          [styles['symbol--warning']]: is_warning
+          [styles['symbol--error']]: is_warning
         })}" data-type="image-symbol" data-hash="${hash}"${
           is_warning
             ? ' title="The prompt autofill feature can\'t handle images.\nUpload in chatbot or use API with a multimodal model."'

packages/ui/src/components/editor/common/prompts/shared/symbols/prompt-symbols.module.scss

@@ -188,26 +188,26 @@
     }
   }
 
-  &--warning {
+  &--error {
     background-color: color-mix(
       in srgb,
-      var(--vscode-charts-yellow) 30%,
+      var(--vscode-charts-red) 30%,
       transparent
     );
   }
 
-  &--warning &__icon:hover {
+  &--error &__icon:hover {
     background-color: color-mix(
       in srgb,
-      var(--vscode-charts-yellow) 40%,
+      var(--vscode-charts-red) 40%,
       transparent
     );
   }
 
-  &--warning &__text:hover {
+  &--error &__text:hover {
     background-color: color-mix(
       in srgb,
-      var(--vscode-charts-yellow) 40%,
+      var(--vscode-charts-red) 40%,
       transparent
     );
   }