animation fix and minor ui updates

darwinia-network · Sep 14, 2022 · a4e7ee0 · a4e7ee0
1 parent dadb858
commit a4e7ee0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/src/components/ConnectWalletButton/index.js b/src/components/ConnectWalletButton/index.js
@@ -136,7 +136,7 @@ const ConnectWalletButton = () => {
                             <li key={index} className={styles.networkItem}>
                                 {
                                     connected && connected.index === index ? (
-                                        <span style={{padding: '4.55px 0', display: 'inline-block', fontWeight: 'bold'}}>
+                                        <span className={styles.connectedTo}>
                                                 Connected to {connected.chainName}: {ellipsisAddress(connected.account)}
                                             </span>
                                     ): (
@@ -157,7 +157,7 @@ const ConnectWalletButton = () => {
         <div>
             <Notification ref={notificationRef}/>
             <Dialog ref={dialogRef}
-                title={<h3 className={styles.chainSelectModalTitle}>Please select a network to connect</h3>}
+                title={<div className={styles.chainSelectModalTitle}>Please select a network to connect</div>}
                 body={dialogBody()}/>
             <button className={styles.connectWalletBtn} onClick={() => {
                 handleConnectToWallet()

diff --git a/src/components/ConnectWalletButton/styles.module.css b/src/components/ConnectWalletButton/styles.module.css
@@ -1,40 +1,42 @@
 .connectWalletBtn {
   outline: none;
-  border: 2px solid rgb(216,0,115);
-  border-radius: 20px;
-  padding: 4px 8px;
+  border: 1px solid rgb(216,0,115);
+  border-radius: 0.25rem;
+  padding: 6px 15px;
   background: transparent;
   color: rgb(216,0,115);
   margin-right: 10px;
-  font-weight: 700;
   font-size: medium;
 }
 .connectWalletBtn:hover {
   opacity: 0.7;
   cursor: pointer;
 }
 .chainSelectModalTitle {
-  font-weight: bold;
-  font-size: larger;
-  margin: 0;
+  font-weight: 400;
+  font-size: 19px;
 }
 .networkItem {
   margin: 10px 0;
 }
 .networkOption {
   padding: 8px 20px;
   display: inline-block;
-  border: 2px solid rgb(216,0,115);
-  border-radius: 20px;
+  border: 1px solid rgb(216,0,115);
+  border-radius: 0.25rem;
   min-width: 110px;
   text-align: center;
   background: transparent;
-  font-weight: bold;
+  font-size: 16px;
 }
 .networkOption:hover {
   opacity: 0.7;
   cursor: pointer;
 }
+.connectedTo {
+  padding: 4.55px 0;
+  display: inline-block;
+}
 
 @media (max-width: 996px) {
   .connectWalletBtn {

diff --git a/src/components/Notification/styles.module.css b/src/components/Notification/styles.module.css
@@ -38,17 +38,17 @@ html[data-theme='dark'] .wrapper {
 }
 .enterActive {
     transition: transform 200ms ease-in-out;
-    transform: translate3d(0, 0, 0);
+    transform: translate3d(1px, 0, 0);
 }
 .enterDone {
-    transform: translate3d(0, 0, 0);
+    transform: translate3d(0px, 0, 0);
 }
 .exit {
-    transform: translate3d(0, 0, 0);
+    transform: translate3d(1px, 0, 0);
 }
 .exitActive {
     transition: transform 200ms ease-in-out;
-    transform: translate3d(110%, 0, 0);
+    transform: translate3d(109%, 0, 0);
 }
 .exitDone {
     transform: translate3d(110%, 0, 0);