diff options
author | Sebastian <sebasjm@gmail.com> | 2022-04-05 12:16:09 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-04-05 12:16:09 -0300 |
commit | a30a547ac5596c787252ce23a845093c426dc2ef (patch) | |
tree | e1dff892172cbcb0e34133f14a9e3f9e7f1c0250 /packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx | |
parent | c9adb4a5e292ae9a2c359a7a55083746486e11d9 (diff) | |
download | wallet-core-a30a547ac5596c787252ce23a845093c426dc2ef.tar.xz |
mui alert and not enough blanance ported to material
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx | 38 |
1 files changed, 23 insertions, 15 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx index 3ec7b314c..ddce93cd8 100644 --- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx +++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx @@ -1,24 +1,32 @@ -import { h, VNode } from "preact"; -import { ButtonBoxWarning, WarningBox } from "../components/styled/index.js"; -import { useTranslationContext } from "../context/translation.js"; +import { css } from "@linaria/core"; +import { Fragment, h, VNode } from "preact"; +import { Alert } from "../mui/Alert.js"; +import { Button } from "../mui/Button.js"; +import { Paper } from "../mui/Paper.js"; +import { Typography } from "../mui/Typography.js"; export function NoBalanceHelp({ goToWalletManualWithdraw, }: { goToWalletManualWithdraw: () => void; }): VNode { - const { i18n } = useTranslationContext(); return ( - <WarningBox> - <p> - <b> - <i18n.Translate>You have no balance.</i18n.Translate> - </b>{" "} - <i18n.Translate>Withdraw some funds into your wallet.</i18n.Translate> - </p> - <ButtonBoxWarning onClick={() => goToWalletManualWithdraw()}> - <i18n.Translate>Withdraw</i18n.Translate> - </ButtonBoxWarning> - </WarningBox> + <Paper + class={css` + margin: 1em; + `} + > + <Alert title="You have no balance." severity="warning"> + <Typography>Withdraw some funds into your wallet.</Typography> + <Button + fullWidth + color="warning" + variant="outlined" + onClick={goToWalletManualWithdraw} + > + <Typography>Withdraw</Typography> + </Button> + </Alert> + </Paper> ); } |