wallet & menu affordance tweaks

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 {

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);

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>
   )
 })