From 8efbe74e51f99f4b4960b39cc10ebea107057f8a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 30 Jul 2020 10:39:22 +0200
Subject: [PATCH] wallet & menu affordance tweaks

---
 src/components/molecules/Menu.module.css           | 6 +++---
 src/components/molecules/Wallet/Account.module.css | 4 ++++
 src/components/molecules/Wallet/Account.tsx        | 6 ++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css
index 37c279a23..5b8ff2083 100644
--- a/src/components/molecules/Menu.module.css
+++ b/src/components/molecules/Menu.module.css
@@ -66,7 +66,7 @@
   padding: calc(var(--spacer) / 2);
   margin-left: var(--spacer);
   text-transform: uppercase;
-  color: var(--brand-grey);
+  color: var(--brand-grey-light);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-base);
   position: relative;
@@ -82,13 +82,13 @@
 .link:hover,
 .link:focus,
 .link:active {
-  color: var(--brand-pink);
+  color: var(--brand-grey);
 }
 
 .link[aria-current],
 .link[aria-current]:hover,
 .link[aria-current]:focus {
-  color: var(--brand-pink);
+  color: var(--brand-black);
 }
 
 .link:last-child {
diff --git a/src/components/molecules/Wallet/Account.module.css b/src/components/molecules/Wallet/Account.module.css
index 8952d5ed2..d8a4f57cd 100644
--- a/src/components/molecules/Wallet/Account.module.css
+++ b/src/components/molecules/Wallet/Account.module.css
@@ -21,6 +21,10 @@
   border-color: var(--brand-grey-light);
 }
 
+.button.initial {
+  color: var(--brand-pink);
+}
+
 .blockies {
   width: var(--font-size-large);
   height: var(--font-size-large);
diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx
index 57ab0cf0a..25db8c28a 100644
--- a/src/components/molecules/Wallet/Account.tsx
+++ b/src/components/molecules/Wallet/Account.tsx
@@ -27,6 +27,7 @@ const Account = React.forwardRef((props, ref: any) => {
   const hasSuccess = status === 1 && isCorrectNetwork(chainId)
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
+    // prevent accidentially submitting a form the button might be in
     e.preventDefault()
     await connectWallet(connect)
   }
@@ -36,6 +37,7 @@ const Account = React.forwardRef((props, ref: any) => {
       className={styles.button}
       aria-label="Account"
       ref={ref}
+      // prevent accidentially submitting a form the button might be in
       onClick={(e) => e.preventDefault()}
     >
       <Blockies account={accountId} />
@@ -49,13 +51,13 @@ const Account = React.forwardRef((props, ref: any) => {
     </button>
   ) : (
     <button
-      className={styles.button}
+      className={`${styles.button} ${styles.initial}`}
       onClick={(e) => handleActivation(e)}
       // Need the `ref` here although we do not want
       // the Tippy to show in this state.
       ref={ref}
     >
-      Activate Wallet
+      Connect Wallet
     </button>
   )
 })