diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui')
4 files changed, 32 insertions, 16 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx index 62f7a2993..b0c2a2730 100644 --- a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx @@ -19,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TranslatedString } from "@gnu-taler/taler-util"; import { css } from "@linaria/core"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { Alert } from "./Alert.jsx"; @@ -53,16 +54,16 @@ export const BasicExample = (): VNode => ( export const WithTitle = (): VNode => ( <Wrapper> - <Alert title="Warning" severity="warning"> + <Alert title={"Warning" as TranslatedString} severity="warning"> this is an warning </Alert> - <Alert title="Error" severity="error"> + <Alert title={"Error" as TranslatedString} severity="error"> this is an error </Alert> - <Alert title="Success" severity="success"> + <Alert title={"Success" as TranslatedString} severity="success"> this is an success </Alert> - <Alert title="Info" severity="info"> + <Alert title={"Info" as TranslatedString} severity="info"> this is an info </Alert> </Wrapper> @@ -74,16 +75,32 @@ const showSomething = async function (): Promise<void> { export const WithAction = (): VNode => ( <Wrapper> - <Alert title="Warning" severity="warning" onClose={showSomething}> + <Alert + title={"Warning" as TranslatedString} + severity="warning" + onClose={showSomething} + > this is an warning </Alert> - <Alert title="Error" severity="error" onClose={showSomething}> + <Alert + title={"Error" as TranslatedString} + severity="error" + onClose={showSomething} + > this is an error </Alert> - <Alert title="Success" severity="success" onClose={showSomething}> + <Alert + title={"Success" as TranslatedString} + severity="success" + onClose={showSomething} + > this is an success </Alert> - <Alert title="Info" severity="info" onClose={showSomething}> + <Alert + title={"Info" as TranslatedString} + severity="info" + onClose={showSomething} + > this is an info </Alert> </Wrapper> diff --git a/packages/taler-wallet-webextension/src/mui/Alert.tsx b/packages/taler-wallet-webextension/src/mui/Alert.tsx index 360c3c3cb..b00312a86 100644 --- a/packages/taler-wallet-webextension/src/mui/Alert.tsx +++ b/packages/taler-wallet-webextension/src/mui/Alert.tsx @@ -13,6 +13,7 @@ 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/> */ +import { TranslatedString } from "@gnu-taler/taler-util"; import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; // eslint-disable-next-line import/extensions @@ -61,7 +62,7 @@ const colorVariant = { }; interface Props { - title?: string; + title?: TranslatedString; variant?: "filled" | "outlined" | "standard"; role?: string; onClose?: () => Promise<void>; @@ -110,20 +111,20 @@ function Message({ title, children, }: { - title?: string; + title?: TranslatedString; children: ComponentChildren; }): VNode { return ( <div class={css` padding: 8px 0px; - width: 100%; + width: 90%; `} > {title && ( <Typography class={css` - font-weight: ${theme.typography.fontWeightMedium}; + font-weight: ${theme.typography.fontWeightBold}; `} gutterBottom > @@ -160,6 +161,7 @@ export function Alert({ "--color-main": theme.palette[severity].main, "--color-light": theme.palette[severity].light, // ...(style as any), + textAlign: "left", }} elevation={1} > diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx index 3b5f24bc1..0c805e307 100644 --- a/packages/taler-wallet-webextension/src/mui/Paper.tsx +++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx @@ -29,9 +29,6 @@ const borderVariant = { `, }; const baseStyle = css` - background-color: ${theme.palette.background.paper}; - color: ${theme.palette.text.primary}; - .theme-dark & { background-image: var(--gradient-white-elevation); } diff --git a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts index 226d3c860..f9bf9eb2b 100644 --- a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts +++ b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts @@ -57,7 +57,7 @@ export function hexToRgb(color: string): string { let colors = color.match(re); if (colors && colors[0].length === 1) { - colors = colors.map((n) => n + n); + colors = colors.map((n) => n + n) as RegExpMatchArray; } return colors |