Improve delegate modal (#162)

* Fix account page modal input styles

* Add disabled state to IconButton

* Update delegate modal copy, add clear input button

* Fix docs link

* Replace info lost in merge

components/Button.tsx

@@ -61,7 +61,8 @@ export const IconButton: FunctionComponent<ButtonProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`${className} bg-th-bkg-4 flex items-center justify-center rounded-full w-7 h-7 text-th-fgd-1 focus:outline-none hover:text-th-primary`}
+      className={`${className} bg-th-bkg-4 flex items-center justify-center rounded-full w-7 h-7 text-th-fgd-1 focus:outline-none hover:text-th-primary disabled:bg-th-bkg-4 
+      disabled:text-th-fgd-4 disabled:cursor-not-allowed disabled:hover:text-th-fgd-4`}
       {...props}
     >
       {children}

components/DelegateModal.tsx

@@ -1,8 +1,13 @@
 import { FunctionComponent, useState } from 'react'
 import useMangoStore from '../stores/useMangoStore'
-import { ExclamationCircleIcon } from '@heroicons/react/outline'
+import {
+  ExclamationCircleIcon,
+  XIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/outline'
 import Input, { Label } from './Input'
-import Button from './Button'
+import Tooltip from './Tooltip'
+import Button, { IconButton } from './Button'
 import Modal from './Modal'
 import { ElementTitle } from './styles'
 import { notify } from '../utils/notifications'
@@ -79,11 +84,30 @@ const DelegateModal: FunctionComponent<DelegateModalProps> = ({
   return (
     <Modal onClose={onClose} isOpen={isOpen}>
       <Modal.Header>
-        <ElementTitle noMarginBottom>
-          {t('delegate:delegate-your-account')}
-        </ElementTitle>
-        <p className="mt-1 text-center">{t('delegate:info')}</p>
+        <div className="flex items-center">
+          <ElementTitle noMarginBottom>
+            {t('delegate:delegate-your-account')}
+            <Tooltip
+              content={
+                <div>
+                  <a
+                    href="https://docs.mango.markets/mango/account-delegation"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {t('learn-more')}
+                  </a>
+                </div>
+              }
+            >
+              <InformationCircleIcon className="h-5 w-5 ml-2 text-th-primary" />
+            </Tooltip>
+          </ElementTitle>
+        </div>
       </Modal.Header>
+      <div className="flex items-center justify-center text-th-fgd-3 pb-4">
+        <p className="text-center">{t('delegate:info')}</p>
+      </div>
       <Label>{t('delegate:public-key')}</Label>
       <Input
         type="text"
@@ -91,6 +115,16 @@ const DelegateModal: FunctionComponent<DelegateModalProps> = ({
         value={keyBase58}
         onBlur={validateKeyInput}
         onChange={(e) => onChangeKeyInput(e.target.value)}
+        suffix={
+          <IconButton
+            disabled={!keyBase58.length}
+            onClick={() => {
+              onChangeKeyInput('')
+            }}
+          >
+            <XIcon className="h-4 w-4" />
+          </IconButton>
+        }
       />
       {invalidKeyMessage ? (
         <div className="flex items-center pt-1.5 text-th-red">

components/Input.tsx

@@ -47,7 +47,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
               ? 'bg-th-bkg-3 cursor-not-allowed hover:border-th-fgd-4 text-th-fgd-3'
               : ''
           }
-          ${prefix ? 'pl-7' : ''}`}
+          ${prefix ? 'pl-7' : ''}
+          ${suffix ? 'pr-11' : ''}`}
         disabled={disabled}
         ref={ref}
         {...props}

public/locales/en/delegate.json

@@ -2,7 +2,7 @@
     "set-delegate": "Set Delegate",
     "delegate-your-account": "Delegate Your Account",
     "delegated-account": "Delegated Account",
-    "info": "Grant control to another account to use Mango on your behalf.",
+    "info": "Grant control to another Solana account to use Mango on your behalf.",
     "public-key": "Delegate Public Key",
     "delegate-updated": "Delegate Updated",
     "set-error": "Could not set Delegate",

public/locales/es/delegate.json

@@ -2,7 +2,7 @@
     "set-delegate": "Set Delegate",
     "delegate-your-account": "Delegate Your Account",
     "delegated-account": "Delegated Account",
-    "info": "Grant control to another account to use Mango on your behalf.",
+    "info": "Grant control to another Solana account to use Mango on your behalf.",
     "public-key": "Delegate Public Key",
     "delegate-updated": "Delegate Updated",
     "set-error": "Could not set Delegate",

public/locales/zh/delegate.json

@@ -2,7 +2,7 @@
     "set-delegate": "Set Delegate",
     "delegate-your-account": "Delegate Your Account",
     "delegated-account": "Delegated Account",
-    "info": "Grant control to another account to use Mango on your behalf.",
+    "info": "Grant control to another Solana account to use Mango on your behalf.",
     "public-key": "Delegate Public Key",
     "delegate-updated": "Delegate Updated",
     "set-error": "Could not set Delegate",

public/locales/zh_tw/delegate.json

@@ -2,7 +2,7 @@
     "set-delegate": "Set Delegate",
     "delegate-your-account": "Delegate Your Account",
     "delegated-account": "Delegated Account",
-    "info": "Grant control to another account to use Mango on your behalf.",
+    "info": "Grant control to another Solana account to use Mango on your behalf.",
     "public-key": "Delegate Public Key",
     "delegate-updated": "Delegate Updated",
     "set-error": "Could not set Delegate",