[Issue 19] Resolve ui bug

Koniverse · Mar 13, 2024 · 814e1c0 · 814e1c0
1 parent 0f93ec4
commit 814e1c0
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 149 deletions.
diff --git a/packages/core/src/views/notify/NotificationContent.svelte b/packages/core/src/views/notify/NotificationContent.svelte
@@ -53,10 +53,7 @@
 
   .transaction-status {
     color: var(--notify-onboard-transaction-status, inherit);
-    line-height: var(
-      --notify-onboard-font-size-5,
-      var(--onboard-font-size-5, var(--font-size-5))
-    );
+    line-height: 24px;
     font-weight: 400;
     overflow: hidden;
     width: 200px;

diff --git a/packages/demo/src/components/account/AccountCardItem.tsx b/packages/demo/src/components/account/AccountCardItem.tsx
@@ -133,7 +133,11 @@ const AccountCardItem = styled(Component)<_AccountCardItem>(({ theme }) => {
     '.__item-icon-wallet': {
       width: 20,
       height: 20,
-      margin: '0 12px'
+      margin: '0 12px',
+
+      'svg': {
+        borderRadius: '40% !important'
+      }
     }
   };
 });

diff --git a/packages/demo/src/components/account/AccountList.tsx b/packages/demo/src/components/account/AccountList.tsx
@@ -19,6 +19,7 @@ import styled from "styled-components";
 import {useNavigate} from "react-router-dom";
 import {TRANSACTION_MODAL} from "../../constants/modal";
 import SwAvatar from "@subwallet/react-ui/es/sw-avatar";
+import {ScreenContext} from "../../context/ScreenContext";
 
 
 
@@ -38,6 +39,7 @@ type AccountMapType = {
 const modalId = TRANSACTION_MODAL;
 function Component ({className, substrateProvider, evmProvider}: Props): React.ReactElement {
   const [{ wallet},] = useConnectWallet();
+  const { isWebUI } = useContext(ScreenContext);
   const renderEmpty = useCallback(() => <GeneralEmptyList />, []);
   const [ accountsMap, setAccountMap ] = useState<AccountMapType[]>([])
   const navigate = useNavigate();
@@ -163,7 +165,9 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R
         accountsMap.length > 0 &&
         <>
             <SwList
-                className={CN('__account-list', className)}
+                className={CN('__account-list', className, {
+                  '-isWeb': isWebUI
+                })}
                 list={accountsMap}
                 renderWhenEmpty={renderEmpty}
                 renderItem={accountItem}
@@ -184,7 +188,11 @@ export const AccountList = styled(Component)<Props>( ({theme: {token}}) => {
 
       '&.__account-list': {
         position: 'relative',
-        width: '100%'
+        width: '100%',
+      },
+
+      '&.-isWeb': {
+        marginBottom: 200
       },
 
       '.__account-item': {

diff --git a/packages/demo/src/components/header/HeaderWalletInfo.tsx b/packages/demo/src/components/header/HeaderWalletInfo.tsx
@@ -85,8 +85,8 @@ export const HeaderWalletInfo = styled(Component)<Props>(({theme: {token}}) => {
       display: 'flex',
       justifyContent: 'space-between',
       width: '100%',
-      maxWidth: 1600,
-      padding: `${token.paddingMD + 4}px 0 `,
+      maxWidth: 1632,
+      padding: `${token.paddingMD + 4}px 16px `,
       position: 'fixed',
       marginTop: 80,
       backgroundColor: token.colorBgDefault,
@@ -110,6 +110,8 @@ export const HeaderWalletInfo = styled(Component)<Props>(({theme: {token}}) => {
 
     '&.-isMobile': {
       position: 'relative',
+      paddingLeft: 0,
+      paddingRight: 0,
       width: '100%',
       marginTop: 0
     },

diff --git a/packages/demo/src/components/layout/Layout.tsx b/packages/demo/src/components/layout/Layout.tsx
@@ -44,6 +44,7 @@ function Component ( { className } : Props): React.ReactElement<null> {
       })}>
         <Outlet />
       </div>
+      <WalletFooter />
     </div>
   </div>
   );
@@ -54,6 +55,7 @@ const Layout = styled(Component)<Props>( ({ theme: { extendToken, token} }: Them
     backgroundColor: token.colorBgDefault,
     position: 'relative',
     height: '100vh',
+    padding: '0 16px',
     '.__main-content': {
       height: '100%',
       margin: 'auto',
@@ -111,14 +113,10 @@ const Layout = styled(Component)<Props>( ({ theme: { extendToken, token} }: Them
 
     },
 
-    '@media(max-width : 1660px and min-width: 768px)' : {
-      '.__main-layout': {
-        padding: '0 16px'
-      }
-
-    },
 
     '&.-isMobile':{
+      padding: 0,
+
       '.__main-content.-isConnected': {
         padding: `0 ${token.padding}px`,
       },

diff --git a/packages/demo/src/components/layout/WalletFooter.tsx b/packages/demo/src/components/layout/WalletFooter.tsx
@@ -1,152 +1,35 @@
 import {Theme, ThemeProps} from "../../types";
-import { Button, Icon } from '@subwallet/react-ui';
-import { LightbulbFilament , Vault } from 'phosphor-react';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled, {useTheme} from 'styled-components';
-import {openInNewTab} from "../../utils/window";
-import {WEBSITE_URL} from "../../constants/common";
 import CN from "classnames";
 
 type Props = ThemeProps & {
-  visible : boolean
 };
 
-const contentOfFooter = {
-  title: 'Crowdloan unlock, then what?',
-  description: 'There\'re multiple ways you can play with your unlocked DOT, ' +
-    'such as native staking, liquid staking, or lending. ' +
-    'Check out SubWallet Dashboard for curated options with competitive APY to earn yield on your DOT.'
-}
 
-const Component: React.FC<Props> = ({ className, visible }: Props) => {
+const Component: React.FC<Props> = ({ className }: Props) => {
   const navigate = useNavigate();
   const { token } = useTheme() as Theme;
-  if(!visible){
-    return ( <></> )
-  }
   return (
     <div className={CN(className, '__wallet-footer')}>
-      <div className={'__note-box'}>
-        <div className={'__title-wrapper'}>
-          <Icon
-            className={'__token-icon'}
-            phosphorIcon={LightbulbFilament}
-            weight={'fill'}
-            iconColor={ token["gold-6"] }
-          />
 
-          <div className={'__title'}>
-            {contentOfFooter.title}
-          </div>
-        </div>
-
-        <div className={'__content'}>{contentOfFooter.description}</div>
-      </div>
-
-      <Button
-        className={'__footer-button'}
-        contentAlign={'left'}
-        icon={
-          <Icon
-            className='__footer-button-icon'
-            phosphorIcon={Vault}
-            size='md'
-            weight='fill'
-          />
-        }
-        onClick={openInNewTab(WEBSITE_URL)}
-      >
-        <div className={'__footer-button-content'}>
-          <div className={'__footer-button-title'}>{'Rewards: 14.8% - 18.5%'}</div>
-          <div className={'__footer-button-subtitle'}>{'Earn now'}</div>
-        </div>
-      </Button>
     </div>
   );
 };
 
 const WalletFooter = styled(Component)<Props>(({ theme: { token } }: Props) => {
   return {
-    borderTop: `2px solid ${token.colorBgDivider}`,
-    display: 'flex',
-    gap: token.size,
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
     alignItems: 'flex-end',
     paddingTop: token.sizeLG,
+    position: 'fixed',
     width: '100%',
-    height: 150,
+    bottom: 0,
+    height: '1vh',
     paddingBottom: token.paddingMD,
     background: token.colorBgDefault,
     opacity: 1,
-    marginBottom: 42,
-    zIndex: 10,
-    '.__note-box': {
-      maxWidth: 684,
-      flex: '1 0 300px'
-    },
-    '.__title-wrapper': {
-      display: 'flex',
-      alignItems: 'center',
-      marginBottom: token.marginXS
-    },
-    '.__token-icon': {
-      color: token.colorSuccess,
-      fontSize: 24,
-      width: 40,
-      height: 40,
-      justifyContent: 'center'
-    },
-    '.__title': {
-      fontSize: token.fontSizeLG,
-      lineHeight: token.lineHeightLG,
-      color: token.colorTextLight3
-    },
-    '.__content': {
-      fontSize: token.fontSize,
-      lineHeight: token.lineHeight,
-      color: token.colorTextLight4
-    },
-    '.__footer-button': {
-      height: 72,
-      flex: 1,
-      paddingRight: token.paddingSM,
-      paddingLeft: token.paddingSM,
-      gap: token.size,
-      maxWidth: 384
-    },
-    '.__footer-button-icon': {
-      width: 40,
-      height: 40,
-      justifyContent: 'center'
-    },
-    '.__footer-button-content': {
-      textAlign: 'left'
-    },
-    '.__footer-button-title': {
-      fontSize: token.fontSizeLG,
-      lineHeight: token.lineHeightLG,
-      color: token.colorTextLight1,
-      marginBottom: token.marginXXS
-    },
-    '.__footer-button-subtitle': {
-      fontSize: token.fontSize,
-      lineHeight: token.lineHeight,
-      color: token.colorTextLight3
-    },
-    '@media (max-width : 767px)': {
-      '.__footer-button': {
-        minWidth: '100%'
-      },
-
-      '.__buttons-block': {
-        '.ant-btn': {
-          minWidth: '100%'
-        }
-      }
-    },
-
+    zIndex: 1
   };
 });
 

diff --git a/packages/demo/src/components/layout/WalletHeader.tsx b/packages/demo/src/components/layout/WalletHeader.tsx
@@ -139,8 +139,8 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
     },
 
     '.wallet-header-content.-isConnected': {
-      maxWidth: 1600,
-      padding: '24px 0px',
+      maxWidth: 1632,
+      padding: '24px 16px',
       margin: 'auto',
 
       '.__header-title': {
@@ -193,7 +193,9 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
       '.wallet-header-content.-isConnected': {
         flexDirection: 'column',
         alignItems: 'flex-start',
-        gap: token.paddingSM
+        gap: token.paddingSM,
+        paddingLeft: 0,
+        paddingRight: 0
       },
 
       '.__header-action': {

diff --git a/packages/demo/src/components/logo/LogoWithSubIcon.tsx b/packages/demo/src/components/logo/LogoWithSubIcon.tsx
@@ -38,7 +38,10 @@ const LogoWithSubIcon = styled(Component)<Props>(({theme: {token}}) => {
       position: 'relative',
       width: '100%',
       height: '100%',
-      zIndex: 0
+      zIndex: 0,
+      'svg': {
+        borderRadius: '35% !important'
+      }
     },
 
     '.__wallet-logo-sub': {

diff --git a/packages/demo/src/components/sub_action/metadata/WalletMetadata.tsx b/packages/demo/src/components/sub_action/metadata/WalletMetadata.tsx
@@ -71,7 +71,7 @@ function Component({className}: Props): React.ReactElement {
               eventCode: 'dbUpdateSuccess',
               message: `Metadata updated successfully`,
               type: 'success',
-              autoDismiss: 0
+              autoDismiss: 1000
             })
             loadMetadata();
           })
@@ -81,12 +81,10 @@ function Component({className}: Props): React.ReactElement {
               eventCode: 'dbUpdateSuccess',
               message: `${(error as Error).message.includes('Rejected') ? 'Rejected by user' : 'Add Metadata Failed or Cancelled!' }`,
               type: 'error',
-              autoDismiss: 0
+              autoDismiss: 1000
             })
           });
-        setTimeout(()=>{
-          dismiss();
-        }, 1500)
+
       }
     },
     [loadMetadata, wallet?.metadata]

diff --git a/packages/demo/src/pages/EvmWalletInfo.tsx b/packages/demo/src/pages/EvmWalletInfo.tsx
@@ -84,7 +84,7 @@ function Component ({className}: Props): React.ReactElement {
           </div>
 
             <div className={'__evm-wallet-info-box'}>
-              {wallet?.label !== 'WalletConnect' &&
+              {wallet?.label !== 'WalletConnect' && wallet?.label !== 'Ledger' &&
                 <>
                   <div className={'__evm-wallet-info-label'}>Permission</div>
                   <Web3Block

diff --git a/packages/hw-common/src/elements/TableHeader.svelte b/packages/hw-common/src/elements/TableHeader.svelte
@@ -47,6 +47,7 @@
     color: var(--w3o-text-color, inherit);
     display: flex;
     justify-content: center;
+    width: 165px;
     align-items: center;
     cursor: pointer;
   }

diff --git a/packages/polkadotVault/src/views/ScanQRCode.svelte b/packages/polkadotVault/src/views/ScanQRCode.svelte
@@ -200,7 +200,7 @@
 
     .button-neutral-confirm, .button-neutral-solid {
         font-weight: 600;
-        padding: 16px;
+        padding: 16px 13px;
     }
 
     .action-footer{
@@ -209,6 +209,7 @@
         gap: 24px;
         align-items: center;
         width: 100%;
+        padding: 0 2px;
     }
 
     .cant-scan {