storybook like page for dev, plus some style fixes

2 files changed, 20 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
index 866bd0379..d1b5e45ad 100644
--- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
+++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
@@ -89,10 +89,17 @@ export function MultiActionButton({
           marginLeft: 0,
           borderTopLeftRadius: 0,
           borderBottomLeftRadius: 0,
+          width: 36,
+          padding: 4,
+          height: 36,
+          fill: "white",
         }}
       >
         <div
-          style={{ height: 14 }}
+          style={{
+            height: 24,
+            width: 24,
+          }}
           dangerouslySetInnerHTML={{ __html: arrowDown }}
         />
       </ButtonPrimary>
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index e1b4dd2ac..f01e97eea 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -66,6 +66,17 @@ export const WalletActionOld = styled.section`
   }
 `;
 
+export const Title = styled.h1`
+  font-size: 2em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+`;
+export const SubTitle = styled.h1`
+  font-size: 1.5em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+`;
+
 export const DateSeparator = styled.div`
   color: gray;
   margin: 0.2em;
@@ -140,7 +151,7 @@ export const Middle = styled.div`
   height: 100%;
 `;
 
-export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>`
+export const PopupBox = styled.div<{ noPadding?: boolean; devMode?: boolean }>`
   height: 290px;
   width: 500px;
   overflow-y: visible;