1 files changed, 25 insertions, 13 deletions
diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
index 398ba5333..0dfcebea3 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
@@ -1,7 +1,8 @@
-import { Button } from '@mui/material';
-import { Oval } from 'react-loader-spinner';
 import './GenerativeFillButtons.scss';
 import React = require('react');
+import ReactLoading from 'react-loading';
+import { activeColor } from './generativeFillUtils/generativeFillConstants';
+import { Button, Type } from 'browndash-components';
 
 interface ButtonContainerProps {
     getEdit: () => Promise<void>;
@@ -12,17 +13,28 @@ interface ButtonContainerProps {
 const Buttons = ({ loading, getEdit, onReset }: ButtonContainerProps) => {
     return (
         <div className="generativeFillBtnContainer">
-            <Button onClick={onReset}>Reset</Button>
-            <Button
-                variant="contained"
-                onClick={() => {
-                    getEdit();
-                }}>
-                <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                    Get Edit
-                    {loading && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff89" strokeWidth={3} strokeWidthSecondary={3} />}
-                </span>
-            </Button>
+            <Button text="RESET" type={Type.PRIM} color={activeColor} onClick={onReset} />
+            {loading ? (
+                <Button
+                    text="GET EDITS"
+                    type={Type.TERT}
+                    color={activeColor}
+                    icon={<ReactLoading type="spin" color={'#ffffff'} width={20} height={20} />}
+                    iconPlacement="right"
+                    onClick={() => {
+                        if (!loading) getEdit();
+                    }}
+                />
+            ) : (
+                <Button
+                    text="GET EDITS"
+                    type={Type.TERT}
+                    color={activeColor}
+                    onClick={() => {
+                        if (!loading) getEdit();
+                    }}
+                />
+            )}
         </div>
     );
 };