Revert "fix: ui bugs" (#2309)

_raw/locales/en/messages.json

@@ -2110,7 +2110,7 @@
       "addKeyring404": "failed to addKeyring, keyring is undefined",
       "emptyAccount": "the current account is empty",
       "generateCacheAliasNames": "[GenerateCacheAliasNames]: need at least one address",
-      "invalidPrivateKey": "The private key is invalid",
+      "invalidPrivateKey": "the private key is invalid",
       "invalidJson": "the input file is invalid",
       "invalidMnemonic": "The seed phrase is invalid, please check!",
       "notFoundKeyringByAddress": "Can't find keyring by address",

src/ui/component/AccountSearchInput/index.less

@@ -61,11 +61,4 @@
   font-size: 13px;
   font-weight: 500;
   padding-bottom: 2px;
-}
-.account-search-input-wrapper {
-  .ant-input {
-    &:focus {
-      border: 1px solid var(--r-blue-default, #7084ff);
-    }
-  }
 }

src/ui/component/AuthenticationModal/index.tsx

@@ -11,7 +11,6 @@ import React, {
 import { useTranslation } from 'react-i18next';
 import { Popup, Checkbox, Field } from 'ui/component';
 import { WrappedComponentProps, wrapModalPromise } from '../Modal/WrapPromise';
-import './style.less';
 
 interface AuthenticationModalProps extends WrappedComponentProps {
   validationHandler?(password: string): Promise<void>;

src/ui/component/Popup/index.less

@@ -52,7 +52,7 @@
       border-radius: 0;
       &::placeholder {
         color: var(--r-neutral-foot, #6a7587);
-      }
+        }
     }
   }
   .popup-footer {

src/ui/component/TokenSelector/style.less

@@ -28,8 +28,11 @@
     width: 100%;
     padding: 0 16px;
     margin: 0 auto @token-selector-px;
+    .ant-input-affix-wrapper::before {
+      height: 16px;
+    }
     .ant-input-affix-wrapper-lg {
-      padding: 9.25px;
+      padding: 12px;
       border-radius: 6px;
       // border: 1px solid @color-border;
       // background-color: @color-bg;

src/ui/views/AddressBackup/Mnemonics.tsx

@@ -101,11 +101,11 @@ const AddressBackup = () => {
           {t('page.backupSeedPhrase.copySeedPhrase')}
         </div>
       </div>
-      <div className="footer pb-[20px]">
+      <div className="footer pb-[24px]">
         <Button
           type="primary"
-          className="w-full"
           size="large"
+          className="w-[200px]"
           onClick={() => history.goBack()}
         >
           {t('global.Done')}

src/ui/views/AddressBackup/style.less

@@ -4,7 +4,7 @@
   overflow: auto;
 
   header {
-    background-color: var(--r-blue-default, #7084ff);
+    background: linear-gradient(111.24deg, #8babff 9.66%, #8094ff 85.59%);
     text-align: center;
     padding: 18px 20px;
     font-weight: 500;
@@ -119,11 +119,7 @@
   }
 
   .footer {
-    width: 100%;
-    padding: 20px;
-    background-color: #FFF;
     text-align: center;
-    position: fixed;
-    left: 0; bottom: 0;
+    padding-bottom: 32px;
   }
 }

src/ui/views/CustomRPC/index.tsx

@@ -95,7 +95,7 @@ const Footer = styled.div`
   height: 76px;
   border-top: 0.5px solid var(--r-neutral-line, rgba(255, 255, 255, 0.1));
   background: var(--r-neutral-card-1, rgba(255, 255, 255, 0.06));
-  padding: 20px;
+  padding: 18px 20px;
   display: flex;
   justify-content: center;
 `;

src/ui/views/CustomTestnet/index.tsx

@@ -29,7 +29,7 @@ const Footer = styled.div`
   height: 76px;
   border-top: 0.5px solid var(--r-neutral-line, rgba(255, 255, 255, 0.1));
   background: var(--r-neutral-bg1, rgba(255, 255, 255, 0.06));
-  padding: 20px;
+  padding: 18px 20px;
   display: flex;
   justify-content: center;
 `;

src/ui/views/ImportCoboArgus/AddressInput.tsx

@@ -29,9 +29,6 @@ export const AddressInput: React.FC<Props> = ({
           'bg-r-neutral-card-1',
           {
             'border-rabby-neutral-line': !error,
-          },
-          'focus-within: border border-[#7084ff]',
-          {
             'border-red': error,
           }
         )}

src/ui/views/ImportCoboArgus/ChainItem.tsx

@@ -1,6 +1,8 @@
 // import { RcIconChecked, RcIconNotChecked } from '@/ui/assets';
+import RcIconChecked from './icons/checked.svg';
+import RcIconUnchecked from './icons/unchecked.svg';
+import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
 import { Chain } from '@debank/common';
-import { Checkbox } from 'ui/component';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -33,7 +35,11 @@ export const ChainItem: React.FC<Props> = ({ chain, checked, onChecked }) => {
         </span>
       </div>
       <div>
-        <Checkbox width="20px" height="20px" checked={checked} />
+        <ThemeIcon
+          className="w-20 h-20"
+          src={checked ? RcIconChecked : RcIconUnchecked}
+          // alt="checkbox"
+        />
       </div>
     </div>
   );

src/ui/views/ImportCoboArgus/ImportCoboArgus.tsx

@@ -134,7 +134,7 @@ export const ImportCoboArgus = () => {
       </div>
       <footer
         className={clsx(
-          'flex p-[20px]',
+          'flex py-[18px]',
           'absolute bottom-0 left-0 right-0',
           'border-t border-t-r-neutral-line',
           'bg-r-neutral-bg-1'
@@ -145,7 +145,7 @@ export const ImportCoboArgus = () => {
             (step === 'select-chain' && !selectedChain) ||
             (step === 'add-address' && !inputAddress)
           }
-          className="w-full h-[44px] m-auto"
+          className="w-[200px] h-[44px] m-auto"
           type="primary"
           onClick={hasImportError ? handleClose : handleNext}
           loading={isLoading}

src/ui/views/ImportGnosisAddress/index.tsx

@@ -163,7 +163,7 @@ const ImportGnosisAddress = () => {
         <Button
           type="primary"
           size="large"
-          className="w-full h-[42px]"
+          className="w-[152px] h-[42px]"
           disabled={loading || !!errorMessage || !chainList?.length}
           onClick={() =>
             handleNext(

src/ui/views/ImportGnosisAddress/style.less

@@ -13,13 +13,6 @@
     border: 1px solid #fff;
     border-radius: 100%;
   }
-  .rabby-container {
-    .ant-input  {
-      &:focus {
-        border-color: var(--r-blue-default, #7084ff);
-      }
-    }
-  }
 
   .ant-form-item-explain {
     display: none !important;

src/ui/views/PreferMetamaskDapps/index.tsx

@@ -93,7 +93,7 @@ export const PreferMetamaskDapps = () => {
         />
       )}
       <footer className="footer">
-        <Button size="large" block type="primary" onClick={handleAdd}>
+        <Button type="primary" onClick={handleAdd}>
           {t('page.preferMetamaskDapps.howToAdd')}
         </Button>
       </footer>

src/ui/views/PreferMetamaskDapps/style.less

@@ -79,7 +79,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 20px;
+    padding: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -89,6 +89,7 @@
     background: var(--r-neutral-card-1, rgba(255, 255, 255, 0.06));
 
     .ant-btn {
+      width: 172px;
       height: 44px;
       font-weight: 500;
       font-size: 15px;

src/ui/views/SendNFT/style.less

@@ -16,7 +16,7 @@
   }
 
   .footer {
-    padding: 20px 0;
+    padding: 16px 0 20px;
     margin-left: -20px;
     margin-right: -20px;
     width: 100vw;

src/ui/views/SendToken/components/ModalConfirmAllowTransfer.tsx

@@ -31,11 +31,6 @@ const FormInputItem = styled(Form.Item)`
   &.ant-form-item-has-error {
     margin-bottom: 0;
   }
-  .ant-input {
-    &:focus {
-      border-color: var(--r-blue-default, #7084ff);
-    }
-  }
 `;
 
 function ModalConfirmAllowTransfer({

src/ui/views/SendToken/style.less

@@ -341,7 +341,7 @@
   }
 
   .footer {
-    padding: 20px 0;
+    padding: 16px 0 20px;
     margin-left: -20px;
     margin-right: -20px;
     width: 100vw;

src/ui/views/Swap/Component/Main.tsx

@@ -43,12 +43,10 @@ const StyledInput = styled(Input)`
   }
 
   &.ant-input-affix-wrapper,
+  &:focus,
   &:active {
     border: 1px solid transparent;
   }
-  &:focus {
-    border: 1px solid #7084ff;
-  }
   &:hover {
     border-color: var(--r-blue-default, #7084ff) !important;
     box-shadow: none;

yarn.lock

@@ -8263,10 +8263,20 @@ camelize@^1.0.0:
   resolved "https://registry.npmmirror.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
   integrity sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==
 
-caniuse-lite@^1.0.30001196, caniuse-lite@^1.0.30001313, caniuse-lite@^1.0.30001541, caniuse-lite@^1.0.30001587:
-  version "1.0.30001627"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001627.tgz"
-  integrity sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==
+caniuse-lite@^1.0.30001196, caniuse-lite@^1.0.30001313:
+  version "1.0.30001313"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz#a380b079db91621e1b7120895874e2fd62ed2e2f"
+  integrity sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==
+
+caniuse-lite@^1.0.30001541:
+  version "1.0.30001559"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001559.tgz#95a982440d3d314c471db68d02664fb7536c5a30"
+  integrity sha512-cPiMKZgqgkg5LY3/ntGeLFUpi6tzddBNS58A4tnTgQw1zON7u2sZMU7SzOeVH4tj20++9ggL+V6FDOFMTaFFYA==
+
+caniuse-lite@^1.0.30001587:
+  version "1.0.30001609"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001609.tgz#fc34fad75c0c6d6d6303bdbceec2da8f203dabd6"
+  integrity sha512-JFPQs34lHKx1B5t1EpQpWH4c+29zIyn/haGsbpfq3suuV9v56enjFt23zqijxGTMwy1p/4H2tjnQMY+p1WoAyA==
 
 case@^1.6.3:
   version "1.6.3"