Replace base text button with button

package.json

@@ -48,7 +48,7 @@
     "@gliff-ai/curate": "^7.6.2",
     "@gliff-ai/etebase": "^0.44.0",
     "@gliff-ai/manage": "^8.0.0",
-    "@gliff-ai/style": "^16.2.1",
+    "@gliff-ai/style": "file:gliff-ai-style-14.0.0.tgz",
     "@gliff-ai/upload": "^1.3.0",
     "@material-ui/types": "^5.1.0",
     "@mui/icons-material": "^5.8.4",

src/components/RecoveryKeyDialog.tsx

@@ -4,8 +4,8 @@ import {
   AdvancedDialog,
   theme,
   Typography,
-  MuiButton,
   MuiCard,
+  Button
 } from "@gliff-ai/style";
 import { useNavigate } from "react-router-dom";
 
@@ -81,7 +81,7 @@ export const RecoveryKeyDialog = ({ recoveryKey }: Props): JSX.Element => {
         <br />
         <br />
         <br />
-        <MuiButton
+        <Button
           onClick={() => {
             setForceClose(true);
             onClose();
@@ -90,9 +90,8 @@ export const RecoveryKeyDialog = ({ recoveryKey }: Props): JSX.Element => {
           color="primary"
           variant="contained"
           sx={{ textAlign: "center" }}
-        >
-          Ok
-        </MuiButton>
+          text="Ok"
+        />
       </Typography>
     </AdvancedDialog>
   );

src/components/SubmitButton.tsx

@@ -1,53 +1,44 @@
-import { theme } from "@gliff-ai/style";
-import { Button, CircularProgress } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { CircularProgress } from "@mui/material";
+import { Button, Box } from "@gliff-ai/style";
 import { ReactElement } from "react";
 
-const useStyles = makeStyles(() => ({
-  submitDiv: {
+
+  const submitDiv = {
     width: "fit-content",
     marginRight: "auto",
     marginLeft: "auto",
-  },
-  submit: {
-    color: theme.palette.text.primary,
-    textTransform: "none",
-    fontWeight: 700,
-    fontSize: "15px",
+    "& > button": {
+    marginBottom: "20px !important",
+    marginTop: "20px !important",
     width: "169px",
-    "&:hover": {
-      backgroundColor: theme.palette.primary.main,
-    },
-    marginBottom: "20px",
-    marginTop: "20px",
-  },
-}));
+    }
+  }
 
 interface Props {
   loading: boolean;
   disabled?: boolean;
   value: string;
 }
 
+
 function SubmitButton(props: Props): ReactElement {
-  const classes = useStyles();
+
+const text = (props.loading ? (
+          <CircularProgress size="1.5rem" color="inherit" />
+        ) : (
+          props.value
+        ))
 
   return (
-    <div className={classes.submitDiv}>
+    <Box sx={{...submitDiv}}>
       <Button
         type="submit"
         variant="contained"
         color="primary"
         disabled={props.disabled}
-        className={classes.submit}
-      >
-        {props.loading ? (
-          <CircularProgress size="1.5rem" color="inherit" />
-        ) : (
-          props.value
-        )}
-      </Button>
-    </div>
+        text={text}
+      />
+    </Box>
   );
 }
 

src/components/message/ConfirmationDialog.tsx

@@ -1,28 +1,4 @@
-import {
-  Dialog,
-  Card,
-  Paper,
-  Typography,
-  DialogActions,
-  Button,
-  Theme,
-} from "@mui/material";
-
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = () =>
-  makeStyles((theme: Theme) => ({
-    paperHeader: {
-      padding: "10px",
-      backgroundColor: theme.palette.primary.main,
-    },
-    projectsTypography: {
-      color: "#000000",
-      display: "inline",
-      fontSize: "21px",
-      marginRight: "125px",
-    },
-  }));
+import { Typography, AdvancedDialog, Box, Button } from "@gliff-ai/style";
 
 export function ConfirmationDialog(props: {
   open: boolean;
@@ -31,43 +7,29 @@ export function ConfirmationDialog(props: {
   message: string;
   okCallback: () => void;
 }) {
-  const classes = useStyles()();
-
   return (
-    <Dialog open={props.open}>
-      <Card>
-        <Paper
-          elevation={0}
-          variant="outlined"
-          square
-          className={classes.paperHeader}
-        >
-          <Typography className={classes.projectsTypography}>
-            {props.heading}
-          </Typography>
-        </Paper>
-        <Typography style={{ margin: "10px" }}>{props.message}</Typography>
-        <DialogActions>
-          <Button
-            onClick={() => {
-              props.setOpen(false);
-              void props.okCallback();
-            }}
-            color="primary"
-          >
-            OK
-          </Button>
-          <Button
-            onClick={() => {
-              props.setOpen(false);
-            }}
-            color="primary"
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </Card>
-    </Dialog>
+    <AdvancedDialog open={props.open} title={props.heading}>
+      <Typography style={{ margin: "10px" }}>{props.message}</Typography>
+      <Box>
+        <Button
+          onClick={() => {
+            props.setOpen(false);
+            void props.okCallback();
+          }}
+          color="primary"
+          variant="contained"
+          text="OK"
+        />
+        <Button
+          onClick={() => {
+            props.setOpen(false);
+          }}
+          color="primary"
+          variant="contained"
+          text="Cancel"
+        />
+      </Box>
+    </AdvancedDialog>
   );
 }
 
@@ -78,37 +40,22 @@ export function MessageDialog(props: {
   message: string;
   okCallback?: () => void;
 }) {
-  const classes = useStyles()();
-
   return (
-    <Dialog open={props.open}>
-      <Card>
-        <Paper
-          elevation={0}
-          variant="outlined"
-          square
-          className={classes.paperHeader}
-        >
-          <Typography className={classes.projectsTypography}>
-            {props.heading}
-          </Typography>
-        </Paper>
-        <Typography style={{ margin: "10px" }}>{props.message}</Typography>
-        <DialogActions>
-          <Button
-            onClick={() => {
-              props.setOpen(false);
-              if (props.okCallback) {
-                void props.okCallback();
-              }
-            }}
-            color="primary"
-          >
-            OK
-          </Button>
-        </DialogActions>
-      </Card>
-    </Dialog>
+    <AdvancedDialog open={props.open} title={props.heading}>
+      <Typography style={{ margin: "10px" }}>{props.message}</Typography>
+      <Box>
+        <Button
+          onClick={() => {
+            props.setOpen(false);
+            if (props.okCallback) {
+              void props.okCallback();
+            }
+          }}
+          color="primary"
+          text="OK"
+        />
+      </Box>
+    </AdvancedDialog>
   );
 }