more styling
This commit is contained in:
saml33
parent
37bf6ba578
commit
b1d892d0ae
|
|
@ -9,6 +9,7 @@ import useInterval from './shared/useInterval'
|
|||
import { Transition } from '@headlessui/react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import TermsOfUseModal from './modals/TermsOfUseModal'
|
||||
import SunburstBackground from './SunburstBackground'
|
||||
|
||||
export const sideBarAnimationDuration = 300
|
||||
const termsLastUpdated = 1679441610978
|
||||
|
|
@ -22,10 +23,11 @@ const Layout = ({ children }: { children: ReactNode }) => {
|
|||
|
||||
return (
|
||||
<main
|
||||
className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} ${themeData.fonts.mono.variable} font-sans bg-[#889FD3] bg-[url('/images/rays.svg')] bg-cover bg-fixed bg-center`}
|
||||
className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} ${themeData.fonts.mono.variable} font-sans bg-th-primary-2`}
|
||||
>
|
||||
<SunburstBackground className="text-th-primary-1" />
|
||||
<div className={`relative min-h-screen`}>
|
||||
<div className="from-th-primary-3 to-th-primary-2 border-th-primary-4 absolute bottom-0 h-44 w-full border-b-[20px] bg-gradient-to-b" />
|
||||
<div className="absolute bottom-0 h-44 w-full border-b-[20px] border-th-primary-4 bg-gradient-to-b from-th-primary-3 to-th-primary-2" />
|
||||
<div className="relative z-10">
|
||||
<TopBar />
|
||||
<div className="mx-auto max-w-3xl px-6 pb-12 md:pb-20 lg:px-12">
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ const NavTabs = <T extends Values>({
|
|||
<>
|
||||
{values.map((value, i) => (
|
||||
<button
|
||||
className={`mx-auto w-full border-y-2 border-r border-th-fgd-1 pb-2.5 pt-3.5 font-display first:rounded-l-lg first:border-l-2 last:rounded-r-lg last:border-r-2 ${
|
||||
className={`mx-auto w-full border-y-2 border-r border-th-fgd-1 py-3.5 font-bold first:rounded-l-lg first:border-l-2 last:rounded-r-lg last:border-r-2 ${
|
||||
activeValue === value
|
||||
? 'text-shadow inner-shadow-top-sm bg-th-primary-2 text-th-active'
|
||||
? 'inner-shadow-top-sm bg-th-active text-th-fgd-1'
|
||||
: 'inner-shadow-bottom-sm default-transition bg-th-bkg-1 text-th-fgd-1 md:hover:bg-th-bkg-2'
|
||||
}`}
|
||||
key={`${value}` + i}
|
||||
|
|
|
|||
|
|
@ -95,9 +95,7 @@ const Positions = ({
|
|||
<TokenLogo bank={bank} size={32} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="-mb-1 text-2xl">
|
||||
{formatTokenSymbol(bank.name)}
|
||||
</h3>
|
||||
<h3>{formatTokenSymbol(bank.name)}</h3>
|
||||
<span
|
||||
className={`text-sm ${
|
||||
balance ? 'text-th-fgd-1' : 'text-th-fgd-4'
|
||||
|
|
@ -116,14 +114,14 @@ const Positions = ({
|
|||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="mb-1 text-th-fgd-4">Position Size</p>
|
||||
<span className="text-xl font-bold">
|
||||
<span className="text-xl font-bold text-th-fgd-1">
|
||||
<FormatNumericValue value={balance} decimals={6} />{' '}
|
||||
{formatTokenSymbol(bank.name)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-th-fgd-4">Est. APY</p>
|
||||
<span className="text-xl font-bold">
|
||||
<span className="text-xl font-bold text-th-fgd-1">
|
||||
{loadingRates ? (
|
||||
<SheenLoader className="mt-1">
|
||||
<div className="h-6 w-16 bg-th-bkg-2" />
|
||||
|
|
@ -137,19 +135,19 @@ const Positions = ({
|
|||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-th-fgd-4">Leverage</p>
|
||||
<span className="text-xl font-bold">
|
||||
<span className="text-xl font-bold text-th-fgd-1">
|
||||
{balance ? '3x' : '0x'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-th-fgd-4">Earned</p>
|
||||
<span className="text-xl font-bold">
|
||||
<span className="text-xl font-bold text-th-fgd-1">
|
||||
{balance ? '3.321 SOL' : '0 SOL'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-th-fgd-4">Liquidation Price</p>
|
||||
<span className="whitespace-nowrap text-xl font-bold">
|
||||
<span className="whitespace-nowrap text-xl font-bold text-th-fgd-1">
|
||||
{balance ? '1.234' : '0'}{' '}
|
||||
{`${formatTokenSymbol(bank.name)}/SOL`}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const Stake = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-4 rounded-t-2xl border-2 border-b-0 border-th-fgd-1 bg-white">
|
||||
<div className="grid grid-cols-4 rounded-t-2xl border-2 border-b-0 border-th-fgd-1 bg-th-bkg-1">
|
||||
{STAKEABLE_TOKENS.map((token) => (
|
||||
<TokenButton
|
||||
key={token}
|
||||
|
|
@ -33,11 +33,8 @@ const Stake = () => {
|
|||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-12">
|
||||
{/* <div
|
||||
className={`order-2 col-span-12 rounded-b-2xl border border-th-fgd-1 bg-white text-th-fgd-1 md:order-2 md:col-span-7 md:rounded-br-none`}
|
||||
> */}
|
||||
<div
|
||||
className={`col-span-12 rounded-b-2xl border-2 border-t border-th-fgd-1 bg-white text-th-fgd-1`}
|
||||
className={`col-span-12 rounded-b-2xl border-2 border-t border-th-fgd-1 bg-th-bkg-1 text-th-fgd-1`}
|
||||
>
|
||||
<div className={`p-8 pt-6`}>
|
||||
<div className="pb-2">
|
||||
|
|
@ -63,10 +60,10 @@ const Stake = () => {
|
|||
</div>
|
||||
{activeFormTab === 'Add' ? (
|
||||
<div className="fixed bottom-8 left-8">
|
||||
<button className="raised-button text-shadow flex h-20 w-20 items-center justify-center rounded-full border border-th-button-hover p-3 text-center font-display text-base">
|
||||
<button className="raised-button text-shadow flex h-20 w-20 items-center justify-center rounded-full border border-th-button-hover p-3 text-center text-base font-extrabold">
|
||||
<div>
|
||||
<p className="text-th-active">Buy</p>
|
||||
<p className="-mt-1.5 text-th-active">
|
||||
<p className="text-white">Buy</p>
|
||||
<p className="-mt-1.5 text-white">
|
||||
{formatTokenSymbol(selectedToken)}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ import SheenLoader from './shared/SheenLoader'
|
|||
const set = mangoStore.getState().set
|
||||
|
||||
export const NUMBERFORMAT_CLASSES =
|
||||
'inner-shadow-top-sm w-full rounded-xl border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-mono text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-input-border-hover md:hover:focus-visible:border-th-fgd-4'
|
||||
'inner-shadow-top-sm w-full rounded-xl border border-th-bkg-3 bg-th-input-bkg p-3 pl-12 pr-4 text-left font-bold text-xl text-th-fgd-1 focus:outline-none focus-visible:border-th-fgd-4 md:hover:border-th-bkg-4 md:hover:focus-visible:border-th-fgd-4'
|
||||
|
||||
interface StakeFormProps {
|
||||
token: string
|
||||
|
|
@ -308,7 +308,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
<div className="mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label text="Leverage" />
|
||||
<p className="mb-2 font-mono text-th-fgd-1">{leverage}x</p>
|
||||
<p className="mb-2 font-bold text-th-fgd-1">{leverage}x</p>
|
||||
</div>
|
||||
<LeverageSlider
|
||||
leverageMax={3}
|
||||
|
|
@ -329,7 +329,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">Est. Net APY</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-mono text-lg text-th-success">
|
||||
<span className="text-lg font-bold text-th-success">
|
||||
{estimatedNetAPY >= 0
|
||||
? '+'
|
||||
: estimatedNetAPY === 0
|
||||
|
|
@ -354,7 +354,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
<p className="text-th-fgd-4">
|
||||
{formatTokenSymbol(selectedToken)} Leveraged APY
|
||||
</p>
|
||||
<span className="font-mono text-th-success">
|
||||
<span className="font-bold text-th-success">
|
||||
{leveragedAPY > 0.01 ? '+' : ''}
|
||||
<FormatNumericValue
|
||||
value={leveragedAPY}
|
||||
|
|
@ -368,7 +368,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
{formatTokenSymbol(selectedToken)} Deposit Rate
|
||||
</p>
|
||||
<span
|
||||
className={`font-mono ${
|
||||
className={`font-bold ${
|
||||
stakeBankDepositRate > 0.01
|
||||
? 'text-th-success'
|
||||
: 'text-th-bkg-4'
|
||||
|
|
@ -387,7 +387,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`${borrowBank.name} Borrow Rate`}</p>
|
||||
<span
|
||||
className={`font-mono ${
|
||||
className={`font-bold ${
|
||||
borrowBankBorrowRate > 0.01
|
||||
? 'text-th-error'
|
||||
: 'text-th-bkg-4'
|
||||
|
|
@ -404,7 +404,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`${borrowBank.name} Borrowed`}</p>
|
||||
<span
|
||||
className={`font-mono ${
|
||||
className={`font-bold ${
|
||||
amountToBorrow > 0.001
|
||||
? 'text-th-fgd-1'
|
||||
: 'text-th-bkg-4'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
const SunburstBackground = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<div className="fixed inset-0 flex w-[200%] -translate-x-1/4 items-center justify-center overflow-hidden">
|
||||
<svg
|
||||
className={`${className} rotate-bg`}
|
||||
height="3000"
|
||||
width="3000"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1333.3333 1333.3333"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="nonzero"
|
||||
d="M5000 5000C3821.48 6178.51 2154.82 7845.18 0 10000h769.23C2561.88 7978.64 3972.14 6311.97 5000 5000m0 0c-862.23 1426.3-2016.07 3092.97-3461.54 5000h769.23C3418.54 8186.5 4315.98 6519.83 5000 5000m0 0c-495.84 1591.2-1136.87 3257.87-1923.08 5000h769.23C4314.96 8306.04 4699.57 6639.37 5000 5000m0 0c-100.63 1663.63-228.84 3330.29-384.62 5000h769.24C5228.84 8330.29 5100.63 6663.63 5000 5000m0 0c300.43 1639.37 685.04 3306.04 1153.85 5000h769.23C6136.87 8257.87 5495.84 6591.2 5000 5000m0 0c684.02 1519.83 1581.46 3186.5 2692.3 5000h769.24C7016.07 8092.97 5862.23 6426.3 5000 5000m0 0c1027.86 1311.97 2438.13 2978.64 4230.77 5000H10000C7845.18 7845.18 6178.52 6178.51 5000 5000m0 0c1311.97 1027.86 2978.64 2438.12 5000 4230.77v-769.23C8092.97 7016.07 6426.3 5862.23 5000 5000m0 0c1519.83 684.02 3186.5 1581.46 5000 2692.31v-769.23C8257.87 6136.87 6591.2 5495.84 5000 5000m0 0c1639.37 300.43 3306.04 685.04 5000 1153.85v-769.23C8330.29 5228.84 6663.62 5100.63 5000 5000m0 0c1663.62-100.63 3330.29-228.84 5000-384.62v-769.23C8306.04 4314.96 6639.37 4699.57 5000 5000m0 0c1591.2-495.84 3257.87-1136.87 5000-1923.08V2307.7C8186.5 3418.54 6519.83 4315.98 5000 5000m0 0c1426.3-862.23 3092.97-2016.07 5000-3461.54V769.23C7978.64 2561.87 6311.97 3972.14 5000 5000m0 0L10000 0h-769.23C7438.13 2021.36 6027.86 3688.03 5000 5000m0 0C5862.23 3573.7 7016.07 1907.03 8461.54 0H7692.3C6581.46 1813.5 5684.02 3480.17 5000 5000m0 0C5495.84 3408.8 6136.87 1742.13 6923.08 0h-769.23C5685.04 1693.96 5300.43 3360.63 5000 5000m0 0c100.63-1663.62 228.84-3330.29 384.62-5000h-769.24c155.78 1669.71 283.99 3336.38 384.62 5000m0 0C4699.57 3360.63 4314.96 1693.96 3846.15 0h-769.23C3863.13 1742.13 4504.16 3408.8 5000 5000m0 0C4315.98 3480.17 3418.54 1813.5 2307.69 0h-769.23C2983.93 1907.03 4137.77 3573.7 5000 5000m0 0C3972.14 3688.03 2561.88 2021.36 769.23 0H0l5000 5000m0 0C3688.03 3972.14 2021.36 2561.87 0 769.23v769.23C1907.03 2983.93 3573.7 4137.77 5000 5000m0 0C3480.17 4315.98 1813.5 3418.54 0 2307.7v769.22C1742.13 3863.13 3408.8 4504.16 5000 5000m0 0C3360.63 4699.57 1693.96 4314.96 0 3846.15v769.23c1669.71 155.78 3336.38 283.99 5000 384.62m0 0C3336.38 5100.63 1669.71 5228.84 0 5384.62v769.23C1693.96 5685.04 3360.63 5300.43 5000 5000m0 0C3408.8 5495.84 1742.13 6136.87 0 6923.08v769.23C1813.5 6581.46 3480.17 5684.02 5000 5000m0 0C3573.7 5862.23 1907.03 7016.07 0 8461.54v769.23C2021.36 7438.12 3688.03 6027.86 5000 5000"
|
||||
transform="matrix(.1333333 0 0 -.1333333 0 1333.3333)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SunburstBackground
|
||||
|
|
@ -3,24 +3,22 @@ import Image from 'next/image'
|
|||
import { formatTokenSymbol } from 'utils/tokens'
|
||||
import SheenLoader from './shared/SheenLoader'
|
||||
|
||||
const TokenButton = (
|
||||
{
|
||||
handleTokenSelect,
|
||||
selectedToken,
|
||||
tokenName,
|
||||
}: {
|
||||
tokenName: string
|
||||
selectedToken: string
|
||||
handleTokenSelect: (v: string) => void
|
||||
},
|
||||
) => {
|
||||
const TokenButton = ({
|
||||
handleTokenSelect,
|
||||
selectedToken,
|
||||
tokenName,
|
||||
}: {
|
||||
tokenName: string
|
||||
selectedToken: string
|
||||
handleTokenSelect: (v: string) => void
|
||||
}) => {
|
||||
const { data: stakeRates, isLoading } = useStakeRates()
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`col-span-1 flex items-center justify-center border-r border-th-fgd-1 p-4 first:rounded-tl-[13px] last:rounded-tr-[13px] last:border-r-0 hover:cursor-pointer ${
|
||||
selectedToken === tokenName
|
||||
? 'inner-shadow-top bg-th-primary-2'
|
||||
? 'inner-shadow-top bg-th-active'
|
||||
: 'inner-shadow-bottom default-transition bg-th-bkg-1 md:hover:bg-th-bkg-2'
|
||||
}`}
|
||||
onClick={() => handleTokenSelect(tokenName)}
|
||||
|
|
@ -29,7 +27,7 @@ const TokenButton = (
|
|||
<div
|
||||
className={`flex h-12 w-12 items-center justify-center rounded-full border ${
|
||||
selectedToken === tokenName
|
||||
? 'inner-shadow-top-sm border-th-primary-1 bg-gradient-to-b from-th-primary-2 to-th-primary-3'
|
||||
? 'inner-shadow-top-sm border-th-bkg-1 bg-gradient-to-b from-th-active to-th-active-dark'
|
||||
: 'inner-shadow-bottom-sm border-th-bkg-2 bg-gradient-to-b from-th-bkg-1 to-th-bkg-2'
|
||||
}`}
|
||||
>
|
||||
|
|
@ -40,18 +38,12 @@ const TokenButton = (
|
|||
alt="Select a token"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className={`mt-1 font-display text-xl ${
|
||||
selectedToken === tokenName
|
||||
? 'text-shadow text-th-active'
|
||||
: 'text-th-fgd-1'
|
||||
}`}
|
||||
>
|
||||
<span className={`mt-1 text-lg font-bold text-th-fgd-1`}>
|
||||
{formatTokenSymbol(tokenName)}
|
||||
</span>
|
||||
<span
|
||||
className={`-mt-1 font-mono ${
|
||||
selectedToken === tokenName ? 'text-th-bkg-1' : 'text-th-fgd-4'
|
||||
className={`font-medium ${
|
||||
selectedToken === tokenName ? 'text-th-fgd-1' : 'text-th-fgd-4'
|
||||
}`}
|
||||
>
|
||||
{isLoading ? (
|
||||
|
|
@ -59,7 +51,7 @@ const TokenButton = (
|
|||
<div
|
||||
className={`h-5 w-10 ${
|
||||
selectedToken === tokenName
|
||||
? 'bg-th-primary-1'
|
||||
? 'bg-th-active-dark'
|
||||
: 'bg-th-bkg-2'
|
||||
}`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -24,52 +24,50 @@ const TopBar = () => {
|
|||
}, [copied])
|
||||
|
||||
return (
|
||||
<div className="mb-8 flex h-20 items-center justify-between pr-4">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<Link href="/" shallow={true}>
|
||||
<div className="mb-8 flex h-20 items-center justify-between px-6">
|
||||
<Link href="/" shallow={true}>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
className="relative top-6 h-auto w-[200px] flex-shrink-0 cursor-pointer"
|
||||
className="relative h-auto w-10 flex-shrink-0 cursor-pointer"
|
||||
src={themeData.logoPath}
|
||||
alt="logo"
|
||||
/>
|
||||
</Link>
|
||||
{!isOnline ? (
|
||||
<div className="absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full bg-th-down px-4 py-2 md:top-8">
|
||||
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-th-fgd-1" />
|
||||
<p className="ml-2 text-th-fgd-1">
|
||||
Your connection appears to be offline
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex space-x-6 pr-4">
|
||||
<NavLink active={pathname === '/'} path="/" text="Boost!" />
|
||||
<NavLink active={pathname === '/faqs'} path="/faqs" text="FAQs" />
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
{connected ? <ConnectedMenu /> : <ConnectWalletButton />}
|
||||
<span className="text-shadow ml-2 text-[27px] font-black text-white">
|
||||
Boost!
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center justify-end space-x-4">
|
||||
<div className="px-4">
|
||||
<NavLink active={pathname === '/faqs'} path="/faqs" text="FAQs" />
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
{connected ? <ConnectedMenu /> : <ConnectWalletButton />}
|
||||
</div>
|
||||
{!isOnline ? (
|
||||
<div className="bg-th-down absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full px-4 py-2 md:top-8">
|
||||
<ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-th-fgd-1" />
|
||||
<p className="ml-2 text-th-fgd-1">
|
||||
Your connection appears to be offline
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TopBar
|
||||
|
||||
const NavLink = ({
|
||||
active,
|
||||
path,
|
||||
text,
|
||||
}: {
|
||||
active: boolean
|
||||
path: string
|
||||
text: string
|
||||
}) => {
|
||||
const NavLink = (
|
||||
{ active, path, text }: { active: boolean; path: string; text: string },
|
||||
) => {
|
||||
return (
|
||||
<Link href={path} shallow={true}>
|
||||
<span
|
||||
className={`default-transition border-b-4 border-th-active font-display text-xl md:hover:text-th-active ${
|
||||
active ? 'text-th-active' : 'text-th-bkg-1'
|
||||
className={`default-transition border-b-2 text-base font-bold md:hover:text-th-active ${
|
||||
active
|
||||
? 'border-th-active text-th-active'
|
||||
: 'border-th-fgd-1 text-th-fgd-1'
|
||||
}`}
|
||||
>
|
||||
{text}
|
||||
|
|
|
|||
|
|
@ -285,7 +285,6 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
|
|
@ -305,7 +304,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">Staked Amount</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-mono text-lg text-th-fgd-1">
|
||||
<span className="text-lg font-bold text-th-fgd-1">
|
||||
<FormatNumericValue
|
||||
value={tokenMax.maxAmount}
|
||||
decimals={stakeBank.mintDecimals}
|
||||
|
|
@ -322,7 +321,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
<Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">Staked Amount</p>
|
||||
<span className="font-mono text-th-fgd-1">
|
||||
<span className="font-bold text-th-fgd-1">
|
||||
<BankAmountWithValue
|
||||
amount={tokenMax.maxAmount}
|
||||
bank={stakeBank}
|
||||
|
|
@ -333,7 +332,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
<p className="text-th-fgd-4">SOL borrowed</p>
|
||||
{solBank ? (
|
||||
<span
|
||||
className={`font-mono ${
|
||||
className={`font-bold ${
|
||||
solBorrowed > 0.001
|
||||
? 'text-th-fgd-1'
|
||||
: 'text-th-bkg-4'
|
||||
|
|
|
|||
|
|
@ -10,23 +10,21 @@ interface ButtonGroupProps<T extends Values> {
|
|||
names?: Array<string>
|
||||
}
|
||||
|
||||
const ButtonGroup = <T extends Values>(
|
||||
{
|
||||
activeValue,
|
||||
className,
|
||||
disabled,
|
||||
unit,
|
||||
values,
|
||||
onChange,
|
||||
names,
|
||||
}: ButtonGroupProps<T>,
|
||||
) => {
|
||||
const ButtonGroup = <T extends Values>({
|
||||
activeValue,
|
||||
className,
|
||||
disabled,
|
||||
unit,
|
||||
values,
|
||||
onChange,
|
||||
names,
|
||||
}: ButtonGroupProps<T>) => {
|
||||
return (
|
||||
<div className={`rounded-lg ${disabled ? 'opacity-50' : ''}`}>
|
||||
<div className="relative flex">
|
||||
{activeValue && values.includes(activeValue) ? (
|
||||
<div
|
||||
className={`absolute left-0 top-0 h-full transform bg-th-primary-2 ${
|
||||
className={`absolute left-0 top-0 h-full transform bg-th-active ${
|
||||
activeValue === values[0] ? 'rounded-l-[7px]' : ''
|
||||
} ${
|
||||
activeValue === values[values.length - 1] ? 'rounded-r-[7px]' : ''
|
||||
|
|
@ -43,13 +41,13 @@ const ButtonGroup = <T extends Values>(
|
|||
const activeIndex = values.findIndex((val) => val === activeValue)
|
||||
return (
|
||||
<button
|
||||
className={`${className} relative h-12 w-1/2 border-y border-r px-3 text-center text-sm font-normal focus-visible:bg-th-bkg-4 focus-visible:text-th-fgd-2 disabled:cursor-not-allowed
|
||||
className={`${className} relative h-12 w-1/2 border-y border-r px-3 text-center text-sm font-bold focus-visible:bg-th-bkg-4 focus-visible:text-th-fgd-2 disabled:cursor-not-allowed
|
||||
${v === values[0] ? 'rounded-l-lg border-l' : ''} ${
|
||||
v === values[values.length - 1] ? 'rounded-r-lg' : ''
|
||||
}
|
||||
${
|
||||
v === activeValue
|
||||
? `inner-shadow-top-sm border-l border-th-primary-3 text-th-active`
|
||||
? `inner-shadow-top-sm border-l border-th-active-dark text-th-fgd-1`
|
||||
: `transition-color inner-shadow-bottom-sm border-th-bkg-3 bg-th-bkg-1 text-th-fgd-2 duration-300 md:hover:bg-th-bkg-2 md:hover:text-th-fgd-1`
|
||||
}
|
||||
${
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const BankAmountWithValue = ({
|
|||
value?: number
|
||||
}) => {
|
||||
return (
|
||||
<p className={`font-mono text-th-fgd-1 ${stacked ? 'text-right' : ''}`}>
|
||||
<p className={`font-bold text-th-fgd-1 ${stacked ? 'text-right' : ''}`}>
|
||||
<>
|
||||
<FormatNumericValue
|
||||
value={amount}
|
||||
|
|
|
|||
|
|
@ -32,14 +32,14 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
|
|||
className={`rounded-xl ${
|
||||
secondary
|
||||
? 'border border-th-button focus-visible:border-th-fgd-4 md:hover:border-th-button-hover'
|
||||
: 'raised-button text-shadow text-2xl text-th-active focus-visible:border focus-visible:border-th-fgd-4'
|
||||
: 'raised-button text-shadow text-xl text-white focus-visible:border focus-visible:border-th-fgd-4'
|
||||
} ${
|
||||
size === 'medium'
|
||||
? 'h-10 px-4'
|
||||
: size === 'large'
|
||||
? 'h-14 px-8'
|
||||
: 'h-8 px-3'
|
||||
} font-display disabled:cursor-not-allowed disabled:opacity-80 ${className}`}
|
||||
} font-extrabold disabled:cursor-not-allowed disabled:opacity-80 ${className}`}
|
||||
type={type}
|
||||
{...props}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const MaxAmountButton = ({
|
|||
onClick={onClick}
|
||||
>
|
||||
<p className="mr-1 text-th-fgd-2">{label}:</p>
|
||||
<span className="font-mono">
|
||||
<span className="font-bold">
|
||||
<FormatNumericValue value={value} decimals={decimals} />
|
||||
</span>
|
||||
</LinkButton>
|
||||
|
|
|
|||
|
|
@ -9,20 +9,18 @@ interface TabUnderlineProps<T extends Values> {
|
|||
fillWidth?: boolean
|
||||
}
|
||||
|
||||
const TabUnderline = <T extends Values>(
|
||||
{
|
||||
activeValue,
|
||||
values,
|
||||
names,
|
||||
onChange,
|
||||
small,
|
||||
fillWidth = true,
|
||||
}: TabUnderlineProps<T>,
|
||||
) => {
|
||||
const TabUnderline = <T extends Values>({
|
||||
activeValue,
|
||||
values,
|
||||
names,
|
||||
onChange,
|
||||
small,
|
||||
fillWidth = true,
|
||||
}: TabUnderlineProps<T>) => {
|
||||
return (
|
||||
<div className={`relative mb-3 border-b border-th-bkg-4 pb-1`}>
|
||||
<div
|
||||
className={`inner-shadow-bottom-sm absolute bottom-[-1px] left-0 h-1.5 bg-th-primary-3`}
|
||||
className={`inner-shadow-bottom-sm absolute bottom-[-1px] left-0 h-1.5 bg-th-active`}
|
||||
style={{
|
||||
maxWidth: !fillWidth ? '176px' : '',
|
||||
transform: `translateX(${
|
||||
|
|
|
|||
|
|
@ -65,11 +65,11 @@ export default function ConnectWalletButton() {
|
|||
</div>
|
||||
)}
|
||||
<div className="text-left">
|
||||
<div className=" mb-1 flex font-display text-base leading-none text-th-fgd-1">
|
||||
<div className="text-sm font-bold text-th-fgd-1">
|
||||
{t('connect')}
|
||||
</div>
|
||||
|
||||
<div className="-mt-1 text-xxs font-normal leading-none text-th-fgd-3">
|
||||
<div className="text-xs font-normal leading-none text-th-fgd-3">
|
||||
{lastWalletName}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,11 +66,11 @@ const ConnectedMenu = () => {
|
|||
</div>
|
||||
)}
|
||||
{!loadProfileDetails && isDesktop ? (
|
||||
<div className="ml-2.5 mt-1.5 overflow-hidden text-left">
|
||||
<p className="text-xxs text-th-fgd-3">
|
||||
<div className="ml-2.5 overflow-hidden text-left">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{wallet?.adapter.name}
|
||||
</p>
|
||||
<p className="-mt-0.5 truncate pr-2 font-display text-base text-th-fgd-1">
|
||||
<p className="truncate pr-2 text-sm font-bold text-th-fgd-1">
|
||||
{publicKey ? abbreviateAddress(publicKey) : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -95,7 +95,7 @@ const ConnectedMenu = () => {
|
|||
<div className="pl-2 text-left">
|
||||
<span>{t('disconnect')}</span>
|
||||
{publicKey ? (
|
||||
<p className="font-mono text-xs text-th-fgd-4">
|
||||
<p className="text-xs font-medium text-th-fgd-4">
|
||||
{abbreviateAddress(publicKey)}
|
||||
</p>
|
||||
) : null}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 419 KiB After Width: | Height: | Size: 4.5 KiB |
|
|
@ -131,7 +131,7 @@ th {
|
|||
/* Base */
|
||||
|
||||
body {
|
||||
@apply font-body text-base font-normal leading-tight tracking-wide;
|
||||
@apply bg-th-primary-1 font-body text-base font-normal leading-tight tracking-wide text-th-fgd-1;
|
||||
/* -webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; */
|
||||
}
|
||||
|
|
@ -160,21 +160,21 @@ h1,
|
|||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@apply font-display text-th-fgd-1;
|
||||
@apply font-extrabold text-th-fgd-1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h2 {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-th-fgd-1;
|
||||
}
|
||||
|
|
@ -292,7 +292,7 @@ table p {
|
|||
}
|
||||
|
||||
#range-slider-gradient .range-slider__thumb[data-upper] {
|
||||
@apply border-th-primary-3 bg-th-primary-1 h-7 w-4 rounded-full border shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)];
|
||||
@apply h-7 w-4 rounded-full border border-th-primary-3 bg-th-primary-1 shadow-[inset_0_-3px_0px_rgba(0,0,0,0.15)];
|
||||
}
|
||||
|
||||
#range-slider-gradient .range-slider__range {
|
||||
|
|
@ -384,7 +384,7 @@ table p {
|
|||
}
|
||||
|
||||
.raised-button-primary {
|
||||
@apply bg-th-primary-1 relative transition-none;
|
||||
@apply relative bg-th-primary-1 transition-none;
|
||||
box-shadow: 0 4px var(--primary-3);
|
||||
}
|
||||
|
||||
|
|
@ -424,3 +424,16 @@ table p {
|
|||
.inner-shadow-bottom-xs {
|
||||
@apply shadow-[inset_0_-1px_0px_rgba(0,0,0,0.15)];
|
||||
}
|
||||
|
||||
@keyframes rotate-bg {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rotate-bg {
|
||||
animation: rotate-bg 720s linear infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ module.exports = {
|
|||
'light-theme': {
|
||||
active: {
|
||||
DEFAULT: '#ECEE8F',
|
||||
dark: '#CCCE7D',
|
||||
dark: '#E2E480',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: '#A0DDCC',
|
||||
|
|
@ -48,34 +48,34 @@ module.exports = {
|
|||
},
|
||||
'dark-theme': {
|
||||
active: {
|
||||
DEFAULT: 'hsl(45, 86%, 62%)',
|
||||
dark: 'hsl(45, 86%, 57%)',
|
||||
DEFAULT: '#E29997',
|
||||
dark: '#B57A79',
|
||||
},
|
||||
button: {
|
||||
DEFAULT: 'hsl(269, 0%, 38%)',
|
||||
hover: 'hsl(269, 0%, 33%)',
|
||||
DEFAULT: '#99ADD9',
|
||||
hover: '#7284AC',
|
||||
},
|
||||
input: {
|
||||
bkg: 'hsl(240, 6%, 5%)',
|
||||
bkg: '#352130',
|
||||
border: 'hsl(0, 0%, 32%)',
|
||||
borderDark: 'hsl(0, 0%, 22%)',
|
||||
},
|
||||
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
|
||||
error: 'hsl(0, 59%, 58%)',
|
||||
success: 'hsl(111, 47%, 43%)',
|
||||
warning: 'hsl(45, 86%, 62%)',
|
||||
'bkg-1': 'hsl(240, 6%, 7%)',
|
||||
'bkg-2': 'hsl(240, 6%, 12%)',
|
||||
'bkg-3': 'hsl(240, 6%, 17%)',
|
||||
'bkg-4': 'hsl(240, 6%, 22%)',
|
||||
'fgd-1': 'hsl(0, 0%, 82%)',
|
||||
'fgd-2': 'hsl(0, 0%, 72%)',
|
||||
'fgd-3': 'hsl(0, 0%, 62%)',
|
||||
'fgd-4': 'hsl(0, 0%, 52%)',
|
||||
'primary-1': '#99ADD9',
|
||||
'primary-2': '#889FD3',
|
||||
'primary-3': '#728DC8',
|
||||
'primary-4': '#627DB8',
|
||||
error: '#E29997',
|
||||
success: '#6AE8C5',
|
||||
warning: '#EAD59E',
|
||||
'bkg-1': '#21151E',
|
||||
'bkg-2': '#352130',
|
||||
'bkg-3': '#482D42',
|
||||
'bkg-4': '#5B3953',
|
||||
'fgd-1': 'hsl(0, 0%, 100%)',
|
||||
'fgd-2': 'hsl(0, 0%, 93%)',
|
||||
'fgd-3': 'hsl(0, 0%, 86%)',
|
||||
'fgd-4': 'hsl(0, 0%, 65%)',
|
||||
'primary-1': '#531D46',
|
||||
'primary-2': '#401736',
|
||||
'primary-3': '#311229',
|
||||
'primary-4': '#260D1F',
|
||||
},
|
||||
'th-bkg-1': 'var(--bkg-1)',
|
||||
'th-bkg-2': 'var(--bkg-2)',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Lalezar, Roboto, Roboto_Mono } from 'next/font/google'
|
||||
import { Lalezar, Nunito, Roboto, Roboto_Mono } from 'next/font/google'
|
||||
|
||||
export const lalezar = Lalezar({
|
||||
weight: '400',
|
||||
|
|
@ -12,6 +12,18 @@ export const robotoFlex = Roboto({
|
|||
variable: '--font-body',
|
||||
})
|
||||
|
||||
export const nunitoDisplay = Nunito({
|
||||
weight: '900',
|
||||
subsets: ['latin'],
|
||||
variable: '--font-display',
|
||||
})
|
||||
|
||||
export const nunito = Nunito({
|
||||
weight: ['400', '500', '700', '900'],
|
||||
subsets: ['latin'],
|
||||
variable: '--font-body',
|
||||
})
|
||||
|
||||
export const robotoMono = Roboto_Mono({
|
||||
subsets: ['latin'],
|
||||
variable: '--font-mono',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { ThemeData } from 'types'
|
||||
import { lalezar, robotoFlex, robotoMono } from './fonts'
|
||||
import { lalezar, nunito, nunitoDisplay, robotoFlex, robotoMono } from './fonts'
|
||||
|
||||
export const breakpoints = {
|
||||
sm: 640,
|
||||
|
|
@ -28,10 +28,10 @@ type Theme = {
|
|||
export const themeData: Theme = {
|
||||
default: {
|
||||
fonts: {
|
||||
body: robotoFlex,
|
||||
display: lalezar,
|
||||
body: nunito,
|
||||
display: nunitoDisplay,
|
||||
mono: robotoMono,
|
||||
},
|
||||
logoPath: '/logos/boost.png',
|
||||
logoPath: '/logos/boost.svg',
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue