From 1741ea264544be6061a2bf4cf0dff22390955dcc Mon Sep 17 00:00:00 2001
From: lw-cdm <linhtm@cdmteck.com>
Date: Fri, 20 Oct 2023 18:52:02 +0700
Subject: [PATCH] [Issue-2014] Update responsive

---
 .../Popup/Home/Earning/EarningManagement.tsx  | 46 +++++++++++++------
 .../src/Popup/Home/Earning/parts/Overview.tsx | 12 +++++
 .../src/components/Earning/EarningItem.tsx    |  7 +--
 .../src/components/EmptyList/EmptyList.tsx    |  2 +-
 4 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningManagement.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningManagement.tsx
index 6b9aaf21a4..bd4d0734d2 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Earning/EarningManagement.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Earning/EarningManagement.tsx
@@ -443,15 +443,32 @@ const Component: React.FC<Props> = (props: Props) => {
       });
   }, [assetRegistry, chainStateMap, groupYieldPosition, poolInfoMap, sortSelection]);
 
+  const addMore = useCallback(() => {
+    navigate('/home/earning/overview');
+  }, [navigate]);
+
   const renderWhenEmpty = useCallback(() => {
     return (
       <EmptyList
-        emptyMessage={t('Need message')}
-        emptyTitle={t('Need message')}
+        buttonProps={{
+          icon: (
+            <Icon
+              phosphorIcon={Vault}
+              size='sm'
+              weight='fill'
+            />
+          ),
+          onClick: addMore,
+          shape: 'circle',
+          size: 'xs',
+          children: t('Earn now')
+        }}
+        emptyMessage={t('Switch account, turn on networks or start earning to view pools')}
+        emptyTitle={t('No pools found')}
         phosphorIcon={Vault}
       />
     );
-  }, [t]);
+  }, [addMore, t]);
 
   const handleCloseUnstake = useCallback(() => {
     inactiveModal(TRANSACTION_YIELD_UNSTAKE_MODAL);
@@ -473,10 +490,6 @@ const Component: React.FC<Props> = (props: Props) => {
     inactiveModal(TRANSACTION_YIELD_CLAIM_MODAL);
   }, [inactiveModal]);
 
-  const addMore = useCallback(() => {
-    navigate('/home/earning/overview');
-  }, [navigate]);
-
   useEffect(() => {
     if (location.pathname.startsWith('/home/earning')) {
       setTitle(t('Earning'));
@@ -748,6 +761,13 @@ const EarningManagement = styled(Component)<Props>(({ theme: { token } }: Props)
       }
     },
 
+    '.empty-list': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+
     '.__body-area': {
       overflow: 'auto',
       flex: 1,
@@ -808,6 +828,11 @@ const EarningManagement = styled(Component)<Props>(({ theme: { token } }: Props)
         paddingRight: token.size
       },
 
+      '.empty-list': {
+        position: 'static',
+        transform: 'none'
+      },
+
       '.__toolbar-area': {
         position: 'sticky',
         zIndex: 10,
@@ -846,13 +871,6 @@ const EarningManagement = styled(Component)<Props>(({ theme: { token } }: Props)
           lineHeight: token.lineHeight
         }
       }
-    },
-
-    '.empty-list': {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)'
     }
   });
 });
diff --git a/packages/extension-koni-ui/src/Popup/Home/Earning/parts/Overview.tsx b/packages/extension-koni-ui/src/Popup/Home/Earning/parts/Overview.tsx
index f096e703a2..0d1576d0c3 100644
--- a/packages/extension-koni-ui/src/Popup/Home/Earning/parts/Overview.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/Earning/parts/Overview.tsx
@@ -369,6 +369,11 @@ const EarningOverviewContent = styled(Component)<Props>(({ theme: { token } }: P
         backgroundColor: token.colorBgDefault
       },
 
+      '.empty-list': {
+        position: 'static',
+        transform: 'none'
+      },
+
       '.search-container': {
         paddingBottom: token.size,
 
@@ -389,6 +394,13 @@ const EarningOverviewContent = styled(Component)<Props>(({ theme: { token } }: P
       '.__list-container': {
         paddingBottom: token.paddingXS
       }
+    },
+
+    '@media (max-width: 767px)': {
+      '.__list-container': {
+        display: 'flex',
+        flexDirection: 'column'
+      }
     }
   });
 });
diff --git a/packages/extension-koni-ui/src/components/Earning/EarningItem.tsx b/packages/extension-koni-ui/src/components/Earning/EarningItem.tsx
index cf01643910..6c4c409e72 100644
--- a/packages/extension-koni-ui/src/components/Earning/EarningItem.tsx
+++ b/packages/extension-koni-ui/src/components/Earning/EarningItem.tsx
@@ -355,20 +355,22 @@ const EarningItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
     },
 
     '.__item-line-1, .__item-line-2': {
+      'white-space': 'nowrap',
       display: 'flex',
       justifyContent: 'space-between',
       gap: token.sizeSM
     },
 
     '.__item-line-1': {
-      'white-space': 'nowrap',
       marginBottom: token.marginXXS
     },
 
     '.__item-rewards-label, .__item-total-staked-label': {
       fontSize: token.fontSizeSM,
       lineHeight: token.lineHeightSM,
-      color: token.colorTextLight4
+      color: token.colorTextLight4,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
     },
 
     '.__item-name': {
@@ -377,7 +379,6 @@ const EarningItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
       color: token.colorTextLight1,
       fontWeight: token.headingFontWeight,
       overflow: 'hidden',
-      'white-space': 'nowrap',
       textOverflow: 'ellipsis'
     },
 
diff --git a/packages/extension-koni-ui/src/components/EmptyList/EmptyList.tsx b/packages/extension-koni-ui/src/components/EmptyList/EmptyList.tsx
index 97de454953..18a3eeb1f4 100644
--- a/packages/extension-koni-ui/src/components/EmptyList/EmptyList.tsx
+++ b/packages/extension-koni-ui/src/components/EmptyList/EmptyList.tsx
@@ -3,10 +3,10 @@
 
 import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { Button, ButtonProps, PageIcon } from '@subwallet/react-ui';
+import CN from 'classnames';
 import { IconProps } from 'phosphor-react';
 import React from 'react';
 import styled, { useTheme } from 'styled-components';
-import CN from 'classnames';
 
 interface Props extends ThemeProps {
   phosphorIcon?: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>,