copy and styling tweaks

components/CloseAccountModal.tsx

@@ -6,13 +6,15 @@ import {
   useState,
 } from 'react'
 import useMangoStore, { MNGO_INDEX } from '../stores/useMangoStore'
-import { XCircleIcon } from '@heroicons/react/outline'
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+} from '@heroicons/react/outline'
 import Button from './Button'
 import Modal from './Modal'
 import { ElementTitle } from './styles'
 import { notify } from '../utils/notifications'
 //import { useTranslation } from 'next-i18next'
-import { CheckCircleIcon } from '@heroicons/react/solid'
 import {
   getMultipleAccounts,
   nativeToUi,
@@ -128,59 +130,21 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
     }
   }
 
+  const isDisabled =
+    (openOrders && openOrders.length > 0) || hasBorrows || hasOpenPositions
+
   return (
     <Modal onClose={onClose} isOpen={isOpen && mangoAccount !== undefined}>
-      <Modal.Header>
-        <div className="flex items-center">
-          <ElementTitle noMarignBottom>Close your account</ElementTitle>
-        </div>
-      </Modal.Header>
-      <div className="text-th-fgd-2 text-center my-4">
-        You can close your Mango account and recover the small amount of SOL
-        used to cover rent exemption.
-      </div>
-      <div className="text-th-fgd-2 text-center my-4">
-        To close your account you must:
-      </div>
-
-      <div className="bg-th-bkg-4 overflow-none p-2 sm:p-6 rounded-lg">
-        <div className="flex items-center text-th-fgd-2 mb-4 ">
-          {!hasBorrows ? (
-            <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          ) : (
-            <XCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
-          )}{' '}
-          Close all borrows
-        </div>
-        <div className="flex items-center text-th-fgd-2 mb-4">
-          {!hasOpenPositions ? (
-            <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          ) : (
-            <XCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
-          )}{' '}
-          Close and settle all Perp positons
-        </div>
-        <div className="flex items-center text-th-fgd-2">
-          {openOrders && !openOrders.length ? (
-            <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          ) : (
-            <XCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
-          )}{' '}
-          Close all open orders
-        </div>
-      </div>
-
-      <div className="text-th-fgd-2 text-center my-4">
-        By closing your account you will:
-      </div>
-      <div className="bg-th-bkg-4 overflow-wrap p-2 sm:p-6 rounded-lg">
+      <ElementTitle noMarignBottom>Are you sure?</ElementTitle>
+      <p className="text-center mt-1">Closing your Mango Account will:</p>
+      <div className="bg-th-bkg-4 overflow-wrap p-2 sm:p-4 rounded-md space-y-2">
         <div className="flex items-center text-th-fgd-2">
           <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          Delete your Mango account
+          Delete your Mango Account
         </div>
         {mangoAccount &&
         mangoAccount.getAssetsVal(mangoGroup, mangoCache).gt(ZERO_I80F48) ? (
-          <div className="flex items-center text-th-fgd-2 mt-4">
+          <div className="flex items-center text-th-fgd-2">
             <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
             Withdraw assets worth{' '}
             {formatUsdValue(+mangoAccount.computeValue(mangoGroup, mangoCache))}
@@ -188,12 +152,12 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
         ) : (
           ''
         )}
-        <div className="flex items-center text-th-fgd-2 mt-4">
+        <div className="flex items-center text-th-fgd-2">
           <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
-          Recover {totalAccountSOL.toFixed(3)} SOL
+          Recover {totalAccountSOL.toFixed(3)} SOL (rent for your account)
         </div>
         {!mngoAccrued.isZero() ? (
-          <div className="flex items-center text-th-fgd-2 mt-4">
+          <div className="flex items-center text-th-fgd-2">
             <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
             Claim{' '}
             {mangoGroup
@@ -202,21 +166,44 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
                   mangoGroup.tokens[MNGO_INDEX].decimals
                 ).toFixed(3)
               : 0}{' '}
-            MNGO in unclaimed rewards
+            MNGO Rewards
           </div>
         ) : (
           ''
         )}
       </div>
-      <div className="text-th-fgd-2 text-center my-4">Goodbye 👋</div>
+      {isDisabled ? (
+        <>
+          <h3 className="text-center my-3">Before you can continue</h3>
+          <div className="bg-th-bkg-4 overflow-none p-2 sm:p-4 rounded-md space-y-2">
+            {hasBorrows ? (
+              <div className="flex items-center text-th-fgd-2">
+                <ExclamationCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
+                Close all borrows
+              </div>
+            ) : null}
+            {hasOpenPositions ? (
+              <div className="flex items-center text-th-fgd-2">
+                <ExclamationCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
+                Close and settle all perp positons
+              </div>
+            ) : null}
+            {openOrders && openOrders.length ? (
+              <div className="flex items-center text-th-fgd-2">
+                <ExclamationCircleIcon className="h-4 w-4 mr-1.5 text-th-red" />
+                Close all open orders
+              </div>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+      {!isDisabled ? (
+        <div className="text-th-fgd-2 text-center mt-4">Until next time 👋</div>
+      ) : null}
       <Button
         onClick={() => closeAccount()}
-        disabled={
-          (openOrders && openOrders.length > 0) ||
-          hasBorrows ||
-          hasOpenPositions
-        }
-        className="mt-1 w-full"
+        disabled={isDisabled}
+        className="mt-6 w-full"
       >
         Close Account
       </Button>

pages/account.tsx

@@ -20,7 +20,7 @@ import AccountInterest from '../components/account_page/AccountInterest'
 import AccountFunding from '../components/account_page/AccountFunding'
 import AccountPerformance from '../components/account_page/AccountPerformance'
 import AccountNameModal from '../components/AccountNameModal'
-import Button from '../components/Button'
+import Button, { IconButton } from '../components/Button'
 import EmptyState from '../components/EmptyState'
 import Loading from '../components/Loading'
 import Swipeable from '../components/mobile/Swipeable'
@@ -165,11 +165,14 @@ export default function Account() {
           {mangoAccount ? (
             <>
               <div className="pb-3 md:pb-0">
-                <h1
-                  className={`font-semibold mb-1 mr-3 text-th-fgd-1 text-2xl`}
-                >
-                  {mangoAccount?.name || t('account')}
-                </h1>
+                <div className="flex items-center mb-1">
+                  <h1 className={`font-semibold mr-3 text-th-fgd-1 text-2xl`}>
+                    {mangoAccount?.name || t('account')}
+                  </h1>
+                  <IconButton onClick={() => setShowNameModal(true)}>
+                    <PencilIcon className="h-4 w-4" />
+                  </IconButton>
+                </div>
                 <div className="flex items-center text-th-fgd-3 ">
                   <span className="text-xxs sm:text-xs">
                     {mangoAccount.publicKey.toString()}
@@ -187,16 +190,7 @@ export default function Account() {
                   {t('account-address-warning')}
                 </div>
               </div>
-              <div className="grid grid-cols-4 grid-rows-1 gap-2">
-                <Button
-                  className="col-span-1 flex items-center justify-center pt-0 pb-0 h-8 pl-3 pr-3 text-xs"
-                  onClick={() => setShowNameModal(true)}
-                >
-                  <div className="flex items-center">
-                    <PencilIcon className="h-4 w-4 mr-1.5" />
-                    {mangoAccount?.name ? t('edit-name') : t('add-name')}
-                  </div>
-                </Button>
+              <div className="grid grid-cols-3 grid-rows-1 gap-2">
                 <Button
                   className="col-span-1 flex items-center justify-center pt-0 pb-0 h-8 pl-3 pr-3 text-xs"
                   onClick={() => setShowCloseAccountModal(true)}

styles/index.css

@@ -74,6 +74,10 @@ h1 {
   @apply font-bold text-th-fgd-1 text-xl;
 }
 
+h3 {
+  @apply font-bold text-th-fgd-1 text-base;
+}
+
 p {
   @apply text-th-fgd-3 mb-2.5;
 }