Add stop logos to abort button on web

sourcegraph · Jun 16, 2023 · 10b7b1e · 10b7b1e
1 parent a0a2eb8
commit 10b7b1e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/client/web/src/cody/components/ChatUI/ChatUi.module.scss b/client/web/src/cody/components/ChatUI/ChatUi.module.scss
@@ -6,10 +6,7 @@
 }
 
 .transcript-item {
-    border-color: transparent;
-    border-top-width: 1px;
-    border-top-style: solid;
-    border-bottom-style: none !important; // Override the Transcript...last-child row
+    border: none !important; // Override the Transcript...last-child row
 }
 
 .transcript-action > ol {

diff --git a/client/web/src/cody/components/ChatUI/ChatUi.tsx b/client/web/src/cody/components/ChatUI/ChatUi.tsx
@@ -1,6 +1,15 @@
 import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react'
 
-import { mdiClose, mdiSend, mdiArrowDown, mdiPencil, mdiThumbUp, mdiThumbDown, mdiCheck } from '@mdi/js'
+import {
+    mdiClose,
+    mdiSend,
+    mdiArrowDown,
+    mdiPencil,
+    mdiThumbUp,
+    mdiThumbDown,
+    mdiCheck,
+    mdiStopCircleOutline,
+} from '@mdi/js'
 import classNames from 'classnames'
 import useResizeObserver from 'use-resize-observer'
 
@@ -119,9 +128,9 @@ interface IAbortMessageInProgressProps {
 const AbortMessageInProgress: React.FunctionComponent<IAbortMessageInProgressProps> = React.memo(
     function AbortMessageInProgressButton({ onAbortMessageInProgress }) {
         return (
-            <div className="d-flex justify-content-center w-100 mt-4 mb-2">
-                <Button onClick={onAbortMessageInProgress} variant="secondary" outline={true} size="sm">
-                    Stop generating
+            <div className="d-flex justify-content-center w-100 mb-1">
+                <Button onClick={onAbortMessageInProgress} variant="secondary" outline={false} size="sm">
+                    <Icon aria-label="Abort" svgPath={mdiStopCircleOutline} /> Stop generating
                 </Button>
             </div>
         )