Update ResponsePreviewFooter to conditionally display icons based on the compact step

- should not show icon unless compacted

└── packages
    └── ui
        └── src
            └── components
                └── editor
                    ├── common
                    │   └── Button
                    │       ├── Button.module.scss
                    │       ├── Button.stories.tsx
                    │       └── Button.tsx
                    └── prompt
                        └── ResponsePreviewFooter
                            ├── ResponsePreviewFooter.module.scss
                            └── ResponsePreviewFooter.tsx

Author: robertpiosik

packages/ui/src/components/editor/prompt/ResponsePreviewFooter/ResponsePreviewFooter.module.scss

@@ -6,16 +6,3 @@
     flex: 1;
   }
 }
-
-.text {
-  &--hidden {
-    display: none;
-  }
-}
-
-.icon {
-  display: none;
-  &--visible {
-    display: inline-block;
-  }
-}

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

@@ -9,34 +9,34 @@ type Props = {
   is_accept_disabled: boolean
 }
 
-export const ResponsePreviewFooter: React.FC<Props> = ({
-  on_back,
-  on_reject,
-  on_accept,
-  is_accept_disabled
-}) => {
+export const ResponsePreviewFooter: React.FC<Props> = (props) => {
   const { container_ref, compact_step } = use_compacting()
 
   return (
     <div className={styles.container} ref={container_ref}>
       <Button
-        on_click={on_back}
+        on_click={props.on_back}
         is_secondary
         title="Back"
-        codicon="chevron-left"
+        codicon={compact_step >= 1 ? 'chevron-left' : undefined}
       >
-        {compact_step < 1 && <span className={styles.text}>Back</span>}
+        {compact_step < 1 && <span>Back</span>}
       </Button>
-      <Button on_click={on_reject} is_danger title="Reject" codicon="close">
-        {compact_step < 2 && <span className={styles.text}>Reject</span>}
+      <Button
+        on_click={props.on_reject}
+        is_danger
+        title="Reject"
+        codicon={compact_step >= 2 ? 'close-small' : undefined}
+      >
+        {compact_step < 2 && <span>Reject</span>}
       </Button>
       <Button
-        on_click={on_accept}
-        disabled={is_accept_disabled}
+        on_click={props.on_accept}
+        disabled={props.is_accept_disabled}
         title="Accept"
-        codicon="check"
+        codicon={compact_step >= 3 ? 'check' : undefined}
       >
-        {compact_step < 3 && <span className={styles.text}>Accept</span>}
+        {compact_step < 3 && <span>Accept</span>}
       </Button>
     </div>
   )