grid implementation

3 files changed, 101 insertions, 12 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
new file mode 100644
index 000000000..136302166
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -0,0 +1,54 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { Banner } from "./Banner";
+import { Fragment, h } from "preact";
+
+export default {
+  title: "mui/banner",
+  component: Banner,
+};
+
+function Wrapper({ children }: any) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        backgroundColor: "lightgray",
+        padding: 10,
+        width: "100%",
+        // width: 400,
+        // height: 400,
+        justifyContent: "center",
+      }}
+    >
+      <div style={{ flexGrow: 1 }}>{children}</div>
+    </div>
+  );
+}
+
+export const BasicExample = () => (
+  <Fragment>
+    <Wrapper>
+      <Banner />
+    </Wrapper>
+  </Fragment>
+);
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>
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index a5ed64a83..80bfaa549 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -826,6 +826,16 @@ export const NavigationHeader = styled.div`
   }
 `;
 
+export const Icon = styled.div`
+  mask: url(${settingsIcon}) no-repeat center;
+  background-color: gray;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding: 4px;
+`;
+
 const image = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`;
 
 export const NiceSelect = styled.div`