LaconicNetwork/mars-v2-frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Linkie Link 2023-03-26 10:08:21 +02:00 committed by GitHub
parent 69da882fa0
commit a680f1ffde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 130 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/images/sort-asc.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 460 B

1
public/images/sort-desc.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 461 B

1
public/images/sort-none.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 576 B

18
src/components/Account/AccountNavigation.tsx → src/components/Account/AccountMenu.tsx
View File

@ -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'>
Create Credit Account
<Text size='lg' className='mb-2 font-bold'>
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
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
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.
Please approve the transaction in your wallet in order to create your first Credit
Account.
</Text>
<Button
className='w-full'
showProgressIndicator={createAccount}
disabled={createAccount}
text='Create Account'
rightIcon={<ArrowRight />}
onClick={createAccountHandler}
/>
</div>

2
src/components/Borrow/AssetExpanded.tsx
View File

@ -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()

7
src/components/Borrow/AssetRow.tsx
View File

@ -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()

32
src/components/Borrow/BorrowTable.tsx
View File

@ -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: (
<Image src='/images/sort-asc.svg' alt='mars' width={24} height={24} />
),
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} />
),
asc: <SortAsc />,
desc: <SortDesc />,
false: <SortNone />,
}[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>

8
src/components/Button.tsx
View File

@ -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:gradient-secondary-to-primary before:transition-opacity before:duration-500 before:ease-in',
'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: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],

3
src/components/Icons/CheckCircled.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

0
src/components/Icons/Close.svg → src/components/Icons/Cross.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 178 B

After

Width:  |  Height:  |  Size: 178 B

3
src/components/Icons/CrossCircled.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

12
src/components/Icons/SortAsc.svg
View File

@ -1,11 +1 @@
<svg 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'
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>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 442 B

After

Width:  |  Height:  |  Size: 452 B

12
src/components/Icons/SortDesc.svg
View File

@ -1,11 +1 @@
<svg fill='currentColor' 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'
fillOpacity='0.2'
/>
<path
d='M12 16.3597L8.42539 13.5L15.5746 13.5L12 16.3597Z'
stroke='currentColor'
strokeLinejoin='round'
/>
</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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 443 B

After

Width:  |  Height:  |  Size: 455 B

12
src/components/Icons/SortNone.svg
View File

@ -1,11 +1 @@
<svg fill='currentColor' 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'
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>
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 547 B

After

Width:  |  Height:  |  Size: 563 B

8
src/components/Icons/index.ts
View File

@ -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'

4
src/components/Modal.tsx
View File

@ -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'

7
src/components/Navigation/DesktopNavigation.tsx
View File

@ -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>

2
src/components/Overlay/Overlay.tsx
View File

@ -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,
)}
>

77
src/components/Toaster.tsx
View File

@ -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) {
createToast.error(toast.message, {
progressClassName: 'bg-loss',
icon: (
<span className='h-4 w-4'>
<Warning />
const Msg = () => (
<div
className={classNames(
'relative z-1 m-0 flex w-full flex-wrap rounded-sm p-6 shadow-overlay backdrop-blur-lg',
'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
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'
toastClassName='z-50 text-xs rounded-sm border border-white/40 shadow-overlay backdrop-blur-sm gradient-popover px-2 py-4'
bodyClassName='p-0 text-white m-0'
className='p-0'
toastClassName='top-[73px] z-50 m-0 mb-4 flex w-full bg-transparent p-0'
bodyClassName='p-0 m-0 w-full flex'
/>
)
}

6
src/components/Wallet/WalletConnectProvider.tsx
View File

@ -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} />

12
tailwind.config.js
View File

@ -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'),