Fix remaining dashboard UI issues

src/containers/artist-dashboard-page/Tiles.module.css

@@ -123,7 +123,7 @@
 
 /* Explainer Tile */
 .explainerTile {
-  height: 520px;
+  min-height: 520px;
   background-color: var(--white);
   display: inline-flex;
   flex-direction: row;
@@ -155,6 +155,7 @@
   flex-direction: column;
   align-items: flex-start;
   padding: 32px 72px 0px 0px;
+  margin-bottom: 74px;
 }
 
 .whatIsAudio {

src/containers/artist-dashboard-page/Tiles.tsx

@@ -26,6 +26,8 @@ import {
 } from 'store/token-dashboard/slice'
 import TokenHoverTooltip from './components/TokenHoverTooltip'
 
+const DISCORD_URL = 'https://discord.com/invite/kZkT9ZK'
+
 const messages = {
   claimCTA: 'CLAIM $AUDIO',
   noClaim1: 'You earn $AUDIO by using Audius.',
@@ -146,7 +148,7 @@ export const ExplainerTile = ({ className }: { className?: string }) => {
   const featureChart = hasAudio ? featureChartLevel1 : featureChartLevel0
   const disabled = { [styles.disabled]: !hasAudio }
   const onClickVipDiscord = useCallback(() => {
-    alert('todo')
+    window.open(DISCORD_URL, '_blank')
   }, [])
   return (
     <Tile className={cn([styles.explainerTile, className])}>

src/containers/artist-dashboard-page/WalletModal.tsx

@@ -151,6 +151,10 @@ const ModalContent = ({
 
   if (!modalState || !account) return null
 
+  // @ts-ignore
+  // TODO: user models need to have wallets
+  const wallet = account.wallet as WalletAddress
+
   // This silly `ret` dance is to satisfy
   // TS's no-fallthrough rule...
   let ret: Nullable<JSX.Element> = null
@@ -172,9 +176,6 @@ const ModalContent = ({
       break
     }
     case 'RECEIVE': {
-      // @ts-ignore
-      // TODO: users need to have wallets...
-      const wallet = account.wallet
       ret = <ReceiveBody wallet={wallet} />
       break
     }
@@ -183,7 +184,11 @@ const ModalContent = ({
       switch (sendStage.stage) {
         case 'INPUT':
           ret = (
-            <SendInputBody currentBalance={balance} onSend={onInputSendData} />
+            <SendInputBody
+              currentBalance={balance}
+              onSend={onInputSendData}
+              wallet={wallet}
+            />
           )
           break
         case 'AWAITING_CONFIRMATION':

src/containers/artist-dashboard-page/components/SendInputBody.tsx

@@ -35,6 +35,7 @@ const messages = {
   amountMalformed: 'Amount must be a valid number',
   addressMalformed: 'Please enter a valid address',
   addressRequired: 'Address is required',
+  addressIsSelf: 'Address can not be your own',
   sendAmountLabel: 'Amount to SEND',
   destination: 'Destination Address'
 }
@@ -44,7 +45,7 @@ type BalanceError =
   | 'INSUFFICIENT_TRANSFER_AMOUNT'
   | 'EMPTY'
   | 'MALFORMED'
-type AddressError = 'MALFORMED' | 'EMPTY'
+type AddressError = 'MALFORMED' | 'EMPTY' | 'SEND_TO_SELF'
 
 const balanceErrorMap: { [B in BalanceError]: string } = {
   INSUFFICIENT_BALANCE: messages.insufficientBalance,
@@ -55,22 +56,28 @@ const balanceErrorMap: { [B in BalanceError]: string } = {
 
 const addressErrorMap: { [A in AddressError]: string } = {
   MALFORMED: messages.addressMalformed,
-  EMPTY: messages.addressRequired
+  EMPTY: messages.addressRequired,
+  SEND_TO_SELF: messages.addressIsSelf
 }
 
 type SendInputBodyProps = {
   currentBalance: BNWei
   onSend: (balance: BNWei, destinationAddress: WalletAddress) => void
+  wallet: WalletAddress
 }
 
 const isValidDestination = (wallet: WalletAddress) => {
   const libs = window.audiusLibs
   return libs.web3Manager.web3.utils.isAddress(wallet)
 }
 
-const validateWallet = (wallet: Nullable<string>): Nullable<AddressError> => {
+const validateWallet = (
+  wallet: Nullable<WalletAddress>,
+  ownWallet: WalletAddress
+): Nullable<AddressError> => {
   if (!wallet) return 'EMPTY'
   if (!isValidDestination(wallet)) return 'MALFORMED'
+  if (wallet.toLowerCase() === ownWallet.toLowerCase()) return 'SEND_TO_SELF'
   return null
 }
 
@@ -108,7 +115,11 @@ const parseAudioInputToWei = (audio: StringAudio): Nullable<BNWei> => {
   }
 }
 
-const SendInputBody = ({ currentBalance, onSend }: SendInputBodyProps) => {
+const SendInputBody = ({
+  currentBalance,
+  onSend,
+  wallet
+}: SendInputBodyProps) => {
   const [amountToSend, setAmountToSend] = useState<StringAudio>(
     '' as StringAudio
   )
@@ -129,7 +140,7 @@ const SendInputBody = ({ currentBalance, onSend }: SendInputBodyProps) => {
 
   const onClickSend = () => {
     const balanceError = validateSendAmount(amountToSend, currentBalance)
-    const walletError = validateWallet(destinationAddress)
+    const walletError = validateWallet(destinationAddress, wallet)
     setBalanceError(balanceError)
     setAddressError(walletError)
     if (balanceError || walletError) return

src/containers/nav/desktop/NavHeader.module.css

@@ -48,15 +48,15 @@ svg.logo path {
 }
 
 .dashboardIcon {
-  background-color: var(--accent-orange);
+  background-color: var(--accent-orange-light-1);
 }
 
 .dashboardIcon svg path {
-  fill: var(--white) !important;
+  fill: var(--static-white) !important;
 }
 
 .dashboardIcon:hover:not(:global(.active)) {
-  background-color: var(--accent-orange-light-1) !important;
+  background-color: var(--accent-orange) !important;
 }
 
 .headerIconWrapper:global(.active),