Merge pull request #216 from AElfProject/feature/fairy-vault-extension

fix: 🐛 dapp signout modal/drawer can't find

Author: hzz780

packages/react/src/Modals/WalletModal/index.css

@@ -5,15 +5,18 @@
 .web-login-connect-wallet-modal-dark .web-login-connect-modal-content,
 .web-login-connect-wallet-modal-dark .web-login-connect-modal-body {
   background: #151318;
-  border: 1px solid #414142;
+  border-radius: 8px;
+  border: none;
+  /*border: 1px solid #414142;*/
+  box-shadow: 0 0 0 0.5px #414142;
 }
 
 .web-login-page-close-wrap {
   display: flex;
   width: 100%;
   flex-direction: row-reverse;
   align-items: center;
-  padding-top: 4px 8px 0 16px;
+  /*padding-top: 4px 8px 0 16px;*/
 }
 .connect-wallet-close-inner {
   padding: 10px;

packages/react/src/Modals/WalletModal/index.tsx

@@ -73,7 +73,7 @@ export default function WalletModal() {
 
   return isMobile ? (
     <Drawer
-      // prefixCls="web-login-connect-modal"
+      prefixCls="web-login-connect-modal"
       closable={false}
       className={commonCls}
       placement="bottom"

packages/react/src/Modals/disconnectModal/index.css

@@ -1,8 +1,49 @@
+/* drawer */
+.web-login-disconnect-modal-content-wrapper {
+  position: absolute;
+  z-index: 1000;
+  max-width: 100vw;
+  transition: all 0.3s;
+  bottom: 0;
+  inset-inline: 0;
+  box-shadow: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.web-login-disconnect-modal-content-wrapper-hidden {
+  display: none;
+}
+/* drawer end */
+
+.web-login-disconnect-modal-wrap {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  overflow: auto;
+  outline: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.web-login-disconnect-modal-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+}
+
+.web-login-disconnect-modal-centered {
+  text-align: center;
+}
+
 .web-login-disconnect-wallet-modal-dark .web-login-disconnect-modal-content,
 .web-login-disconnect-wallet-modal-dark .web-login-disconnect-modal-body {
   background: #151318;
-
-  border: 1px solid #414142;
+  border-radius: 8px;
+  /*border: 1px solid #414142;*/
+  border: none;
+  box-shadow: 0 0 0 0.5px #414142;
 }
 
 .web-login-disconnect-wallet-modal .web-login-disconnect-modal-content,

packages/react/src/Modals/disconnectModal/index.tsx

@@ -87,7 +87,7 @@ export default function WalletDisconnectModal() {
       prefixCls="web-login-disconnect-modal"
       className={commonCls}
       placement="bottom"
-      height={'282px'}
+      height="auto"
       open={disconnectModal}
     >
       {inner}

packages/react/src/Modals/index.tsx

@@ -1,7 +1,7 @@
 import { ConfigProvider } from 'antd';
 import WalletDisconnectModal from './disconnectModal';
 import WalletModal from './WalletModal';
-import './antd.rewrite.css';
+// import './antd.rewrite.css';
 
 export default function Modals() {
   return (