Mp 2348 visual feedback on creating a credit account (#138)

* tidy: UI updates to the borrow tables

* feat: styled the toasts

* tidy: format

* fix: removed peer

* fix: fixed the svgs

* fix: stupid svgs

* rename: X to Cross

* tidy: wrap up the logic

public/images/sort-asc.svg

@@ -1 +0,0 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7.64031L15.5746 10.5L8.42539 10.5L12 7.64031Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round"></path><path d="M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z" fill="#FFFFFF" fill-opacity="0.2"></path></svg>

public/images/sort-desc.svg

@@ -1 +0,0 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z" fill="white" fill-opacity="0.2"></path><path d="M12 16.3597L8.42539 13.5L15.5746 13.5L12 16.3597Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-linejoin="round"></path></svg>

public/images/sort-none.svg

@@ -1 +0,0 @@
-<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z" fill="#FFFFFF" fill-opacity="0.2"></path><path d="M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z" fill="#FFFFFF" fill-opacity="0.2"></path></svg>

src/components/Account/AccountMenu.tsx

@@ -9,6 +9,7 @@ import {
   Account,
   Add,
   ArrowDownLine,
+  ArrowRight,
   ArrowsLeftRight,
   ArrowUpLine,
   Rubbish,
@@ -20,7 +21,7 @@ import useParams from 'hooks/useParams'
 import useStore from 'store'
 import { hardcodedFee } from 'utils/contants'
 
-export const AccountNavigation = () => {
+export default function AccountMenu() {
   const router = useRouter()
   const params = useParams()
   const selectedAccount = params.account
@@ -69,7 +70,7 @@ export const AccountNavigation = () => {
           >
             {hasCreditAccounts
               ? accountSelected
-                ? `Account ${selectedAccount}`
+                ? `Account #${selectedAccount}`
                 : 'Select Account'
               : 'Create Account'}
           </Button>
@@ -82,22 +83,21 @@ export const AccountNavigation = () => {
             setShow={setShowMenu}
           >
             <div className='absolute inset-0 z-1 h-full w-full bg-account' />
-            {!hasCreditAccounts && (
+            {(!hasCreditAccounts || createAccount) && (
               <div className='relative z-10 w-full p-4'>
-                <Text size='lg' className='font-bold'>
+                <Text size='lg' className='mb-2 font-bold'>
-                  Create Credit Account
+                  Create your first Credit Account
                 </Text>
                 <Text className='mb-4 text-white/70'>
-                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                  Please approve the transaction in your wallet in order to create your first Credit
-                  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                  Account.
-                  vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-                  no sea takimata sanctus est Lorem ipsum dolor sit amet.
                 </Text>
                 <Button
                   className='w-full'
                   showProgressIndicator={createAccount}
                   disabled={createAccount}
                   text='Create Account'
+                  rightIcon={<ArrowRight />}
                   onClick={createAccountHandler}
                 />
               </div>

src/components/Borrow/AssetExpanded.tsx

@@ -36,7 +36,7 @@ export default function AssetExpanded(props: AssetRowProps) {
   return (
     <tr
       key={props.row.id}
-      className='cursor-pointer'
+      className='cursor-pointer bg-black/20 transition-colors'
       onClick={(e) => {
         e.preventDefault()
         const isExpanded = props.row.getIsExpanded()

src/components/Borrow/AssetRow.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { flexRender, Row } from '@tanstack/react-table'
+import classNames from 'classnames'
 
 import { getMarketAssets } from 'utils/assets'
 
@@ -17,7 +17,10 @@ export const AssetRow = (props: AssetRowProps) => {
   return (
     <tr
       key={props.row.id}
-      className='cursor-pointer'
+      className={classNames(
+        'cursor-pointer transition-colors',
+        props.row.getIsExpanded() ? ' bg-black/20' : 'bg-white/0 hover:bg-white/5',
+      )}
       onClick={(e) => {
         e.preventDefault()
         const isExpanded = props.row.getIsExpanded()

src/components/Borrow/BorrowTable.tsx

@@ -13,14 +13,14 @@ import Image from 'next/image'
 import React from 'react'
 
 import AmountAndValue from 'components/AmountAndValue'
+import AssetExpanded from 'components/Borrow/AssetExpanded'
 import { AssetRow } from 'components/Borrow/AssetRow'
-import { ChevronDown, ChevronUp } from 'components/Icons'
+import { ChevronDown, SortAsc, SortDesc, SortNone } from 'components/Icons'
+import Loading from 'components/Loading'
 import { Text } from 'components/Text'
 import TitleAndSubCell from 'components/TitleAndSubCell'
 import { getMarketAssets } from 'utils/assets'
 import { formatPercent } from 'utils/formatters'
-import AssetExpanded from 'components/Borrow/AssetExpanded'
-import Loading from 'components/Loading'
 
 type Props = {
   data: BorrowAsset[] | BorrowAssetActive[]
@@ -43,7 +43,7 @@ export const BorrowTable = (props: Props) => {
           return (
             <div className='flex flex-1 items-center gap-3'>
               <Image src={asset.logo} alt='token' width={32} height={32} />
-              <TitleAndSubCell title={asset.symbol} sub={asset.name} />
+              <TitleAndSubCell title={asset.symbol} sub={asset.name} className='min-w-15' />
             </div>
           )
         },
@@ -101,7 +101,9 @@ export const BorrowTable = (props: Props) => {
         width: 150,
         cell: ({ row }) => (
           <div className='flex items-center justify-end'>
-            <div className='w-5'>{row.getIsExpanded() ? <ChevronUp /> : <ChevronDown />}</div>
+            <div className={classNames('w-4', row.getIsExpanded() && 'rotate-180')}>
+              <ChevronDown />
+            </div>
           </div>
         ),
       },
@@ -144,20 +146,20 @@ export const BorrowTable = (props: Props) => {
                       'align-center',
                     )}
                   >
+                    <span className='h-6 w-6 text-white'>
                       {header.column.getCanSort()
                         ? {
-                          asc: (
+                            asc: <SortAsc />,
-                            <Image src='/images/sort-asc.svg' alt='mars' width={24} height={24} />
+                            desc: <SortDesc />,
-                          ),
+                            false: <SortNone />,
-                          desc: (
-                            <Image src='/images/sort-desc.svg' alt='mars' width={24} height={24} />
-                          ),
-                          false: (
-                            <Image src='/images/sort-none.svg' alt='mars' width={24} height={24} />
-                          ),
                           }[header.column.getIsSorted() as string] ?? null
                         : null}
-                    <Text tag='span' size='sm' className='font-normal text-white/40'>
+                    </span>
+                    <Text
+                      tag='span'
+                      size='sm'
+                      className='flex items-center font-normal text-white/40'
+                    >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                     </Text>
                   </div>

src/components/Button.tsx

@@ -40,11 +40,11 @@ const focusClasses = {
 }
 
 const buttonBorderClasses =
-  'before:content-[" "] before:absolute before:inset-0 before:rounded-sm before:p-[1px] before:border-glas before:z-[-1]'
+  'before:content-[" "] before:absolute before:inset-0 before:rounded-sm before:p-[1px] before:border-glas before:-z-1'
 
 const buttonGradientClasses = [
-  'before:content-[" "] before:absolute before:inset-0 before:rounded-sm before:z-[-1] before:opacity-0',
+  'before:content-[" "] before:absolute before:inset-0 before:rounded-sm before:-z-1 before:opacity-0',
-  'before:gradient-secondary-to-primary before:transition-opacity before:duration-500 before:ease-in',
+  'before:gradient-secondary-to-primary before:transition-opacity before:ease-in',
   'hover:before:opacity-100',
 ]
 
@@ -153,7 +153,7 @@ export const Button = React.forwardRef(function Button(
       className={classNames(
         'relative z-1 flex items-center',
         'cursor-pointer appearance-none break-normal outline-none',
-        'text-white transition-all duration-500',
+        'text-white transition-all',
         enableAnimations && 'transition-color',
         buttonClasses,
         buttonVariantClasses[variant],

src/components/Icons/CheckCircled.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99998 8L6.99998 10L11 6M14.6666 8C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8C1.33331 4.3181 4.31808 1.33334 7.99998 1.33334C11.6819 1.33334 14.6666 4.3181 14.6666 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Icons/CrossCircled.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99998 6.00001L5.99998 10M5.99998 6.00001L9.99998 10M14.6666 8.00001C14.6666 11.6819 11.6819 14.6667 7.99998 14.6667C4.31808 14.6667 1.33331 11.6819 1.33331 8.00001C1.33331 4.31811 4.31808 1.33334 7.99998 1.33334C11.6819 1.33334 14.6666 4.31811 14.6666 8.00001Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Icons/SortAsc.svg

@@ -1,11 +1 @@
-<svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7.64031L15.5746 10.5L8.42539 10.5L12 7.64031Z" fill="currentColor" stroke="currentColor" stroke-linejoin="round"></path><path d="M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z" fill="currentColor" fill-opacity="0.2"></path></svg>
-  <path
-    d='M12 7.64031L15.5746 10.5L8.42539 10.5L12 7.64031Z'
-    stroke='currentColor'
-    strokeLinejoin='round'
-  />
-  <path
-    d='M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z'
-    fillOpacity='0.2'
-  />
-</svg>

src/components/Icons/SortDesc.svg

@@ -1,11 +1 @@
-<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z" fill="currentColor" fill-opacity="0.2"></path><path d="M12 16.3597L8.42539 13.5L15.5746 13.5L12 16.3597Z" fill="currentColor" stroke="currentColor" stroke-linejoin="round"></path></svg>
-  <path
-    d='M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z'
-    fillOpacity='0.2'
-  />
-  <path
-    d='M12 16.3597L8.42539 13.5L15.5746 13.5L12 16.3597Z'
-    stroke='currentColor'
-    strokeLinejoin='round'
-  />
-</svg>

src/components/Icons/SortNone.svg

@@ -1,11 +1 @@
-<svg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z" fill="currentColor" fill-opacity="0.2"></path><path d="M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z" fill="currentColor" fill-opacity="0.2"></path></svg>
-  <path
-    d='M12.3123 7.24988L15.887 10.1096C16.256 10.4048 16.0472 11 15.5746 11L8.42539 11C7.95275 11 7.74397 10.4048 8.11304 10.1096L11.6877 7.24988C11.8703 7.10379 12.1297 7.10379 12.3123 7.24988Z'
-    fillOpacity='0.2'
-  />
-  <path
-    d='M11.6877 16.7501L8.11304 13.8904C7.74397 13.5952 7.95275 13 8.42539 13H15.5746C16.0472 13 16.256 13.5952 15.887 13.8904L12.3123 16.7501C12.1297 16.8962 11.8703 16.8962 11.6877 16.7501Z'
-
-    fillOpacity='0.2'
-  />
-</svg>

src/components/Icons/index.ts

@@ -7,18 +7,20 @@ export { default as ArrowDownLine } from 'components/Icons/ArrowDownLine.svg'
 export { default as ArrowLeftLine } from 'components/Icons/ArrowLeftLine.svg'
 export { default as ArrowRight } from 'components/Icons/ArrowRight.svg'
 export { default as ArrowRightLine } from 'components/Icons/ArrowRightLine.svg'
-export { default as ArrowsLeftRight } from 'components/Icons/ArrowsLeftRight.svg'
-export { default as ArrowsUpDown } from 'components/Icons/ArrowsUpDown.svg'
 export { default as ArrowUp } from 'components/Icons/ArrowUp.svg'
 export { default as ArrowUpLine } from 'components/Icons/ArrowUpLine.svg'
+export { default as ArrowsLeftRight } from 'components/Icons/ArrowsLeftRight.svg'
+export { default as ArrowsUpDown } from 'components/Icons/ArrowsUpDown.svg'
 export { default as BurgerMenu } from 'components/Icons/BurgerMenu.svg'
 export { default as Check } from 'components/Icons/Check.svg'
+export { default as CheckCircled } from 'components/Icons/CheckCircled.svg'
 export { default as ChevronDown } from 'components/Icons/ChevronDown.svg'
 export { default as ChevronLeft } from 'components/Icons/ChevronLeft.svg'
 export { default as ChevronRight } from 'components/Icons/ChevronRight.svg'
 export { default as ChevronUp } from 'components/Icons/ChevronUp.svg'
-export { default as Close } from 'components/Icons/Close.svg'
 export { default as Copy } from 'components/Icons/Copy.svg'
+export { default as Cross } from 'components/Icons/Cross.svg'
+export { default as CrossCircled } from 'components/Icons/CrossCircled.svg'
 export { default as Deposit } from 'components/Icons/Deposit.svg'
 export { default as Discord } from 'components/Icons/Discord.svg'
 export { default as Edit } from 'components/Icons/Edit.svg'

src/components/Modal.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 
 import { Button } from 'components/Button'
 import Card from 'components/Card'
-import { Close } from 'components/Icons'
+import { Cross } from 'components/Icons'
 
 interface Props {
   header: string | ReactNode
@@ -34,7 +34,7 @@ export const Modal = (props: Props) => {
             {props.header}
             <Button
               onClick={onClickAway}
-              leftIcon={<Close />}
+              leftIcon={<Cross />}
               className='h-8 w-8'
               iconClassName='h-2 w-2'
               color='tertiary'

src/components/Navigation/DesktopNavigation.tsx

@@ -4,12 +4,11 @@ import classNames from 'classnames'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
-import { AccountNavigation } from 'components/Account/AccountNavigation'
+import AccountMenu from 'components/Account/AccountMenu'
 import { Logo } from 'components/Icons'
 import { NavLink } from 'components/Navigation/NavLink'
 import Settings from 'components/Settings'
 import Wallet from 'components/Wallet/Wallet'
-import { useAnimations } from 'hooks/useAnimations'
 import { getRoute } from 'utils/route'
 
 export const menuTree: { href: RouteSegment; label: string }[] = [
@@ -27,7 +26,7 @@ export default function DesktopNavigation() {
     <header
       className={classNames(
         'fixed top-0 left-0 z-30 hidden w-full',
-        'before:content-[" "] before:absolute before:inset-0 before:z-[-1] before:h-full before:w-full before:rounded-sm before:backdrop-blur-sticky',
+        'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:h-full before:w-full before:rounded-sm before:backdrop-blur-sticky',
         'lg:block',
       )}
     >
@@ -47,7 +46,7 @@ export default function DesktopNavigation() {
           </div>
         </div>
         <div className='flex gap-4'>
-          <AccountNavigation />
+          <AccountMenu />
           <Wallet />
           <Settings />
         </div>

src/components/Overlay/Overlay.tsx

@@ -19,7 +19,7 @@ export const Overlay = ({ children, content, className, show, setShow }: Props)
       <div
         className={classNames(
           'max-w-screen absolute z-50 rounded-sm shadow-overlay backdrop-blur-lg gradient-popover',
-          'before:content-[" "] before:absolute before:inset-0 before:z-[-1] before:rounded-sm before:p-[1px] before:border-glas',
+          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
           className,
         )}
       >

src/components/Toaster.tsx

@@ -1,35 +1,68 @@
 'use client'
 import { useRouter } from 'next/navigation'
 import { toast as createToast, Slide, ToastContainer } from 'react-toastify'
+import classNames from 'classnames'
 
-import { Check, Warning } from 'components/Icons'
+import { CheckCircled, Cross, CrossCircled } from 'components/Icons'
+import { Text } from 'components/Text'
 import useStore from 'store'
 
+import { Button } from './Button'
+
 export default function Toaster() {
   const enableAnimations = useStore((s) => s.enableAnimations)
   const toast = useStore((s) => s.toast)
   const router = useRouter()
 
   if (toast) {
-    if (toast.isError) {
+    const Msg = () => (
-      createToast.error(toast.message, {
+      <div
-        progressClassName: 'bg-loss',
+        className={classNames(
-        icon: (
+          'relative z-1 m-0 flex w-full flex-wrap rounded-sm p-6 shadow-overlay backdrop-blur-lg',
-          <span className='h-4 w-4'>
+          'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
-            <Warning />
+          toast.isError ? 'bg-error-bg/20' : 'bg-success-bg/20',
+        )}
+      >
+        <div className='mb-4 flex w-full gap-2'>
+          <div
+            className={classNames('rounded-sm p-1.5', toast.isError ? 'bg-error' : 'bg-success')}
+          >
+            <span className='block h-4 w-4 text-white'>
+              {toast.isError ? <CrossCircled /> : <CheckCircled />}
             </span>
-        ),
+          </div>
+          <Text
+            size='base'
+            className={classNames(
+              'flex items-center font-bold',
+              toast.isError ? 'text-error' : 'text-success',
+            )}
+          >
+            {toast.isError ? 'Error' : 'Success'}
+          </Text>
+        </div>
+
+        <Text size='sm' className='text-bold text-white'>
+          {toast.message}
+        </Text>
+        <div className='absolute top-8 right-6 '>
+          <Button
+            leftIcon={<Cross />}
+            variant='transparent'
+            className='w-2'
+            iconClassName={classNames('w-2 h-2', toast.isError ? 'text-error' : 'text-success')}
+          />
+        </div>
+      </div>
+    )
+
+    createToast(Msg, {
+      icon: false,
+      draggable: false,
+      closeOnClick: true,
+      progressClassName: classNames('h-[1px] bg-none', toast.isError ? 'bg-error' : 'bg-success'),
     })
-    } else {
+
-      createToast.success(toast.message, {
-        progressClassName: 'bg-profit',
-        icon: (
-          <span className='h-4 w-4'>
-            <Check />
-          </span>
-        ),
-      })
-    }
     useStore.setState({ toast: null })
     router.refresh()
   }
@@ -38,12 +71,12 @@ export default function Toaster() {
     <ToastContainer
       autoClose={5000}
       closeButton={false}
-      position='bottom-right'
+      position='top-right'
       newestOnTop
       transition={enableAnimations ? Slide : undefined}
-      className='w-[280px] p-0'
+      className='p-0'
-      toastClassName='z-50 text-xs rounded-sm border border-white/40 shadow-overlay backdrop-blur-sm gradient-popover px-2 py-4'
+      toastClassName='top-[73px] z-50 m-0 mb-4 flex w-full bg-transparent p-0'
-      bodyClassName='p-0 text-white m-0'
+      bodyClassName='p-0 m-0 w-full flex'
     />
   )
 }

src/components/Wallet/WalletConnectProvider.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react'
 
 import { Button } from 'components/Button'
 import { CircularProgress } from 'components/CircularProgress'
-import { Close } from 'components/Icons'
+import { Cross } from 'components/Icons'
 import { ENV, ENV_MISSING_MESSAGE } from 'constants/env'
 
 type Props = {
@@ -41,12 +41,12 @@ export const WalletConnectProvider: FC<Props> = ({ children }) => {
         modalCloseButton: 'inline-block',
         walletList: 'w-full',
         wallet:
-          'flex bg-transparent p-2 w-full rounded-sm cursor-pointer transition duration-500 ease-in mb-2 hover:bg-primary',
+          'flex bg-transparent p-2 w-full rounded-sm cursor-pointer transition ease-in mb-2 hover:bg-primary',
         walletImage: 'w-10 h-10',
         walletName: 'w-full text-lg',
         walletDescription: 'w-full text-xs text-white/60 break-all',
       }}
-      closeIcon={<Button leftIcon={<Close />} iconClassName='h-2 w-2' color='tertiary' />}
+      closeIcon={<Button leftIcon={<Cross />} iconClassName='h-2 w-2' color='tertiary' />}
       renderLoader={() => (
         <div>
           <CircularProgress size={30} />

tailwind.config.js

@@ -78,6 +78,8 @@ module.exports = {
         axlusdc: '#478edc',
         body: '#0D0012',
         'body-dark': '#141621',
+        error: '#F97066',
+        'error-bg': '#FDA29B',
         grey: '#3a3c49',
         'grey-dark': '#1a1c25',
         'grey-highlight': '#4c4c4c',
@@ -95,6 +97,8 @@ module.exports = {
         profit: '#41a4a9',
         primary: '#FF625E',
         secondary: '#FB9562',
+        success: '#32D583',
+        'success-bg': '#6CE9A6',
         'vote-against': '#eb9e49',
         warning: '#c83333',
         white: '#FFF',
@@ -106,7 +110,7 @@ module.exports = {
         '2xs': ['10px', '16px'],
         xs: ['12px', '16px'],
         sm: ['14px', '18px'],
-        base: ['15px', '20px'],
+        base: ['16px', '20px'],
         lg: ['17px', '24px'],
         xl: ['19px', '28px'],
         '2xl': ['21px', '32px'],
@@ -154,6 +158,9 @@ module.exports = {
       maxWidth: {
         content: '1024px',
       },
+      minWidth: {
+        15: '60px',
+      },
       screens: {
         sm: '480px',
         md: '720px',
@@ -169,6 +176,7 @@ module.exports = {
         120000: '120000ms',
         150000: '150000ms',
         180000: '180000ms',
+        DEFAULT: '500ms',
       },
       transitionProperty: {
         background: 'filter, -webkit-filter',
@@ -301,7 +309,7 @@ module.exports = {
             letterSpacing: theme('letterSpacing.wider'),
           },
           '.text-base-caps': {
-            fontSize: '15px',
+            fontSize: '16px',
             lineHeight: '20px',
             textTransform: 'uppercase',
             fontWeight: theme('fontWeight.semibold'),