From 03b768db4eadc7860a74b590c3e42957597b492a Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Tue, 7 Mar 2023 16:03:47 +0530
Subject: [PATCH] UI for memos fields.

---
 components/Transaction/ui.tsx | 96 +++++++++++++++++++----------------
 1 file changed, 53 insertions(+), 43 deletions(-)

diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 77b9385..20a60b8 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -338,51 +338,61 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
           <Flex column fluid>
             {Object.entries(memos).map(([id, memo]) => (
               <Flex column key={id} css={{ mb: '$2' }}>
-                <Input
-                  placeholder="Memo type"
-                  value={memo.type}
-                  onChange={e => {
-                    setState({
-                      memos: {
-                        ...memos,
-                        [id]: { ...memo, type: e.target.value }
-                      }
-                    })
+                <Flex
+                  row
+                  css={{
+                    flexWrap: 'wrap',
+                    width: '100%',
                   }}
-                />
-                <Input
-                  placeholder="Memo data"
-                  value={memo.data}
-                  onChange={e => {
-                    setState({
-                      memos: {
-                        ...memos,
-                        [id]: { ...memo, data: e.target.value }
-                      }
-                    })
-                  }}
-                />
-                <Input
-                  placeholder="Memo format"
-                  value={memo.format}
-                  onChange={e => {
-                    setState({
-                      memos: {
-                        ...memos,
-                        [id]: { ...memo, format: e.target.value }
-                      }
-                    })
-                  }}
-                />
-                <Button
-                  onClick={() => {
-                    const { [id]: _, ...rest } = memos
-                    setState({ memos: rest })
-                  }}
-                  variant="destroy"
                 >
-                  <Trash weight="regular" size="16px" />
-                </Button>
+                  <Input
+                    placeholder="Memo type"
+                    value={memo.type}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, type: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Input
+                    placeholder="Memo data"
+                    css={{ mx: '$2' }}
+                    value={memo.data}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, data: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Input
+                    placeholder="Memo format"
+                    value={memo.format}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, format: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Button
+                    css={{ ml: '$2' }}
+                    onClick={() => {
+                      const { [id]: _, ...rest } = memos
+                      setState({ memos: rest })
+                    }}
+                    variant="destroy"
+                  >
+                    <Trash weight="regular" size="16px" />
+                  </Button>
+                </Flex>
               </Flex>
             ))}
             <Button