Add danger button variant and back button functionality to response preview footer

Author: robertpiosik

packages/ui/src/components/editor/common/Button/Button.module.scss

@@ -5,7 +5,6 @@
   gap: 3px;
   min-height: 28px;
   font-size: 13px;
-  padding: 4px 16px;
   font-family: system-ui, sans-serif;
   border: none;
   text-decoration: none;
@@ -35,7 +34,6 @@
   }
 
   &--secondary {
-    color: var(--vscode-button-secondaryForeground);
     background-color: var(--vscode-button-secondaryBackground);
 
     &:hover {
@@ -49,6 +47,24 @@
     }
   }
 
+  &--danger {
+    background-color: var(--vscode-inputValidation-errorBorder);
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--vscode-inputValidation-errorBorder) 80%,
+        var(--cwc-text-color)
+      );
+    }
+
+    &:disabled {
+      &:hover {
+        background-color: var(--vscode-inputValidation-errorBorder);
+      }
+    }
+  }
+
   &--small {
     min-height: unset;
     font-size: 11px;

packages/ui/src/components/editor/common/Button/Button.tsx

@@ -10,6 +10,7 @@ type Props = {
   codicon?: string
   title?: string
   is_secondary?: boolean
+  is_danger?: boolean
   is_focused?: boolean
   is_small?: boolean
 }
@@ -25,7 +26,8 @@ export const Button: FC<Props> = (props) => {
 
   const className = cn(styles.button, {
     [styles['button--secondary']]: props.is_secondary,
-    [styles['button--small']]: props.is_small
+    [styles['button--small']]: props.is_small,
+    [styles['button--danger']]: props.is_danger
   })
 
   const children = (

packages/ui/src/components/editor/panel/ResponsePreviewFooter/ResponsePreviewFooter.tsx

@@ -2,19 +2,24 @@ import { Button } from '../../common/Button'
 import styles from './ResponsePreviewFooter.module.scss'
 
 type Props = {
+  on_back: () => void
   on_reject: () => void
   on_accept: () => void
   is_accept_disabled: boolean
 }
 
 export const ResponsePreviewFooter: React.FC<Props> = ({
+  on_back,
   on_reject,
   on_accept,
   is_accept_disabled
 }) => {
   return (
     <div className={styles.container}>
-      <Button on_click={on_reject} is_secondary>
+      <Button on_click={on_back} is_secondary>
+        Back
+      </Button>
+      <Button on_click={on_reject} is_danger>
         Reject
       </Button>
       <Button on_click={on_accept} disabled={is_accept_disabled}>

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -419,6 +419,12 @@ export const Panel = () => {
               }}
               footer_slot={
                 <UiResponsePreviewFooter
+                  on_back={() => {
+                    post_message(vscode, {
+                      command: 'RESPONSE_PREVIEW',
+                      files: []
+                    })
+                  }}
                   on_reject={() => {
                     if (preview_item_created_at) {
                       set_response_history((prev) =>