From 4cc084bad18edede4822cb3be2c353b19265e374 Mon Sep 17 00:00:00 2001
From: lw-cdm <linhtm@cdmteck.com>
Date: Tue, 24 Oct 2023 15:19:52 +0700
Subject: [PATCH] [Issue - 2014] Update responsive

---
 .../src/Popup/MissionPool/MissionItem.tsx         | 11 +++++------
 .../src/Popup/MissionPool/index.tsx               | 15 +++++----------
 .../components/Earning/HorizontalEarningItem.tsx  |  1 -
 .../src/components/Layout/base/Base.tsx           | 11 +++++++++++
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/MissionPool/MissionItem.tsx b/packages/extension-koni-ui/src/Popup/MissionPool/MissionItem.tsx
index f9ad081d59..30d1719c39 100644
--- a/packages/extension-koni-ui/src/Popup/MissionPool/MissionItem.tsx
+++ b/packages/extension-koni-ui/src/Popup/MissionPool/MissionItem.tsx
@@ -138,7 +138,7 @@ function Component (props: Props): React.ReactElement<Props> {
       >
         <div
           className='__compact-item-background'
-          style={{ backgroundImage: data.logo ? `url("${data.logo}")` : undefined }}
+          style={{ backgroundImage: data.backdrop_image ? `url("${data.backdrop_image}")` : undefined }}
         ></div>
 
         <div className={'__compact-item-inner'}>
@@ -393,7 +393,7 @@ const MissionItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
       '.__compact-item-background': {
         height: '100%',
         width: 32,
-        backgroundPosition: 'center',
+        backgroundPosition: 'left',
         backgroundSize: 'cover',
         position: 'absolute',
         top: 0,
@@ -423,7 +423,6 @@ const MissionItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
       },
 
       '.__compact-item-content-part-2': {
-
         overflow: 'hidden'
       },
 
@@ -435,7 +434,8 @@ const MissionItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
         textOverflow: 'ellipsis',
         'white-space': 'nowrap',
         fontWeight: token.headingFontWeight,
-        flex: 1
+        flex: 1,
+        minWidth: 80
       },
 
       '.__compact-item-tags': {
@@ -467,8 +467,7 @@ const MissionItem = styled(Component)<Props>(({ theme: { token } }: Props) => {
         fontWeight: token.headingFontWeight,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        maxWidth: 100
+        whiteSpace: 'nowrap'
       }
     }
   };
diff --git a/packages/extension-koni-ui/src/Popup/MissionPool/index.tsx b/packages/extension-koni-ui/src/Popup/MissionPool/index.tsx
index 266f0794b8..854e884004 100644
--- a/packages/extension-koni-ui/src/Popup/MissionPool/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/MissionPool/index.tsx
@@ -291,16 +291,6 @@ const MissionPool = styled(Component)<Props>(({ theme: { token } }: Props) => {
         marginRight: -16,
         paddingLeft: 16,
         paddingRight: 16
-      },
-
-      '.__tool-area': {
-        '.search-container': {
-          order: 1
-        },
-
-        '.filter-tabs-container': {
-          order: 2
-        }
       }
     },
 
@@ -308,7 +298,12 @@ const MissionPool = styled(Component)<Props>(({ theme: { token } }: Props) => {
       '.__tool-area': {
         gap: token.sizeXS,
 
+        '.filter-tabs-container': {
+          order: 2
+        },
+
         '.search-container': {
+          order: 1,
           minWidth: '100%',
           maxWidth: 'none'
         }
diff --git a/packages/extension-koni-ui/src/components/Earning/HorizontalEarningItem.tsx b/packages/extension-koni-ui/src/components/Earning/HorizontalEarningItem.tsx
index 97e8971232..d10909c36b 100644
--- a/packages/extension-koni-ui/src/components/Earning/HorizontalEarningItem.tsx
+++ b/packages/extension-koni-ui/src/components/Earning/HorizontalEarningItem.tsx
@@ -212,7 +212,6 @@ const Component: React.FC<Props> = (props: Props) => {
           temp.label = !compact ? text : undefined;
           temp.tooltip = compact ? text : undefined;
           temp.onClick = onClickButton(onClickStakeBtn, getEarnExtrinsicType(slug));
-          temp.label = yieldPoolInfo.type === YieldPoolType.LENDING ? t('Supply now') : t('Stake now');
           break;
         }
 
diff --git a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
index bacead7286..5c2e0df136 100644
--- a/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
+++ b/packages/extension-koni-ui/src/components/Layout/base/Base.tsx
@@ -196,6 +196,17 @@ const Base = styled(Component)<LayoutBaseProps>(({ theme: { token } }: LayoutBas
         }
       }
     }
+  },
+
+  '@media (max-width: 600px)': {
+    '.ant-sw-tab-bar-item': {
+      paddingBottom: token.sizeXS,
+      paddingTop: token.sizeXS
+    },
+
+    '.ant-sw-tab-bar-item-label': {
+      display: 'none'
+    }
   }
 }));