diff options
author | Sophie Zhang <sophie_zhang@brown.edu> | 2023-08-18 18:43:23 -0400 |
---|---|---|
committer | Sophie Zhang <sophie_zhang@brown.edu> | 2023-08-18 18:43:23 -0400 |
commit | 16d8c1f7af7989afd13201c1813163bc82d84622 (patch) | |
tree | 8e1d649f0207bc24e9bf8393b4e12b337031ce8b /src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx | |
parent | 6195c535912cf14934db014e099244a3a8705641 (diff) |
cleanup
Diffstat (limited to 'src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx')
-rw-r--r-- | src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx | 38 |
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> ); }; |