styles for provider detail page

2 files changed, 48 insertions, 6 deletions

diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
new file mode 100644
index 000000000..eaf015224
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -0,0 +1,18 @@
+import { useState } from "preact/hooks";
+import arrowDown from '../../static/img/chevron-down.svg';
+import { ErrorBox } from "./styled";
+
+export function ErrorMessage({ title, description }: { title?: string; description?: string; }) {
+  const [showErrorDetail, setShowErrorDetail] = useState(false);
+  if (!title)
+    return null;
+  return <ErrorBox>
+    <div>
+      <p>{title}</p>
+      { description && <button onClick={() => { setShowErrorDetail(v => !v); }}>
+        <img style={{ height: '1.5em' }} src={arrowDown} />
+      </button> }
+    </div>
+    {showErrorDetail && <p>{description}</p>}
+  </ErrorBox>;
+}
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index ffcafd70f..434e3350a 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -4,6 +4,13 @@ import type * as Linaria from '@linaria/core';
 
 import { styled } from '@linaria/react';
 
+export const PaymentStatus = styled.span<{color:string}>`
+  padding: 5px;
+  border-radius: 5px;
+  color: white;
+  background-color: ${p => p.color};
+`
+
 export const PopupBox = styled.div`
   height: calc(320px - 34px - 16px);
   display: flex;
@@ -11,23 +18,40 @@ export const PopupBox = styled.div`
   justify-content: space-between;
 
   & > section {
+    // this margin will send the section up when used with a header
+    margin-bottom: auto; 
     overflow: auto;
+
+    table td {
+      padding: 5px 10px;
+    }
+    table tr {
+      border-bottom: 1px solid black;
+      border-top: 1px solid black;
+    }
+  }
+
+  & > header {
+    flex-direction: row;
+    justify-content: space-between;
+    display: flex;
+    margin-bottom: 5px;
+
+    & > div {
+      align-self: center;
+    }
   }
 
   & > footer {
     padding-top: 5px;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     display: flex;
-    & > button {
+    & button {
       margin-left: 5px;
     }
   }
 
-  & > section > h1 {
-    margin-top: 0.3em;
-    margin-bottom: 0.3em;
-  }
 `
 
 export const Button = styled.button`