Styling alert dialog (#441)

* 🐛 text fix on fund for new account

* 🐛 make toggle account-wide lending on new-account

* 💅🏼Update styling of alertDialogs

src/components/Modals/Account/AccountDeleteAlertDialog.tsx

@@ -5,7 +5,7 @@ import useAlertDialog from 'hooks/useAlertDialog'
 
 interface Props {
   title: string
-  description: string
+  description: string | JSX.Element
   closeHandler: () => void
   positiveButton: AlertDialogButton
 }

src/components/Modals/Account/AccountDeleteModal.tsx

@@ -2,10 +2,8 @@ import { useCallback, useMemo, useState } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import AssetBalanceRow from 'components/AssetBalanceRow'
-import Button from 'components/Button'
 import { ArrowRight } from 'components/Icons'
-import Modal from 'components/Modal'
+import AccountDeleteAlertDialog from 'components/Modals/Account/AccountDeleteAlertDialog'
-import AccoundDeleteAlertDialog from 'components/Modals/Account/AccountDeleteAlertDialog'
 import Text from 'components/Text'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
@@ -56,7 +54,7 @@ function AccountDeleteModal(props: Props) {
 
   if (debts.length > 0)
     return (
-      <AccoundDeleteAlertDialog
+      <AccountDeleteAlertDialog
         title='Repay your Debts to delete your account'
         description='You must repay all borrowings before deleting your account.'
         closeHandler={closeDeleteAccountModal}
@@ -73,7 +71,7 @@ function AccountDeleteModal(props: Props) {
 
   if (vaults.length > 0)
     return (
-      <AccoundDeleteAlertDialog
+      <AccountDeleteAlertDialog
         title='Close your positions to delete your account'
         description='You must first close your farming positions before deleting your account.'
         closeHandler={closeDeleteAccountModal}
@@ -90,7 +88,7 @@ function AccountDeleteModal(props: Props) {
 
   if (depositsAndLends.length === 0)
     return (
-      <AccoundDeleteAlertDialog
+      <AccountDeleteAlertDialog
         title={`Delete Credit Account ${accountId}`}
         description='Deleting your credit account is irreversible.'
         closeHandler={closeDeleteAccountModal}
@@ -104,40 +102,31 @@ function AccountDeleteModal(props: Props) {
     )
 
   return (
-    <Modal
+    <AccountDeleteAlertDialog
-      onClose={closeDeleteAccountModal}
+      title={`Delete Credit Account ${accountId}`}
-      header={
+      description={
-        <span className='flex items-center'>
+        <>
-          <Text>{`Delete Credit Account ${modal.id}`}</Text>
+          <Text className='text-white/50' size='sm'>
-        </span>
+            The following assets within your credit account will be sent to your wallet.
-      }
+          </Text>
-      modalClassName='max-w-modal-sm'
+          <div className='flex flex-col w-full gap-4 py-4 overflow-y-scroll max-h-100 scrollbar-hide'>
-      headerClassName='gradient-header p-4 border-b-white/5 border-b'
+            {depositsAndLends.map((position, index) => {
-      contentClassName='w-full'
+              const coin = BNCoin.fromDenomAndBigNumber(position.denom, position.amount)
-    >
+              const asset = getAssetByDenom(position.denom)
-      <div className='w-full p-4 border-b border-white/5 gradient-header'>
-        <Text className='text-white/50' size='sm'>
-          The following assets within your credit account will be sent to your wallet.
-        </Text>
-      </div>
-      <div className='flex flex-col w-full gap-4 p-4 overflow-y-scroll max-h-100 scrollbar-hide'>
-        {depositsAndLends.map((position, index) => {
-          const coin = BNCoin.fromDenomAndBigNumber(position.denom, position.amount)
-          const asset = getAssetByDenom(position.denom)
 
-          if (!asset) return null
+              if (!asset) return null
-          return <AssetBalanceRow key={index} asset={asset} coin={coin} />
+              return <AssetBalanceRow key={index} asset={asset} coin={coin} />
-        })}
+            })}
-      </div>
+          </div>
-      <div className='w-full px-4 pb-4'>
+        </>
-        <Button
+      }
-          className='w-full'
+      closeHandler={closeDeleteAccountModal}
-          onClick={deleteAccountHandler}
+      positiveButton={{
-          text='Delete Account'
+        text: 'Delete Account',
-          rightIcon={<ArrowRight />}
+        icon: <ArrowRight />,
-          showProgressIndicator={isConfirming}
+        isAsync: true,
-        />
+        onClick: deleteAccountHandler,
-      </div>
+      }}
-    </Modal>
+    />
   )
 }

src/components/Modals/AlertDialog/index.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
 import classNames from 'classnames'
+import { useState } from 'react'
 
 import Button from 'components/Button'
 import { ExclamationMarkCircled } from 'components/Icons'
@@ -34,7 +34,7 @@ function AlertDialog(props: Props) {
   async function handleAsyncButtonClick(button?: AlertDialogButton) {
     if (!button?.onClick) return
     setIsConfirming(true)
-    await button.onClick()
+    button.onClick()
     setIsConfirming(false)
     props.close()
   }
@@ -60,7 +60,7 @@ function AlertDialog(props: Props) {
         {positiveButton && (
           <Button
             text={positiveButton.text ?? 'Yes'}
-            color='tertiary'
+            color='primary'
             className='px-6'
             rightIcon={positiveButton.icon ?? <YesIcon />}
             showProgressIndicator={isConfirming}