destination ui

2 files changed, 27 insertions, 16 deletions

diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index fc16b7ce4..fce82f9d2 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -53,6 +53,8 @@ export function InputBaseRoot({
   multiline,
   focused,
   fullWidth,
+  startAdornment,
+  endAdornment,
   children,
 }: any): VNode {
   const fcs = useFormControl({});
@@ -61,6 +63,8 @@ export function InputBaseRoot({
       data-disabled={disabled}
       data-focused={focused}
       data-multiline={multiline}
+      data-hasStart={!!startAdornment}
+      data-hasEnd={!!endAdornment}
       data-error={error}
       class={[
         _class,
@@ -156,22 +160,28 @@ export function InputBaseComponent({
   multiline,
   type,
   class: _class,
+  startAdornment,
+  endAdornment,
   ...props
 }: any): VNode {
   return (
-    <input
-      disabled={disabled}
-      type={type}
-      class={[
-        componentStyle,
-        _class,
-        disabled && componentDisabledStyle,
-        size === "small" && componentSmallStyle,
-        // multiline && componentMultilineStyle,
-        type === "search" && searchStyle,
-      ].join(" ")}
-      {...props}
-    />
+    <Fragment>
+      {startAdornment}
+      <input
+        disabled={disabled}
+        type={type}
+        class={[
+          componentStyle,
+          _class,
+          disabled && componentDisabledStyle,
+          size === "small" && componentSmallStyle,
+          // multiline && componentMultilineStyle,
+          type === "search" && searchStyle,
+        ].join(" ")}
+        {...props}
+      />
+      {endAdornment}
+    </Fragment>
   );
 }
 
@@ -388,7 +398,6 @@ export function TextareaAutoSize({
       getStyleValue(computedStyle, "border-bottom-width") +
       getStyleValue(computedStyle, "border-top-width");
 
-    // console.log(boxSizing, padding, border);
     // The height of the inner content
     const innerHeight = inputShallow.scrollHeight;
 
@@ -412,7 +421,6 @@ export function TextareaAutoSize({
       outerHeight + (boxSizing === "border-box" ? padding + border : 0);
     const overflow = Math.abs(outerHeight - innerHeight) <= 1;
 
-    console.log("height", outerHeight, minRows, maxRows);
     setState((prevState) => {
       // Need a large enough difference to update the height.
       // This prevents infinite rendering loop.
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
index 53c6da295..fa5144ca3 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
+++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
@@ -27,7 +27,6 @@ export interface Props {
   defaultValue?: string;
   disabled?: boolean;
   disableUnderline?: boolean;
-  endAdornment?: VNode;
   error?: boolean;
   fullWidth?: boolean;
   id?: string;
@@ -42,6 +41,7 @@ export interface Props {
   required?: boolean;
   rows?: number;
   startAdornment?: VNode;
+  endAdornment?: VNode;
   type?: string;
   value?: string;
 }
@@ -108,6 +108,9 @@ const filledRootStyle = css`
   &[data-multiline] {
     padding: 25px 12px 8px;
   }
+  /* &[data-hasStart] {
+    padding-left: 25px;
+  } */
 `;
 
 const underlineStyle = css`