fix #7152

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