diff options
author | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:13:10 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-03-10 23:14:10 -0300 |
commit | 2150f3d96b25772dd608e245cd3508f857478c5b (patch) | |
tree | 7f449ec4df0f90c46774d1934ebee2eabb52cec7 /packages/taler-wallet-webextension/src/components/Banner.tsx | |
parent | 60a50babd14de6efbe16d9b427af85acc9da76e9 (diff) | |
download | wallet-core-2150f3d96b25772dd608e245cd3508f857478c5b.tar.xz |
grid implementation
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/Banner.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/Banner.tsx | 49 |
1 files changed, 37 insertions, 12 deletions
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx index 6ff7b1019..f6af81184 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.tsx @@ -1,33 +1,58 @@ import { h, Fragment, VNode } from "preact"; import { Divider } from "../mui/Divider"; -import { Button } from "./styled/index.js"; +import { Button } from "../mui/Button"; import { Typography } from "../mui/Typography"; import { Avatar } from "../mui/Avatar"; import { Grid } from "../mui/Grid"; import { Paper } from "../mui/Paper"; +import { Icon } from "./styled"; +import settingsIcon from "../../static/img/settings_black_24dp.svg"; +// & > a > div.settings-icon { +// mask: url(${settingsIcon}) no-repeat center; +// background-color: white; +// width: 24px; +// height: 24px; +// margin-left: auto; +// margin-right: 8px; +// padding: 4px; +// } +// & > a.active { +// background-color: #f8faf7; +// color: #0042b2; +// font-weight: bold; +// } +// & > a.active > div.settings-icon { +// background-color: #0042b2; +// } -function SignalWifiOffIcon(): VNode { - return <Fragment />; +function SignalWifiOffIcon({ ...rest }: any): VNode { + return <Icon {...rest} />; } -function Banner({}: {}) { +export function Banner({}: {}) { return ( <Fragment> - <Paper elevation={0} /*className={classes.paper}*/> - <Grid container wrap="nowrap" spacing={16} alignItems="center"> - <Grid item> - <Avatar /*className={classes.avatar}*/> - <SignalWifiOffIcon /> + <Paper elevation={3} /*className={classes.paper}*/> + <Grid + container + // wrap="nowrap" + // spacing={10} + alignItems="center" + columns={3} + > + <Grid item xs={1}> + <Avatar> + <SignalWifiOffIcon style={{ backgroundColor: "red" }} /> </Avatar> </Grid> - <Grid item> + <Grid item xs={1}> <Typography> You have lost connection to the internet. This app is offline. </Typography> </Grid> </Grid> - <Grid container justify="flex-end" spacing={8}> - <Grid item> + <Grid container justifyContent="flex-end" spacing={8} columns={3}> + <Grid item xs={1}> <Button color="primary">Turn on wifi</Button> </Grid> </Grid> |