[Issue - 2014] Update responsive

Koniverse · Oct 24, 2023 · 4cc084b · 4cc084b
1 parent 8f4ac86
commit 4cc084b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 17 deletions.
diff --git 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
@@ -291,24 +291,19 @@ 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
-        }
       }
     },
 
     '@media (max-width: 767px)': {
       '.__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
@@ -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
@@ -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'
+    }
   }
 }));