feat: connect button style

stratisproject · Feb 6, 2024 · a2d22e2 · a2d22e2
1 parent 644c7e2
commit a2d22e2
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 25 deletions.
diff --git a/src/components/SelectNetwork/index.tsx b/src/components/SelectNetwork/index.tsx
@@ -26,7 +26,7 @@ const SelectNetwork = () => {
           </>
         ) : 'Wrong network'}
       </div> */}
-      <a onClick={() => setShowOptions(true)} className="btn-sm text-slate-300 hover:text-white transition duration-150 ease-in-out w-full group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none">
+      <a onClick={() => setShowOptions(true)} className="btn-sm text-slate-300 bg-purple-400 hover:text-white transition duration-150 ease-in-out w-full group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none">
         <span className="relative inline-flex items-center flex gap-2">
           {activeNetwork ? (
             <>

diff --git a/src/components/SelectNetwork/styles.module.scss b/src/components/SelectNetwork/styles.module.scss
@@ -23,6 +23,7 @@
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: white;
+  color: #262626;
 }
 
 .option {

diff --git a/src/components/WalletModal/Option.tsx b/src/components/WalletModal/Option.tsx
@@ -1,29 +1,18 @@
 import { Connection, ConnectionType } from 'web3/connection'
 
-import cx from 'classnames'
-
-import styles from './styles.module.scss'
-
 interface Props {
   connection: Connection
   activate: () => void
   pendingConnectionType?: ConnectionType
 }
 
 const Option = ({ connection, activate, pendingConnectionType }: Props) => {
-  const isPending = connection.type === pendingConnectionType
-
   return (
-    <button
-      type="button"
-      className={cx(styles['wallet-button'], {[styles.disabled]: !isPending && !!pendingConnectionType}, 'btn col-5 text-center mt-3 py-3')}
-      onClick={!pendingConnectionType ? activate : undefined}
-    >
-      <img src={connection.getIcon?.()} />
-      <h3>
-        {connection.getName()}
-      </h3>
-      {isPending && 'Connecting'}
+    <button onClick={!pendingConnectionType ? activate : undefined} className="btn-sm text-slate-300 bg-purple-400 hover:text-white transition duration-150 ease-in-out w-full group [background:linear-gradient(theme(colors.slate.900),_theme(colors.slate.900))_padding-box,_conic-gradient(theme(colors.slate.400),_theme(colors.slate.700)_25%,_theme(colors.slate.700)_75%,_theme(colors.slate.400)_100%)_border-box] relative before:absolute before:inset-0 before:bg-slate-800/30 before:rounded-full before:pointer-events-none">
+      <span className="relative inline-flex items-center flex gap-2">
+        {connection.getName()} <span
+          className="tracking-normal text-purple-500 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
+      </span>
     </button>
   )
 }

diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx
@@ -101,7 +101,7 @@ const WalletModal = () => {
           Connect wallet
         </div>
         <div className={styles['wallets-grid']}>
-          {connections.filter(c => c.shouldDisplay()).map(connection => (
+          {connections.filter(c => c.shouldDisplay() && c.getName() === 'MetaMask').map(connection => (
             <Option
               key={connection.getName()}
               connection={connection}

diff --git a/src/components/WalletModal/styles.module.scss b/src/components/WalletModal/styles.module.scss
@@ -27,12 +27,12 @@
 .header {
   margin-bottom: 15px;
   font-size: 20px;
-  color: #000;
+  color: #ffffff;
 }
 
 .body {
-  padding: 10px;
-  background-color: white;
+  padding: 20px;
+  background-color: #581c87;
   border-radius: 8px;
 }
 
@@ -47,12 +47,12 @@
   display: flex;
   align-items: center;
   gap: 20px;
-  color: #000;
+  color: #ffffff;
 
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  outline: none;
+  border-radius: 30px;
+  border: 1px solid #2b012c;
   cursor: pointer;
+  background-color: #1a011a;
 
   h3 {
     font-weight: normal;