fixing withdrawal process

2 files changed, 24 insertions, 7 deletions

diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 7890c3fa4..536e5b89a 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx
@@ -19,7 +19,7 @@ import { NiceSelect } from "./styled/index";
 import { h } from "preact";
 
 interface Props {
-  value: string;
+  value?: string;
   onChange: (s: string) => void;
   label: string;
   list: {
@@ -41,9 +41,11 @@ export function SelectList({ name, value, list, canBeNull, onChange, label, desc
         console.log(e.currentTarget.value, value)
         onChange(e.currentTarget.value)
       }}>
-        <option selected>
+        {value !== undefined ? <option selected>
           {list[value]}
-        </option>
+        </option> : <option selected disabled>
+            Select one option
+        </option>}
         {Object.keys(list)
           .filter((l) => l !== value)
           .map(key => <option value={key} key={key}>{list[key]}</option>)
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index e77e7d542..7c3bb3943 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -129,6 +129,12 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
     }
   }
 `
+export const Middle = styled.div`
+    justify-content: space-around;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+`
 
 export const PopupBox = styled.div<{ noPadding?: boolean }>`
   height: 290px;
@@ -138,11 +144,10 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
   justify-content: space-between;
 
   & > section {
-    padding-left: ${({ noPadding }) => noPadding ? '0px' : '8px'};
-    padding-right: ${({ noPadding }) => noPadding ? '0px' : '8px'};
+    padding: ${({ noPadding }) => noPadding ? '0px' : '8px'};
     // this margin will send the section up when used with a header
     margin-bottom: auto; 
-    overflow: auto;
+    overflow-y: auto;
 
     table td {
       padding: 5px 10px;
@@ -153,6 +158,16 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>`
     }
   }
 
+  & > section[data-expanded] {
+    height: 100%;
+  }
+
+  & > section[data-centered] {
+    justify-content: center;
+    display: flex;
+    /* flex-direction: column; */
+  }
+
   & > header {
     flex-direction: row;
     justify-content: space-between;
@@ -596,7 +611,7 @@ export const NiceSelect = styled.div`
 
   position: relative;
   display: flex;
-  width: 10em;
+  /* width: 10em; */
   overflow: hidden;
   border-radius: .25em;