From 3a0417bf1399c069d09a78d4a183fb832b127003 Mon Sep 17 00:00:00 2001
From: nguyentiendung <dungtpa2@gmail.com>
Date: Thu, 13 Jun 2024 15:42:19 +0700
Subject: [PATCH 1/7] [Issue-44] Update some screens (transfer confirmation,
 history...)

---
 .../Home/History/Detail/parts/Header.tsx      | 19 +++---
 .../Home/History/Detail/parts/Layout.tsx      |  2 +-
 .../src/Popup/Home/History/index.tsx          |  2 +-
 .../components/MetaInfo/parts/AccountItem.tsx | 58 ++++++++++++-------
 .../MetaInfo/parts/TransferItem.tsx           |  6 +-
 5 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Header.tsx b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Header.tsx
index 615d33d372e..b50d8e787af 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Header.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Header.tsx
@@ -71,14 +71,17 @@ const Component: React.FC<Props> = (props: Props) => {
             />
           )
           : (
-            <MetaInfo.Transfer
-              recipientAddress={data.to}
-              recipientName={data.toName}
-              recipientProxyId={data.toProxyId}
-              senderAddress={data.from}
-              senderName={data.fromName}
-              senderProxyId={data.fromProxyId}
-            />
+            <>
+              <MetaInfo.Account
+                address={data.from}
+                label={t('From')}
+              />
+
+              <MetaInfo.Account
+                address={data.to}
+                label={t('To')}
+              />
+            </>
           )
       }
     </>
diff --git a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
index 13b134b8f36..c7016c315f9 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
@@ -41,7 +41,7 @@ const Component: React.FC<Props> = (props: Props) => {
         statusName={t(HistoryStatusMap[data.status].name)}
         valueColorSchema={HistoryStatusMap[data.status].schema}
       />
-      {isValidExtrinsicHash && <MetaInfo.Default label={t('Transaction id')}>{toShort(data.extrinsicHash, 8, 9)}</MetaInfo.Default>}
+      {isValidExtrinsicHash && <MetaInfo.Default label={t('Transaction Hash')}>{toShort(data.extrinsicHash, 8, 9)}</MetaInfo.Default>}
       {
         !!data.time && (
           <MetaInfo.Default label={t('Transaction time')}>{formatHistoryDate(data.time, language, 'detail')}</MetaInfo.Default>
diff --git a/packages/extension-koni-ui/src/Popup/Home/History/index.tsx b/packages/extension-koni-ui/src/Popup/Home/History/index.tsx
index 91c97216d94..03a55f03554 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/index.tsx
@@ -307,7 +307,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
   const typeTitleMap: Record<string, string> = useMemo((): Record<ExtrinsicType | 'default' | 'send' | 'received', string> => ({
     default: t('Transaction'),
-    send: t('Send token'),
+    send: t('Transaction history'),
     received: t('Receive token'),
     [ExtrinsicType.TRANSFER_BALANCE]: t('Send token'),
     [ExtrinsicType.TRANSFER_TOKEN]: t('Send token'),
diff --git a/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx b/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
index 3700aad4f92..f51715d6a55 100644
--- a/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
+++ b/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
@@ -47,24 +47,11 @@ const Component: React.FC<AccountInfoItem> = (props: AccountInfoItem) => {
     return reformatAddress(accountAddress, addPrefix);
   }, [account, accountAddress, addressPrefix, chainInfoMap]);
 
-  const name = useMemo(() => {
-    const name = accountName || account?.name;
-
-    return (
-      <>
-        <div className={'__account-wrapper'}>
-          <div className={'__account-name'}>{name}&nbsp;</div>
-          <span>({toShort(address)})</span>
-        </div>
-      </>
-    );
-  }, [account?.name, accountName, address]);
-
   const isAll = useMemo(() => isAccountAll(address), [address]);
 
   return (
     <div className={CN(className, '__row -type-account')}>
-      {!!label && <div className={'__col __label-col'}>
+      {!!label && <div className={CN('__col __label-col', { '-is-account-name': (accountName || account?.name) })}>
         <div className={'__label'}>
           {label}
         </div>
@@ -86,13 +73,16 @@ const Component: React.FC<AccountInfoItem> = (props: AccountInfoItem) => {
               )
               : (
                 <>
-                  <AccountProxyAvatar
-                    className={'__account-avatar'}
-                    size={24}
-                    value={account?.proxyId}
-                  />
-                  <div className={'__account-name ml-xs'}>
-                    {name || toShort(address)}
+                  <div className={CN('__account-transfer-wrapper', { '-is-not-name': !(accountName || account?.name) })}>
+                    <div className={'__account-transfer-name'}>
+                      <AccountProxyAvatar
+                        className={'__account-avatar'}
+                        size={24}
+                        value={account?.proxyId}
+                      />
+                      <span className={'__name'}>{accountName || account?.name}</span>
+                    </div>
+                    <span className={'__short-address'}>{toShort(address, 9, 9)}</span>
                   </div>
                 </>
               )
@@ -112,6 +102,32 @@ const AccountItem = styled(Component)<AccountInfoItem>(({ theme: { token } }: Ac
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap'
+    },
+    '.__account-transfer-name': {
+      display: 'flex',
+      gap: 8,
+      justifyContent: 'flex-end'
+    },
+    '.-is-not-name': {
+      display: 'flex',
+      gap: 8,
+      alignItems: 'center'
+
+    },
+    '.-is-account-name.__label-col': {
+      display: 'flow'
+    },
+    '.__account-transfer-wrapper': {
+      overflow: 'hidden'
+    },
+    '.__name': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    '.__short-address': {
+      display: 'flex',
+      justifyContent: 'flex-end'
     }
   };
 });
diff --git a/packages/extension-koni-ui/src/components/MetaInfo/parts/TransferItem.tsx b/packages/extension-koni-ui/src/components/MetaInfo/parts/TransferItem.tsx
index 244dff1a64c..14a301e49ea 100644
--- a/packages/extension-koni-ui/src/components/MetaInfo/parts/TransferItem.tsx
+++ b/packages/extension-koni-ui/src/components/MetaInfo/parts/TransferItem.tsx
@@ -109,15 +109,15 @@ const Component: React.FC<TransferInfoItem> = (props: TransferInfoItem) => {
   }
 
   return (
-    <div className={CN(className, '__row -type-transfer')}>
+    <div className={CN(className, '__row')}>
       <div className={'__col'}>
-        <div className={'__label'}>{senderLabel || t('Sender')}</div>
+        <div className={'__label'}>{senderLabel || t('From')}</div>
 
         {genAccountBlock(senderAddress, senderProxyId, senderName)}
         {!!originChain && genChainBlock(originChain)}
       </div>
       <div className={'__col'}>
-        <div className={'__label'}>{recipientLabel || t('Recipient')}</div>
+        <div className={'__label'}>{recipientLabel || t('To')}</div>
 
         {genAccountBlock(recipientAddress, recipientProxyId, recipientName)}
         {!!destinationChain && genChainBlock(destinationChain)}

From 7d9f3ebeece127fd4769fca652645207f5c0d3d8 Mon Sep 17 00:00:00 2001
From: nguyentiendung <dungtpa2@gmail.com>
Date: Fri, 14 Jun 2024 10:56:37 +0700
Subject: [PATCH 2/7] [Issue-44] Update some screens (transfer confirmation,
 history...)

---
 .../variants/Transaction/variants/TransferBlock.tsx         | 4 ++--
 .../src/Popup/Home/History/Detail/parts/Layout.tsx          | 2 +-
 .../src/components/MetaInfo/parts/AccountItem.tsx           | 6 ++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/TransferBlock.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/TransferBlock.tsx
index fa8193e8c8f..c71d0058715 100644
--- a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/TransferBlock.tsx
+++ b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/variants/TransferBlock.tsx
@@ -46,7 +46,7 @@ const Component: React.FC<Props> = ({ className, transaction }: Props) => {
       <MetaInfo hasBackgroundWrapper>
         <MetaInfo.Account
           address={data.from}
-          label={t('Send from')}
+          label={t('From')}
           networkPrefix={senderPrefix}
         />
 
@@ -62,7 +62,7 @@ const Component: React.FC<Props> = ({ className, transaction }: Props) => {
 
         <MetaInfo.Account
           address={data.to}
-          label={t('Send to')}
+          label={t('To')}
           networkPrefix={receiverPrefix}
         />
 
diff --git a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
index c7016c315f9..90bd46e41cf 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
@@ -41,7 +41,7 @@ const Component: React.FC<Props> = (props: Props) => {
         statusName={t(HistoryStatusMap[data.status].name)}
         valueColorSchema={HistoryStatusMap[data.status].schema}
       />
-      {isValidExtrinsicHash && <MetaInfo.Default label={t('Transaction Hash')}>{toShort(data.extrinsicHash, 8, 9)}</MetaInfo.Default>}
+      {isValidExtrinsicHash && <MetaInfo.Default label={t('Transaction hash')}>{toShort(data.extrinsicHash, 8, 9)}</MetaInfo.Default>}
       {
         !!data.time && (
           <MetaInfo.Default label={t('Transaction time')}>{formatHistoryDate(data.time, language, 'detail')}</MetaInfo.Default>
diff --git a/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx b/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
index f51715d6a55..53d6234f931 100644
--- a/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
+++ b/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
@@ -110,7 +110,6 @@ const AccountItem = styled(Component)<AccountInfoItem>(({ theme: { token } }: Ac
     },
     '.-is-not-name': {
       display: 'flex',
-      gap: 8,
       alignItems: 'center'
 
     },
@@ -123,7 +122,10 @@ const AccountItem = styled(Component)<AccountInfoItem>(({ theme: { token } }: Ac
     '.__name': {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      color: token.colorTextLight2,
+      fontSize: token.fontSize,
+      fontWeight: token.fontWeightStrong
     },
     '.__short-address': {
       display: 'flex',

From 9dfb50c7da05bb99936452a38dbe218c38dac95c Mon Sep 17 00:00:00 2001
From: nguyentiendung <dungtpa2@gmail.com>
Date: Mon, 17 Jun 2024 14:50:00 +0700
Subject: [PATCH 3/7] [Issue-44] Update some screens (transfer confirmation,
 history...)

---
 .../parts/ConfirmationHeader.tsx              | 31 +++++++++++++++++--
 .../Popup/Confirmations/parts/Sign/Evm.tsx    |  8 ++++-
 .../src/Popup/Home/History/Detail/index.tsx   | 28 ++++++++++++++++-
 .../src/Popup/TransactionDone.tsx             |  4 +++
 4 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/parts/ConfirmationHeader.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/parts/ConfirmationHeader.tsx
index 7a564bb664f..01e51757c54 100644
--- a/packages/extension-koni-ui/src/Popup/Confirmations/parts/ConfirmationHeader.tsx
+++ b/packages/extension-koni-ui/src/Popup/Confirmations/parts/ConfirmationHeader.tsx
@@ -6,6 +6,7 @@ import { Icon, SwSubHeader } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { CaretRight } from 'phosphor-react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 interface Props extends ThemeProps {
@@ -17,6 +18,8 @@ interface Props extends ThemeProps {
 }
 
 function Component ({ className, index, numberOfConfirmations, onClickNext, onClickPrev, title }: Props) {
+  const { t } = useTranslation();
+
   return (
     <SwSubHeader
       background='transparent'
@@ -40,13 +43,35 @@ function Component ({ className, index, numberOfConfirmations, onClickNext, onCl
           }
         ]}
       showBackButton={index > 0}
-      title={title}
+      title={
+        <div className={'__title-wrapper'}>
+          <div>{t(title || '')}</div>
+          <div className={'__beta-version'}>Beta version</div>
+        </div>
+      }
     />
   );
 }
 
-const ConfirmationHeader = styled(Component)<Props>(({ theme }: ThemeProps) => {
-  return {};
+const ConfirmationHeader = styled(Component)<Props>(({ theme: { token } }: ThemeProps) => {
+  return {
+    '.__beta-version': {
+      color: token.colorTextTertiary,
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      fontWeight: token.bodyFontWeight,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+
+    '.__title-wrapper': {
+      fontSize: token.fontSizeXL,
+      lineHeight: token.lineHeightHeading4,
+      fontWeight: token.fontWeightStrong
+
+    }
+  };
 });
 
 export default ConfirmationHeader;
diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx
index cfbcb1dfc19..5884a09f83a 100644
--- a/packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx
+++ b/packages/extension-koni-ui/src/Popup/Confirmations/parts/Sign/Evm.tsx
@@ -240,6 +240,7 @@ const Component: React.FC<Props> = (props: Props) => {
   return (
     <div className={CN(className, 'confirmation-footer')}>
       <Button
+        className={'__cancel-button'}
         disabled={loading}
         icon={(
           <Icon
@@ -253,6 +254,7 @@ const Component: React.FC<Props> = (props: Props) => {
         {t('Cancel')}
       </Button>
       <Button
+        className={'__ok-button'}
         disabled={!canSign}
         icon={(
           <Icon
@@ -282,7 +284,11 @@ const Component: React.FC<Props> = (props: Props) => {
 };
 
 const EvmSignArea = styled(Component)<Props>(({ theme: { token } }: Props) => {
-  return {};
+  return {
+    '.__ok-button, .__cancel-button': {
+      fontWeight: token.fontWeightStrong
+    }
+  };
 });
 
 export default EvmSignArea;
diff --git a/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx b/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx
index 8db07f8320d..8ca6eb6e756 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx
@@ -89,7 +89,12 @@ function Component ({ className = '', data, onCancel }: Props): React.ReactEleme
       footer={modalFooter}
       id={HISTORY_DETAIL_MODAL}
       onCancel={onCancel}
-      title={data?.displayData?.title || ''}
+      title={
+        <div className={'__title-wrapper'}>
+          <div>{t(data?.displayData?.title || '')}</div>
+          <div className={'__beta-version'}>Beta version</div>
+        </div>
+      }
     >
       <div className={'__layout-container'}>
         {data && <HistoryDetailLayout data={data} />}
@@ -104,6 +109,27 @@ export const HistoryDetailModal = styled(Component)<Props>(({ theme: { token } }
       marginBottom: 0
     },
 
+    '.__beta-version': {
+      color: token.colorTextTertiary,
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      fontWeight: token.bodyFontWeight,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+
+    '.__title-wrapper': {
+      fontSize: token.fontSizeXL,
+      lineHeight: token.lineHeightHeading4,
+      fontWeight: token.fontWeightStrong
+
+    },
+
+    '.ant-sw-modal-header': {
+      borderBottomColor: token.colorBgSecondary
+    },
+
     '.ant-sw-modal-footer': {
       border: 0
     }
diff --git a/packages/extension-koni-ui/src/Popup/TransactionDone.tsx b/packages/extension-koni-ui/src/Popup/TransactionDone.tsx
index 3968c06c30b..e6289355345 100644
--- a/packages/extension-koni-ui/src/Popup/TransactionDone.tsx
+++ b/packages/extension-koni-ui/src/Popup/TransactionDone.tsx
@@ -104,6 +104,10 @@ const TransactionDone = styled(Component)<Props>(({ theme: { token } }: Props) =
       textAlign: 'center'
     },
 
+    '.ant-btn-content-wrapper': {
+      fontWeight: token.fontWeightStrong
+    },
+
     '.and-more': {
       fontSize: token.fontSizeHeading5,
       lineHeight: token.lineHeightHeading5,

From 6f568bbfdb341ba0da0a41f034b41f64e2c2a276 Mon Sep 17 00:00:00 2001
From: nguyentiendung <dungtpa2@gmail.com>
Date: Tue, 18 Jun 2024 10:47:38 +0700
Subject: [PATCH 4/7] "[Issue-44] Style: Update padding in the history and
 maxWidth for the accountItem block."

---
 .../src/Popup/Home/History/Detail/parts/Layout.tsx           | 5 ++++-
 .../src/components/MetaInfo/parts/AccountItem.tsx            | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
index 90bd46e41cf..70c6cae615f 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/Detail/parts/Layout.tsx
@@ -29,7 +29,10 @@ const Component: React.FC<Props> = (props: Props) => {
   const isValidExtrinsicHash = data.extrinsicHash && data.extrinsicHash !== '' && !data.extrinsicHash.startsWith('internal.');
 
   return (
-    <MetaInfo className={CN(className)}>
+    <MetaInfo
+      className={CN(className)}
+      spaceSize={'sm'}
+    >
       <MetaInfo.DisplayType
         label={t('Transaction type')}
         typeName={t(TxTypeNameMap[data.type])}
diff --git a/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx b/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
index 53d6234f931..e1d7ea6e4e9 100644
--- a/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
+++ b/packages/extension-koni-ui/src/components/MetaInfo/parts/AccountItem.tsx
@@ -117,7 +117,8 @@ const AccountItem = styled(Component)<AccountInfoItem>(({ theme: { token } }: Ac
       display: 'flow'
     },
     '.__account-transfer-wrapper': {
-      overflow: 'hidden'
+      overflow: 'hidden',
+      maxWidth: 204
     },
     '.__name': {
       whiteSpace: 'nowrap',

From 52e55b8311b9ff6894ddf444da28fbd284aabb45 Mon Sep 17 00:00:00 2001
From: nguyentiendung <dungtpa2@gmail.com>
Date: Wed, 19 Jun 2024 11:21:27 +0700
Subject: [PATCH 5/7] "[Issue-44] Style: Update fontWeight for button

---
 .../src/Popup/Home/History/Detail/index.tsx                  | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx b/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx
index 8ca6eb6e756..a511bdf3da4 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/Detail/index.tsx
@@ -69,6 +69,7 @@ function Component ({ className = '', data, onCancel }: Props): React.ReactEleme
     return (
       <Button
         block
+        className={'explorer-button'}
         disabled={!link}
         icon={
           <Icon
@@ -130,6 +131,10 @@ export const HistoryDetailModal = styled(Component)<Props>(({ theme: { token } }
       borderBottomColor: token.colorBgSecondary
     },
 
+    '.explorer-button': {
+      fontWeight: token.fontWeightStrong
+    },
+
     '.ant-sw-modal-footer': {
       border: 0
     }

From 943479576056e2f972815b0010eb82219f8d6346 Mon Sep 17 00:00:00 2001
From: nguyentiendung <dungtpa2@gmail.com>
Date: Wed, 19 Jun 2024 11:57:37 +0700
Subject: [PATCH 6/7] "[Issue-44] Style: Update margin for confirmation screen

---
 .../Confirmations/variants/EvmTransactionConfirmation.tsx     | 4 ++++
 .../src/Popup/Confirmations/variants/Transaction/index.tsx    | 2 +-
 .../extension-koni-ui/src/components/MetaInfo/MetaInfo.tsx    | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/variants/EvmTransactionConfirmation.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/variants/EvmTransactionConfirmation.tsx
index 4de1c3d8fbe..52a6bb95c2b 100644
--- a/packages/extension-koni-ui/src/Popup/Confirmations/variants/EvmTransactionConfirmation.tsx
+++ b/packages/extension-koni-ui/src/Popup/Confirmations/variants/EvmTransactionConfirmation.tsx
@@ -129,6 +129,10 @@ const EvmTransactionConfirmation = styled(Component)<Props>(({ theme: { token }
     }
   },
 
+  '.network-box': {
+    marginTop: token.margin
+  },
+
   '.to-account': {
     marginTop: token.margin - 2
   },
diff --git a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx
index 3c16eea3ade..6447c10f23e 100644
--- a/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Confirmations/variants/Transaction/index.tsx
@@ -160,7 +160,7 @@ const TransactionConfirmation = styled(Component)<Props>(({ theme: { token } }:
     marginTop: token.marginXS,
 
     '.network-box': {
-      marginTop: token.marginSM
+      marginTop: token.margin
     },
 
     '.-to-right': {
diff --git a/packages/extension-koni-ui/src/components/MetaInfo/MetaInfo.tsx b/packages/extension-koni-ui/src/components/MetaInfo/MetaInfo.tsx
index 1f23e9ce016..debbb8f2f22 100644
--- a/packages/extension-koni-ui/src/components/MetaInfo/MetaInfo.tsx
+++ b/packages/extension-koni-ui/src/components/MetaInfo/MetaInfo.tsx
@@ -41,7 +41,7 @@ const Component: React.FC<Props> = ({ children, className = '',
 const _MetaInfo = styled(Component)<Props>(({ theme: { token } }: Props) => {
   return ({
     '& + .meta-info-block': {
-      marginTop: token.marginSM
+      marginTop: token.margin
     },
 
     '.ant-number .ant-typography': {

From 6b41e9fd6b8d1af93325d89ed33e224fabd9abb0 Mon Sep 17 00:00:00 2001
From: nguyentiendung <dungtpa2@gmail.com>
Date: Wed, 19 Jun 2024 15:03:08 +0700
Subject: [PATCH 7/7] [Issue-44] Revert title history

---
 packages/extension-koni-ui/src/Popup/Home/History/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/History/index.tsx b/packages/extension-koni-ui/src/Popup/Home/History/index.tsx
index 03a55f03554..91c97216d94 100644
--- a/packages/extension-koni-ui/src/Popup/Home/History/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/History/index.tsx
@@ -307,7 +307,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
   const typeTitleMap: Record<string, string> = useMemo((): Record<ExtrinsicType | 'default' | 'send' | 'received', string> => ({
     default: t('Transaction'),
-    send: t('Transaction history'),
+    send: t('Send token'),
     received: t('Receive token'),
     [ExtrinsicType.TRANSFER_BALANCE]: t('Send token'),
     [ExtrinsicType.TRANSFER_TOKEN]: t('Send token'),