2 files changed, 15 insertions, 3 deletions
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index b0e339c70..cfcef16d5 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -22,7 +22,7 @@ export function ErrorMessage({ title, description }: { title?: string|VNode; des
   const [showErrorDetail, setShowErrorDetail] = useState(false);
   if (!title)
     return null;
-  return <ErrorBox>
+  return <ErrorBox style={{paddingTop: 0, paddingBottom: 0}}>
     <div>
       <p>{title}</p>
       { description && <button onClick={() => { setShowErrorDetail(v => !v); }}>
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 0dbf34b5c..0537621bf 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -520,8 +520,7 @@ export const ErrorBox = styled.div`
   justify-content: space-between;
   flex-direction: column;
   /* margin: 0.5em; */
-  padding-left: 1em;
-  padding-right: 1em;
+  padding: 1em;
   /* width: 100%; */
   color: #721c24;
   background: #f8d7da;
@@ -539,6 +538,19 @@ export const ErrorBox = styled.div`
     }
   }
 `
+
+export const SuccessBox = styled(ErrorBox)`
+  color: #0f5132;
+  background-color: #d1e7dd;
+  border-color: #badbcc;
+`
+
+export const WarningBox = styled(ErrorBox)`
+  color: #664d03;
+  background-color: #fff3cd;
+  border-color: #ffecb5;
+`
+
 export const PopupNavigation = styled.div<{ devMode?: boolean }>`
   background-color:#0042b2;
   height: 35px;