[Issue-2014] Update responsive for earning

Koniverse · Oct 19, 2023 · 9556ce4 · 9556ce4
1 parent 29499ef
commit 9556ce4
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 38 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
@@ -530,7 +530,7 @@ const Component: React.FC<Props> = (props: Props) => {
         action: YieldAction.CUSTOM_ACTION,
         backgroundIconColor: 'geekblue-6',
         icon: Question,
-        label: t('FAQs'),
+        label: t('Earning information'),
         onClick: () => {
           selectedYieldPosition && onClickInfoBtn(selectedYieldPosition)();
         }

diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/Yield/Earn.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/Yield/Earn.tsx
@@ -239,6 +239,7 @@ const Component = () => {
     return (
       <MetaInfo
         labelColorScheme={'gray'}
+        spaceSize={'sm'}
         valueColorScheme={'gray'}
       >
         {
@@ -497,51 +498,55 @@ const Component = () => {
       <div className={'__transaction-block'}>
         <TransactionContent>
           <div style={{ display: 'flex', flexDirection: 'column', gap: token.paddingSM, paddingTop: token.paddingXS }}>
-            {/* <EarningBtn icon={<Logo className={'earning-calculator-tag'} size={16} network={'polkadot'} />} size={'xs'}> */}
-            {/*  {'DOT'} */}
-            {/* </EarningBtn> */}
-
             <Form
               className={'form-container form-space-sm earning-calculator-form-container'}
               form={form}
               initialValues={formDefault}
               onFieldsChange={onFieldsChange}
             >
               <HiddenInput fields={hiddenFields} />
-              {/* <Form.Item */}
-              {/*  name={FormFieldName.METHOD} */}
-              {/*  label={t('Select method')} */}
-              {/*  colon={false} */}
-              {/* > */}
-              {/*  <EarningMethodSelector items={Object.values(poolInfo)} /> */}
-              {/* </Form.Item> */}
-
-              {/* <Divider className={'staking-modal-divider'} /> */}
 
               {processState.steps && (
-                <div style={{ display: 'flex', alignItems: 'center', paddingBottom: token.paddingSM }}>
-                  {stepLoading
-                    ? (
-                      <ActivityIndicator
-                        prefixCls={'ant'}
-                        size={'24px'}
-                      />
-                    )
-                    : (
-                      <Typography.Text
-                        size={'lg'}
-                        style={{ fontWeight: '600' }}
-                      >
-                        {t('Step {{step}}: {{label}}', {
-                          replace: { step: processState.currentStep + 1, label: processState.steps[processState.currentStep]?.name }
-                        })}
-                      </Typography.Text>
-                    )}
-                </div>
+                <>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    {stepLoading
+                      ? (
+                        <ActivityIndicator
+                          prefixCls={'ant'}
+                          size={'24px'}
+                        />
+                      )
+                      : (
+                        <>
+                          {isWebUI && (
+                            <Typography.Text
+                              size={'lg'}
+                              style={{ fontWeight: '600' }}
+                            >
+                              {t('Step {{step}}: {{label}}', {
+                                replace: { step: processState.currentStep + 1, label: processState.steps[processState.currentStep]?.name }
+                              })}
+                            </Typography.Text>
+                          )}
+                          {
+                            !isWebUI && (
+                              <EarningProcessItem
+                                index={processState.currentStep}
+                                isSelected
+                                stepName={processState.steps[processState.currentStep]?.name}
+                                stepStatus={processState.stepResults[processState.currentStep]?.status}
+                              />
+                            )
+                          }
+                        </>
+                      )}
+                  </div>
+
+                  <Divider className={'staking-modal-divider'} />
+                </>
               )}
 
               <Form.Item
-                // className={CN({ hidden: !isAllAccount })}
                 name={'from'}
               >
                 <AccountSelector
@@ -799,6 +804,20 @@ const Earn = styled(Wrapper)<Props>(({ theme: { token } }: Props) => {
     '.ant-loading-icon': {
       display: 'flex',
       justifyContent: 'center'
+    },
+
+    '@media (max-width: 991px)': {
+      '.earning-wrapper': {
+        height: '100%'
+      },
+
+      '.transaction-content': {
+        paddingBottom: token.padding
+      },
+
+      '.__transaction-block': {
+        overflow: 'hidden'
+      }
     }
   };
 });

diff --git a/packages/extension-koni-ui/src/components/Earning/HorizontalEarningItem.tsx b/packages/extension-koni-ui/src/components/Earning/HorizontalEarningItem.tsx
@@ -151,7 +151,7 @@ const Component: React.FC<Props> = (props: Props) => {
       key: 'info',
       hidden: false,
       schema: 'secondary',
-      tooltip: t('FAQs')
+      tooltip: t('Earning information')
     });
 
     actionListByChain.forEach((item) => {

diff --git a/packages/extension-koni-ui/src/components/Modal/BaseModal.tsx b/packages/extension-koni-ui/src/components/Modal/BaseModal.tsx
@@ -35,7 +35,7 @@ export const BaseModal = styled(Component)<Props>(({ theme: { token } }: Props)
   return ({
     maxWidth: 404,
 
-    '.ant-sw-modal-content': {
+    '.ant-sw-modal-content.ant-sw-modal-content': {
       width: '100%'
     },
 

diff --git a/packages/extension-koni-ui/src/components/Modal/BaseSelectModal.tsx b/packages/extension-koni-ui/src/components/Modal/BaseSelectModal.tsx
@@ -37,7 +37,7 @@ export const BaseSelectModal = styled(Component)(({ theme: { token } }: ThemePro
   return ({
     maxWidth: 404,
 
-    '.ant-sw-modal-content': {
+    '.ant-sw-modal-content.ant-sw-modal-content': {
       width: '100%'
     },
 

diff --git a/packages/extension-koni-ui/src/components/Modal/Earning/EarningInfoModal.tsx b/packages/extension-koni-ui/src/components/Modal/Earning/EarningInfoModal.tsx
@@ -272,7 +272,6 @@ const Component: React.FC<Props> = (props: Props) => {
               value={totalApy}
               weight={600}
             />
-            &nbsp;{t('rewards')}
           </div>
           <div className='token-item-container'>
             {