blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #33 from blockworks-foundation/improve-theme 

Improve theme
This commit is contained in:
tylersssss 2022-12-01 16:13:43 -05:00 committed by GitHub
parent 0757af2213 de2d4217fa
commit 6875791258
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 691 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/MangoAccountsList.tsx
View File

@ -53,7 +53,7 @@ const MangoAccountsList = ({
<Popover>
{({ open }) => (
<>
<Popover.Button className="flex w-full items-center rounded-none text-th-fgd-1 hover:text-th-primary">
<Popover.Button className="flex w-full items-center rounded-none text-th-fgd-1 hover:text-th-active">
<div className="mr-2">
<p className="text-right text-xs">{t('accounts')}</p>
<p className="text-left text-sm font-bold text-th-fgd-1">
@ -91,7 +91,7 @@ const MangoAccountsList = ({
{acc.name}
{acc.publicKey.toString() ===
mangoAccount?.publicKey.toString() ? (
<CheckCircleIcon className="h-5 w-5 text-th-green" />
<CheckCircleIcon className="h-5 w-5 text-th-up" />
) : null}
</button>
</div>

14
components/SideNav.tsx
View File

@ -202,8 +202,8 @@ const MenuItem = ({
<Link
href={pagePath}
shallow={true}
className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
active ? 'text-th-primary' : 'text-th-fgd-1'
className={`default-transition flex cursor-pointer px-4 focus:text-th-active focus:outline-none md:hover:text-th-active ${
active ? 'text-th-active' : 'text-th-fgd-1'
} ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
>
<div className="flex w-full items-center justify-between">
@ -288,7 +288,7 @@ export const ExpandableMenuItem = ({
role="button"
>
<Popover.Button
className="md:hover:text-th-primary"
className="md:hover:text-th-active"
onClick={() => toggleMenu()}
>
<div
@ -309,13 +309,15 @@ export const ExpandableMenuItem = ({
{showMenu ? (
<Popover.Panel
static
className={`absolute z-20 w-56 rounded-md rounded-l-none bg-th-bkg-2 py-2 ${
className={`absolute z-20 w-56 rounded-md rounded-l-none bg-th-bkg-1 ${
alignBottom
? 'bottom-0 left-[63px] rounded-b-none border-b-0 p-0'
: 'top-1/2 left-[63px] -translate-y-1/2'
}`}
>
{children}
<div className="rounded-md rounded-l-none bg-th-bkg-2 py-2">
{children}
</div>
</Popover.Panel>
) : null}
</div>
@ -330,7 +332,7 @@ export const ExpandableMenuItem = ({
}`}
>
<Disclosure.Button
className={`flex h-full w-full items-center justify-between rounded-none md:hover:text-th-primary`}
className={`flex h-full w-full items-center justify-between rounded-none md:hover:text-th-active`}
>
<div className="flex items-center">
<div

12
components/SolanaTps.tsx
View File

@ -47,19 +47,19 @@ const SolanaTps = () => {
<div
className={`absolute top-0.5 left-0.5 h-2 w-2 rounded-full ${
tps < tpsWarningThreshold
? 'bg-th-orange'
? 'bg-th-warning'
: tps < tpsAlertThreshold
? 'bg-th-red'
: 'bg-th-green'
? 'bg-th-error'
: 'bg-th-success'
}`}
/>
<div
className={`absolute h-3 w-3 rounded-full opacity-40 ${
tps < tpsWarningThreshold
? 'bg-th-orange'
? 'bg-th-warning'
: tps < tpsAlertThreshold
? 'bg-th-red'
: 'bg-th-green'
? 'bg-th-error'
: 'bg-th-success'
}`}
/>
</div>

8
components/TokenList.tsx
View File

@ -224,14 +224,14 @@ const TokenList = () => {
</Td>
<Td>
<div className="flex justify-end space-x-2">
<p className="text-th-green">
<p className="text-th-up">
{formatDecimal(bank.getDepositRateUi(), 2, {
fixed: true,
})}
%
</p>
<span className="text-th-fgd-4">|</span>
<p className="text-th-red">
<p className="text-th-down">
{formatDecimal(bank.getBorrowRateUi(), 2, {
fixed: true,
})}
@ -397,11 +397,11 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
<div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
<p className="space-x-2 font-mono">
<span className="text-th-green">
<span className="text-th-up">
{formatDecimal(bank.getDepositRate().toNumber(), 2)}%
</span>
<span className="font-normal text-th-fgd-4">|</span>
<span className="text-th-red">
<span className="text-th-down">
{formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
</span>
</p>

4
components/TopBar.tsx
View File

@ -79,7 +79,7 @@ const TopBar = () => {
) : null}
</span>
{!isOnline ? (
<div className="flex items-center rounded-full bg-th-red py-2 px-4">
<div className="flex items-center rounded-full bg-th-down py-2 px-4">
<ExclamationTriangleIcon className="h-5 w-5" />
<div className="ml-2">
Your network connection appears to be offline!
@ -111,7 +111,7 @@ const TopBar = () => {
<ConnectWalletButton />
) : (
<button
className="relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
className="from-mango-theme-yellow to-mango-theme-red-dark relative flex h-16 items-center justify-center rounded-none bg-gradient-to-bl px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
onClick={handleShowSetup}
>
<WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />

14
components/UserSetup.tsx
View File

@ -234,7 +234,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
style={{
width: `${(showSetupStep / 4) * 100}%`,
}}
className="flex bg-th-primary transition-all duration-700 ease-out"
className="flex bg-th-active transition-all duration-700 ease-out"
/>
</div>
<div className="absolute top-6 right-6 z-10">
@ -250,23 +250,23 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
<p className="mb-4 text-base">{t('onboarding:intro-desc')}</p>
<div className="mb-6 space-y-2 py-3">
<div className="flex items-center space-x-2">
<CheckCircleIcon className="h-5 w-5 text-th-green" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
<p className="text-base">{t('onboarding:bullet-1')}</p>
</div>
{/* <div className="flex items-center space-x-2">
<CheckCircleIcon className="h-5 w-5 text-th-green" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
<p className="text-base">Deeply liquid markets</p>
</div> */}
<div className="flex items-center space-x-2">
<CheckCircleIcon className="h-5 w-5 text-th-green" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
<p className="text-base">{t('onboarding:bullet-2')}</p>
</div>
<div className="flex items-center space-x-2">
<CheckCircleIcon className="h-5 w-5 text-th-green" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
<p className="text-base">{t('onboarding:bullet-3')}</p>
</div>
<div className="flex items-center space-x-2">
<CheckCircleIcon className="h-5 w-5 text-th-green" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
<p className="text-base">{t('onboarding:bullet-4')}</p>
</div>
</div>
@ -289,7 +289,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
<button
className={`col-span-1 w-full rounded-md border py-3 px-4 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
w.adapter.name === wallet?.adapter.name
? 'border-th-primary text-th-fgd-1 md:hover:border-th-primary'
? 'border-th-active text-th-fgd-1 md:hover:border-th-active'
: 'border-th-bkg-4 text-th-fgd-4'
}`}
onClick={() => {

4
components/account/AccountPage.tsx
View File

@ -278,8 +278,8 @@ const AccountPage = () => {
<SimpleAreaChart
color={
accountValueChange >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
data={performanceData.concat(latestAccountData)}
height={88}

4
components/account/ActionTokenItem.tsx
View File

@ -47,14 +47,14 @@ const ActionTokenItem = ({
</div>
{showDepositRates ? (
<div className="text-right font-mono">
<p className="text-th-green">
<p className="text-th-up">
{formatDecimal(bank.getDepositRate().toNumber(), 2)}%
</p>
</div>
) : null}
{showBorrowRates ? (
<div className="text-right font-mono">
<p className="text-th-red">
<p className="text-th-down">
{formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
</p>
</div>

2
components/account/ActivityFeed.tsx
View File

@ -225,7 +225,7 @@ const ActivityFilters = ({
<div
onClick={() => setShowMobileFilters(!showMobileFilters)}
role="button"
className={`default-transition w-full border-b border-th-bkg-3 bg-th-bkg-2 p-4 hover:bg-th-bkg-3 md:px-6`}
className={`default-transition w-full bg-th-bkg-2 p-4 hover:bg-th-bkg-3 md:px-6`}
>
<Disclosure.Button
className={`flex h-full w-full items-center justify-between rounded-none`}

6
components/account/ActivityFeedTable.tsx
View File

@ -218,7 +218,7 @@ const ActivityFeedTable = ({
</Td>
<Td
className={`text-right font-mono ${
value >= 0 ? 'text-th-green' : 'text-th-red'
value >= 0 ? 'text-th-up' : 'text-th-down'
}`}
>
{value > 0 ? '+' : ''}
@ -368,8 +368,8 @@ const MobileActivityFeedItem = ({
<span
className={`mr-1 font-body ${
activity.activity_details.taker_side === 'bid'
? 'text-th-green'
: 'text-th-red'
? 'text-th-up'
: 'text-th-down'
}`}
>
{activity.activity_details.taker_side === 'bid'

6
components/account/HealthHeart.tsx
View File

@ -17,10 +17,10 @@ const HealthHeart = ({
className={
health
? health > 15 && health < 50
? 'text-th-orange'
? 'text-th-warning'
: health >= 50
? 'text-th-green'
: 'text-th-red'
? 'text-th-success'
: 'text-th-error'
: 'text-th-fgd-4'
}
style={styles}

8
components/forms/ButtonGroup.tsx
View File

@ -22,11 +22,11 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
large,
}) => {
return (
<div className={`rounded-md bg-th-bkg-3 ${disabled ? 'opacity-50' : ''}`}>
<div className={`rounded-md bg-th-bkg-2 ${disabled ? 'opacity-50' : ''}`}>
<div className="relative flex">
{activeValue && values.includes(activeValue) ? (
<div
className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-4`}
className={`default-transition absolute left-0 top-0 h-full transform rounded-md bg-th-bkg-3`}
style={{
transform: `translateX(${
values.findIndex((v) => v === activeValue) * 100
@ -42,8 +42,8 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
} font-normal
${
v === activeValue
? `text-th-primary`
: `text-th-fgd-2 md:hover:text-th-primary`
? `text-th-active`
: `text-th-fgd-2 md:hover:text-th-active`
}
`}
disabled={disabled}

2
components/forms/Checkbox.tsx
View File

@ -39,7 +39,7 @@ const Checkbox = ({
/>
<div
className={`${
checked && !disabled && !halfState ? 'bg-th-primary' : 'bg-th-bkg-4'
checked && !disabled && !halfState ? 'bg-th-active' : 'bg-th-bkg-4'
} default-transition flex h-4 w-4 flex-shrink-0 cursor-pointer items-center justify-center rounded`}
>
{halfState ? (

4
components/forms/Input.tsx
View File

@ -43,7 +43,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
<input
className={`${className} default-transition h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
text-th-fgd-1 ${
error ? 'border-th-red' : 'border-th-bkg-4'
error ? 'border-th-down' : 'border-th-bkg-4'
} hover:border-th-fgd-4
focus:outline-none
${
@ -69,7 +69,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
{charLimit ? (
<p
className={`absolute -top-7 right-0 mt-1 flex justify-end text-xs ${
value.length === charLimit ? 'text-th-red' : 'text-th-fgd-4'
value.length === charLimit ? 'text-th-down' : 'text-th-fgd-4'
}`}
>
{`${value.length}/${charLimit}`}

8
components/forms/Select.tsx
View File

@ -27,10 +27,10 @@ const Select = ({
{({ open }) => (
<>
<Listbox.Button
className={`h-full w-full rounded-md bg-th-bkg-1 font-normal ring-1 ring-inset ring-th-fgd-4 hover:ring-th-fgd-3 focus:border-th-fgd-3 focus:outline-none`}
className={`default-transition h-full w-full rounded-md bg-th-bkg-1 py-2.5 font-normal ring-1 ring-inset ring-th-bkg-4 hover:ring-th-fgd-4 focus:border-th-fgd-3 focus:outline-none`}
>
<div
className={`flex h-12 items-center justify-between space-x-2 px-3 text-base text-th-fgd-1`}
className={`flex items-center justify-between space-x-2 px-3 text-th-fgd-1`}
>
{value ? (
value
@ -70,8 +70,8 @@ const Option = ({ value, children, className }: OptionProps) => {
<Listbox.Option className="mb-0" value={value}>
{({ selected }) => (
<div
className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-primary ${
selected ? 'text-th-primary' : ''
className={`default-transition rounded p-2 text-th-fgd-1 hover:cursor-pointer hover:bg-th-bkg-3 hover:text-th-active ${
selected ? 'text-th-active' : ''
} ${className}`}
>
{children}

2
components/forms/Switch.tsx
View File

@ -25,7 +25,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
<button
type="button"
className={`${
checked ? 'bg-th-primary' : 'bg-th-button'
checked ? 'bg-th-success' : 'bg-th-bkg-4'
} relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full
border-2 border-transparent transition-colors duration-200 ease-in-out
focus:outline-none ${disabled ? 'opacity-60' : ''}`}

6
components/icons/OrderbookIcon.tsx
View File

@ -9,10 +9,8 @@ const OrderbookIcon = ({
className?: string
}) => {
const { theme } = useTheme()
const oppositeSideColor =
theme === 'Light' ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.2)'
const buyColor = side === 'buy' ? COLORS.GREEN[theme] : oppositeSideColor
const sellColor = side === 'sell' ? COLORS.RED[theme] : oppositeSideColor
const buyColor = side === 'buy' ? COLORS.UP[theme] : COLORS.FGD4[theme]
const sellColor = side === 'sell' ? COLORS.DOWN[theme] : COLORS.FGD4[theme]
return (
<svg
className={`${className}`}

8
components/mobile/BottomBar.tsx
View File

@ -40,7 +40,7 @@ const BottomBar = () => {
pathname: '/',
}}
className={`${
asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
asPath === '/' ? 'text-th-active' : 'text-th-fgd-3'
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<HomeIcon className="mb-1 h-4 w-4" />
@ -52,7 +52,7 @@ const BottomBar = () => {
}}
shallow={true}
className={`${
asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
asPath === '/swap' ? 'text-th-active' : 'text-th-fgd-3'
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
@ -62,7 +62,7 @@ const BottomBar = () => {
href="/trade"
shallow={true}
className={`${
asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
asPath === '/trade' ? 'text-th-active' : 'text-th-fgd-3'
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<TradeIcon className="mb-1 h-4 w-4" />
@ -70,7 +70,7 @@ const BottomBar = () => {
</Link>
<a
className={`${
showPanel ? 'text-th-primary' : 'text-th-fgd-3'
showPanel ? 'text-th-active' : 'text-th-fgd-3'
} col-span-1 flex cursor-pointer flex-col items-center`}
onClick={() => setShowPanel(!showPanel)}
>

8
components/modals/MangoAccountsListModal.tsx
View File

@ -106,10 +106,10 @@ const MangoAccountsListModal = ({
className={`flex items-center ${
maintHealth
? maintHealth > 15 && maintHealth < 50
? 'text-th-orange'
? 'text-th-warning'
: maintHealth >= 50
? 'text-th-green'
: 'text-th-red'
? 'text-th-success'
: 'text-th-error'
: 'text-th-fgd-4'
}`}
>
@ -120,7 +120,7 @@ const MangoAccountsListModal = ({
</div>
{acc.publicKey.toString() ===
mangoAccount?.publicKey.toString() ? (
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-green">
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-th-success">
<CheckIcon className="h-4 w-4 text-th-bkg-1" />
</div>
) : (

4
components/profile/EditNftProfilePic.tsx
View File

@ -138,7 +138,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
<div className="mb-3 flex w-full flex-col items-center sm:mt-3 sm:flex-row sm:justify-between">
<button
onClick={onClose}
className={`absolute left-2 top-3 z-50 text-th-fgd-4 focus:outline-none md:hover:text-th-primary`}
className={`absolute left-2 top-3 z-50 text-th-fgd-4 focus:outline-none md:hover:text-th-active`}
>
<ArrowLeftIcon className={`h-5 w-5`} />
</button>
@ -161,7 +161,7 @@ const EditNftProfilePic = ({ onClose }: { onClose: () => void }) => {
<button
className={`default-transition col-span-1 flex items-center justify-center rounded-md border bg-th-bkg-2 py-3 sm:py-4 md:hover:bg-th-bkg-3 ${
selectedProfile === n.image
? 'border-th-primary'
? 'border-th-active'
: 'border-th-bkg-3'
}`}
key={n.image}

4
components/profile/EditProfileForm.tsx
View File

@ -158,8 +158,8 @@ const EditProfileForm = ({
/>
{inputError ? (
<div className="mt-1.5 flex items-center space-x-1">
<ExclamationCircleIcon className="h-4 w-4 text-th-red" />
<p className="mb-0 text-xs text-th-red">{inputError}</p>
<ExclamationCircleIcon className="h-4 w-4 text-th-down" />
<p className="mb-0 text-xs text-th-down">{inputError}</p>
</div>
) : null}
</div>

30
components/settings/DisplaySettings.tsx
View File

@ -1,4 +1,5 @@
import ButtonGroup from '@components/forms/ButtonGroup'
import Select from '@components/forms/Select'
import dayjs from 'dayjs'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { useTranslation } from 'next-i18next'
@ -41,7 +42,15 @@ const DisplaySettings = () => {
'Slider'
)
const themes = useMemo(() => {
return [t('settings:light'), t('settings:mango'), t('settings:dark')]
return [
t('settings:light'),
'Medium',
t('settings:dark'),
'Jungle',
t('settings:mango'),
'Ocean',
// 'Smoothy',
]
}, [t])
const handleLangChange = useCallback(
@ -58,12 +67,25 @@ const DisplaySettings = () => {
<h2 className="mb-4 text-base">{t('settings:display')}</h2>
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:theme')}</p>
<div className="w-full min-w-[220px] md:w-auto">
<ButtonGroup
<div className="w-full min-w-[140px] md:w-auto">
<Select
value={theme}
onChange={(t) => setTheme(t)}
className="w-full"
>
{themes.map((t) => (
<Select.Option key={t} value={t}>
<div className="flex w-full items-center justify-between">
{t}
</div>
</Select.Option>
))}
</Select>
{/* <ButtonGroup
activeValue={theme}
onChange={(t) => setTheme(t)}
values={themes}
/>
/> */}
</div>
</div>
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">

2
components/settings/PreferredExplorerSettings.tsx
View File

@ -37,7 +37,7 @@ const PreferredExplorerSettings = () => {
<p>{t(`settings:${ex.name}`)}</p>
</div>
{preferredExplorer.url === ex.url ? (
<CheckCircleIcon className="h-5 w-5 text-th-green" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
) : null}
</button>
))}

14
components/shared/Button.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from 'next-themes'
import { FunctionComponent, ReactNode } from 'react'
interface AllButtonProps {
@ -24,19 +23,14 @@ const Button: FunctionComponent<ButtonCombinedProps> = ({
size = 'medium',
...props
}) => {
const { theme } = useTheme()
return (
<button
onClick={onClick}
disabled={disabled}
className={`whitespace-nowrap rounded-md ${
secondary
? `border border-th-fgd-4 md:hover:border-th-bkg-4 ${
theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
}`
: `bg-th-button md:hover:bg-th-button-hover ${
theme === 'Light' ? 'text-th-bkg-1' : 'text-th-fgd-1'
}`
? 'border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4'
: 'bg-th-button text-white md:hover:bg-th-button-hover'
} ${
size === 'medium'
? 'h-10 px-4'
@ -78,7 +72,7 @@ export const IconButton: FunctionComponent<IconButtonCombinedProps> = ({
? 'h-8 w-8'
: 'h-10 w-10'
} default-transition items-center justify-center rounded-full ${
hideBg ? 'md:hover:text-th-primary' : 'bg-th-bkg-4 md:hover:bg-th-bkg-3'
hideBg ? 'md:hover:text-th-active' : 'bg-th-bkg-4 md:hover:bg-th-bkg-3'
} text-th-fgd-1 focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4
disabled:text-th-fgd-4 md:disabled:hover:text-th-fgd-4 ${className}`}
{...props}
@ -107,7 +101,7 @@ export const LinkButton: FunctionComponent<LinkButtonCombinedProps> = ({
onClick={onClick}
disabled={disabled}
className={`flex items-center border-0 font-bold ${
secondary ? 'text-th-primary' : 'text-th-fgd-2'
secondary ? 'text-th-active' : 'text-th-fgd-2'
} underline focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:hover:no-underline ${className}`}
{...props}
>

4
components/shared/Change.tsx
View File

@ -33,9 +33,9 @@ const Change = ({
size === 'small' ? 'text-xs' : 'text-sm'
} ${
change > 0
? 'text-th-green'
? 'text-th-up'
: change < 0
? 'text-th-red'
? 'text-th-down'
: 'text-th-fgd-4'
}`}
>

4
components/shared/ChartRangeButtons.tsx
View File

@ -34,8 +34,8 @@ const ChartRangeButtons: FunctionComponent<ChartRangeButtonsProps> = ({
className={`${className} default-transition relative h-6 w-1/2 cursor-pointer rounded-md px-3 text-center text-xs
${
v === activeValue
? `text-th-primary`
: `text-th-fgd-3 md:hover:text-th-primary`
? `text-th-active`
: `text-th-fgd-3 md:hover:text-th-active`
}
`}
key={`${v}${i}`}

2
components/shared/DailyRange.tsx
View File

@ -23,7 +23,7 @@ const DailyRange = ({ high, low, price }: DailyRangeProps) => {
style={{
width: `${rangePercent}%`,
}}
className="flex rounded-sm bg-th-primary"
className="flex rounded-sm bg-th-active"
></div>
</div>
<span className={`pl-2 font-mono text-th-fgd-2`}>

12
components/shared/DetailedAreaChart.tsx
View File

@ -212,8 +212,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
offset="0%"
stopColor={
calculateChartChange() >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0.15}
/>
@ -221,8 +221,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
offset="99%"
stopColor={
calculateChartChange() >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0}
/>
@ -234,8 +234,8 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
dataKey={yKey}
stroke={
calculateChartChange() >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
strokeWidth={1.5}
fill="url(#gradientArea)"

4
components/shared/DirectionTriangles.tsx
View File

@ -4,7 +4,7 @@ export const UpTriangle = ({ size }: { size?: 'small' }) => (
size === 'small'
? 'border-l-[4px] border-r-[4px] border-b-[6.92px]'
: 'border-l-[6px] border-r-[6px] border-b-[10.39px]'
} border-l-transparent border-r-transparent border-b-th-green`}
} border-b-th-up border-l-transparent border-r-transparent`}
/>
)
@ -14,6 +14,6 @@ export const DownTriangle = ({ size }: { size?: 'small' }) => (
size === 'small'
? 'border-l-[4px] border-r-[4px] border-t-[6.92px]'
: 'border-l-[6px] border-r-[6px] border-t-[10.39px]'
} border-l-transparent border-r-transparent border-t-th-red`}
} border-l-transparent border-r-transparent border-t-th-down`}
/>
)

4
components/shared/FavoriteMarketButton.tsx
View File

@ -27,14 +27,14 @@ const FavoriteMarketButton = ({
(marketName: string) => marketName === market.name
) ? (
<button
className="default-transition flex items-center justify-center text-th-primary md:hover:text-th-fgd-3"
className="default-transition flex items-center justify-center text-th-active md:hover:text-th-fgd-3"
onClick={() => removeFromFavorites(market.name)}
>
<FilledStarIcon className="h-5 w-5" />
</button>
) : (
<button
className="default-transition flex items-center justify-center text-th-fgd-4 md:hover:text-th-primary"
className="default-transition flex items-center justify-center text-th-fgd-4 md:hover:text-th-active"
onClick={() => addToFavorites(market.name)}
>
<StarIcon className="h-5 w-5" />

10
components/shared/HealthImpact.tsx
View File

@ -43,10 +43,10 @@ const HealthImpact = ({
<p
className={`${
maintProjectedHealth < 50 && maintProjectedHealth > 15
? 'text-th-orange'
? 'text-th-warning'
: maintProjectedHealth <= 15
? 'text-th-red'
: 'text-th-green'
? 'text-th-down'
: 'text-th-up'
} ${responsive ? 'text-xs lg:text-sm' : ''}`}
>
{maintProjectedHealth}%
@ -54,8 +54,8 @@ const HealthImpact = ({
<span
className={`text-xs ${
maintProjectedHealth >= currentMaintHealth!
? 'text-th-green'
: 'text-th-red'
? 'text-th-up'
: 'text-th-down'
}`}
>
({maintProjectedHealth >= currentMaintHealth! ? '+' : ''}

6
components/shared/IconDropMenu.tsx
View File

@ -1,6 +1,5 @@
import { Popover, Transition } from '@headlessui/react'
import { XMarkIcon } from '@heroicons/react/20/solid'
import { useTheme } from 'next-themes'
import { Fragment, ReactNode } from 'react'
const IconDropMenu = ({
@ -34,7 +33,6 @@ const IconDropMenu = ({
rightBottom: size === 'large' ? 'left-14 bottom-0' : 'left-12 bottom-0',
rightTop: size === 'large' ? 'left-14 top-0' : 'left-12 top-0',
}
const { theme } = useTheme()
return (
<Popover>
{({ open }) => (
@ -46,9 +44,7 @@ const IconDropMenu = ({
: size === 'medium'
? 'h-10 w-10'
: 'h-8 w-8'
} default-transition items-center justify-center rounded-full border border-th-fgd-4 md:hover:border-th-bkg-4 ${
theme === 'Light' ? 'text-th-button' : 'text-th-fgd-1'
} md:hover:text-th-fgd-1 ${
} default-transition items-center justify-center rounded-full border border-th-bkg-4 text-th-fgd-1 md:hover:border-th-fgd-4 md:hover:text-th-fgd-1 ${
disabled ? 'cursor-not-allowed opacity-60' : ''
}`}
disabled={disabled}

18
components/shared/InlineNotification.tsx
View File

@ -26,30 +26,30 @@ const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
!hideBorder
? `border text-th-fgd-3 ${
type === 'error'
? 'border-th-red'
? 'border-th-error'
: type === 'success'
? 'border-th-green'
? 'border-th-success'
: type === 'info'
? 'border-th-bkg-4'
: 'border-th-orange'
: 'border-th-warning'
}`
: type === 'error'
? 'text-th-red'
? 'text-th-error'
: type === 'success'
? 'text-th-green'
? 'text-th-success'
: type === 'info'
? 'text-th-bkg-4'
: 'text-th-orange'
: 'text-th-warning'
} flex items-center rounded-md ${!hidePadding ? 'p-2' : ''}`}
>
{type === 'error' ? (
<ExclamationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-red" />
<ExclamationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-error" />
) : null}
{type === 'success' ? (
<CheckCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-green" />
<CheckCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-success" />
) : null}
{type === 'warning' ? (
<ExclamationTriangleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-orange" />
<ExclamationTriangleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-warning" />
) : null}
{type === 'info' ? (
<InformationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-fgd-4" />

13
components/shared/MenuItem.tsx
View File

@ -12,20 +12,19 @@ const MenuItem = ({ href, children, newWindow = false }: MenuItemProps) => {
const { asPath } = useRouter()
return (
(<Link
<Link
href={href}
shallow={true}
className={`text-mango-200 flex h-full items-center justify-between border-b border-th-bkg-4 p-3 font-bold hover:text-yellow-400 md:border-none md:py-0
${asPath === href ? `text-th-primary` : `border-transparent`}
${asPath === href ? `text-th-active` : `border-transparent`}
`}
target={newWindow ? '_blank' : ''}
rel={newWindow ? 'noopener noreferrer' : ''}>
rel={newWindow ? 'noopener noreferrer' : ''}
>
{children}
<ChevronRightIcon className="h-5 w-5 md:hidden" />
</Link>)
);
</Link>
)
}
export default MenuItem

2
components/shared/Modal.tsx
View File

@ -33,7 +33,7 @@ function Modal({
{!hideClose ? (
<button
onClick={onClose}
className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-active`}
>
<XMarkIcon className={`h-6 w-6`} />
</button>

14
components/shared/Notification.tsx
View File

@ -224,25 +224,25 @@ const Notification = ({ notification }: { notification: Notification }) => {
<div
className={`pointer-events-auto w-full rounded-md border bg-th-bkg-2 shadow-lg md:w-auto ${
type === 'success'
? 'border-th-green'
? 'border-th-success'
: type === 'error'
? 'border-th-red'
? 'border-th-error'
: 'border-th-bkg-4'
}`}
>
<div className={`relative flex w-full items-center p-3.5 md:w-96`}>
<div className={`mr-1 flex-shrink-0`}>
{type === 'success' ? (
<CheckCircleIcon className={`h-6 w-6 text-th-green`} />
<CheckCircleIcon className={`h-6 w-6 text-th-success`} />
) : null}
{type === 'info' && (
<InformationCircleIcon className={`h-6 w-6 text-th-fgd-3`} />
)}
{type === 'error' && (
<XCircleIcon className={`h-6 w-6 text-th-red`} />
<XCircleIcon className={`h-6 w-6 text-th-error`} />
)}
{type === 'confirm' && (
<Loading className="mr-0.5 h-5 w-5 text-th-primary" />
<Loading className="mr-0.5 h-5 w-5 text-th-active" />
)}
</div>
<div className={`ml-2 flex-1`}>
@ -257,7 +257,7 @@ const Notification = ({ notification }: { notification: Notification }) => {
{txid ? (
<a
href={preferredExplorer.url + txid + '?cluster=' + CLUSTER}
className="default-transition mt-1 flex items-center text-xs text-th-primary underline hover:text-th-fgd-2"
className="default-transition mt-1 flex items-center text-xs text-th-active underline hover:text-th-fgd-2"
target="_blank"
rel="noreferrer"
>
@ -266,7 +266,7 @@ const Notification = ({ notification }: { notification: Notification }) => {
? txid
: `${txid.slice(0, 14)}...${txid.slice(txid.length - 14)}`}
</div>
<ArrowTopRightOnSquareIcon className="mb-0.5 ml-1 h-5 w-5" />
<ArrowTopRightOnSquareIcon className="mb-0.5 ml-1 h-5 w-5 flex-shrink-0" />
</a>
) : null}
</div>

4
components/shared/SideBadge.tsx
View File

@ -13,8 +13,8 @@ const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
<div
className={`inline-block rounded uppercase ${
side === 'buy' || side === 'long' || side === PerpOrderSide.bid
? 'border border-th-green text-th-green'
: 'border border-th-red text-th-red'
? 'border border-th-up text-th-up'
: 'border border-th-down text-th-down'
}
-my-0.5 px-1 text-xs uppercase md:px-1.5 md:py-0.5`}
>

2
components/shared/TabButtons.tsx
View File

@ -39,7 +39,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
: ''
} ${
label === activeValue
? 'bg-th-bkg-2 text-th-primary'
? 'bg-th-bkg-2 text-th-active'
: 'hover:cursor-pointer hover:text-th-fgd-2'
}`}
key={`${label}${i}`}

12
components/shared/TabUnderline.tsx
View File

@ -19,10 +19,10 @@ const TabUnderline = ({
<div
className={`default-transition absolute bottom-[-1px] left-0 h-0.5 ${
activeValue === 'buy'
? 'bg-th-green'
? 'bg-th-up'
: activeValue === 'sell'
? 'bg-th-red'
: 'bg-th-primary'
? 'bg-th-down'
: 'bg-th-active'
}`}
style={{
// maxWidth: '176px',
@ -43,10 +43,10 @@ const TabUnderline = ({
${
activeValue === value
? activeValue === 'buy'
? 'text-th-green'
? 'text-th-up'
: activeValue === 'sell'
? 'text-th-red'
: 'text-th-primary'
? 'text-th-down'
: 'text-th-active'
: 'text-th-fgd-4 hover:text-th-fgd-3'
}
`}

6
components/stats/SpotMarketsTable.tsx
View File

@ -80,9 +80,7 @@ const SpotMarketsTable = () => {
chartData !== undefined ? (
<SimpleAreaChart
color={
change >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
}
data={chartData}
height={40}
@ -178,7 +176,7 @@ const MobileSpotMarketItem = ({ market }: { market: Serum3Market }) => {
{!loadingPrices ? (
chartData !== undefined ? (
<SimpleAreaChart
color={change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]}
color={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
data={chartData}
height={40}
name={bank!.name}

8
components/stats/TokenStats.tsx
View File

@ -190,14 +190,14 @@ const TokenStats = () => {
</Td>
<Td>
<div className="flex justify-end space-x-2">
<p className="text-th-green">
<p className="text-th-up">
{formatDecimal(bank.getDepositRateUi(), 2, {
fixed: true,
})}
%
</p>
<span className="text-th-fgd-4">|</span>
<p className="text-th-red">
<p className="text-th-down">
{formatDecimal(bank.getBorrowRateUi(), 2, {
fixed: true,
})}
@ -310,11 +310,11 @@ const TokenStats = () => {
<div className="col-span-1">
<p className="text-xs text-th-fgd-3">{t('rates')}</p>
<p className="space-x-2">
<span className="font-mono text-th-green">
<span className="font-mono text-th-up">
{formatDecimal(bank.getDepositRate().toNumber(), 2)}%
</span>
<span className="font-normal text-th-fgd-4">|</span>
<span className="font-mono text-th-red">
<span className="font-mono text-th-down">
{formatDecimal(bank.getBorrowRate().toNumber(), 2)}%
</span>
</p>

10
components/swap/JupiterRouteInfo.tsx
View File

@ -315,7 +315,7 @@ const JupiterRouteInfo = ({
)}
</p>
<ArrowsRightLeftIcon
className="default-transition ml-1 h-4 w-4 cursor-pointer text-th-fgd-1 hover:text-th-primary"
className="default-transition ml-1 h-4 w-4 cursor-pointer text-th-fgd-1 hover:text-th-active"
onClick={() => setSwapRate(!swapRate)}
/>
</div>
@ -325,8 +325,8 @@ const JupiterRouteInfo = ({
<div
className={`text-right font-mono ${
coinGeckoPriceDifference.gt(0)
? 'text-th-red'
: 'text-th-green'
? 'text-th-down'
: 'text-th-up'
}`}
>
{Decimal.abs(coinGeckoPriceDifference).toFixed(1)}%{' '}
@ -415,7 +415,7 @@ const JupiterRouteInfo = ({
)
})}
</span>
<PencilIcon className="ml-2 h-4 w-4 hover:text-th-primary" />
<PencilIcon className="ml-2 h-4 w-4 hover:text-th-active" />
</div>
</div>
{typeof feeValue === 'number' ? (
@ -492,7 +492,7 @@ const JupiterRouteInfo = ({
}
placement={'left'}
>
<InformationCircleIcon className="ml-1.5 h-3.5 w-3.5 cursor-help text-th-primary" />
<InformationCircleIcon className="ml-1.5 h-3.5 w-3.5 cursor-help text-th-active" />
</Tooltip>
</div>
<div>

2
components/swap/RoutesModal.tsx
View File

@ -44,7 +44,7 @@ const RoutesModal = ({
key={index}
className={`default-transition mb-2 rounded border bg-th-bkg-3 hover:bg-th-bkg-4 ${
selected
? 'border-th-primary text-th-primary hover:border-th-primary'
? 'border-th-active text-th-active hover:border-th-active'
: 'border-transparent text-th-fgd-1'
}`}
>

2
components/swap/SwapForm.tsx
View File

@ -277,7 +277,7 @@ const SwapForm = () => {
</div>
<div className="-mb-2 flex justify-center">
<button
className="rounded-full border border-th-bkg-4 p-1.5 text-th-fgd-3 md:hover:text-th-primary"
className="rounded-full border border-th-bkg-4 p-1.5 text-th-fgd-3 md:hover:text-th-active"
onClick={handleSwitchTokens}
>
<ArrowDownIcon

6
components/swap/SwapHistoryTable.tsx
View File

@ -24,7 +24,7 @@ import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
import Tooltip from '@components/shared/Tooltip'
import { formatTokenSymbol } from 'utils/tokens'
import useJupiterMints from 'hooks/useJupiterMints'
import { Table, Td, Th, TrBody } from '@components/shared/TableElements'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import { useWallet } from '@solana/wallet-adapter-react'
import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
@ -56,13 +56,13 @@ const SwapHistoryTable = ({
showTableView ? (
<Table>
<thead>
<TrBody>
<TrHead>
<Th className="text-left">{t('date')}</Th>
<Th className="w-1/3 text-left">{t('swap')}</Th>
<Th className="text-right">{t('borrow')}</Th>
<Th className="text-right">{t('borrow-fee')}</Th>
<Th />
</TrBody>
</TrHead>
</thead>
<tbody>
{swapHistory.map((h) => {

14
components/swap/SwapTokenChart.tsx
View File

@ -176,7 +176,7 @@ const SwapTokenChart = () => {
)}`}
</p>
{/* <div
className="px-2 hover:cursor-pointer hover:text-th-primary"
className="px-2 hover:cursor-pointer hover:text-th-active"
onClick={handleFlipChart}
>
<SwitchHorizontalIcon className="h-4 w-4" />
@ -275,8 +275,8 @@ const SwapTokenChart = () => {
offset="0%"
stopColor={
calculateChartChange() >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0.25}
/>
@ -284,8 +284,8 @@ const SwapTokenChart = () => {
offset="99%"
stopColor={
calculateChartChange() >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0}
/>
@ -297,8 +297,8 @@ const SwapTokenChart = () => {
dataKey="price"
stroke={
calculateChartChange() >= 0
? COLORS.GREEN[theme]
: COLORS.RED[theme]
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
strokeWidth={1.5}
fill="url(#gradientArea)"

6
components/token/PriceChart.tsx
View File

@ -27,14 +27,14 @@ const PriceChart = ({
<stop
offset="0%"
stopColor={
change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]
change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
}
stopOpacity={0.15}
/>
<stop
offset="99%"
stopColor={
change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]
change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
}
stopOpacity={0}
/>
@ -44,7 +44,7 @@ const PriceChart = ({
isAnimationActive={false}
type="monotone"
dataKey="1"
stroke={change >= 0 ? COLORS.GREEN[theme] : COLORS.RED[theme]}
stroke={change >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]}
strokeWidth={1.5}
fill="url(#gradientArea)"
/>

4
components/tours/CustomTooltip.tsx
View File

@ -61,7 +61,7 @@ const CustomTooltip = ({
<>
<button
onClick={onClose}
className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
className={`absolute right-4 top-4 z-50 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-active`}
>
<XMarkIcon className={`h-5 w-5`} />
</button>
@ -82,7 +82,7 @@ const CustomTooltip = ({
{allSteps.map((s, i) => (
<div
className={`h-1 w-1 rounded-full ${
i === stepIndex ? 'bg-th-primary' : 'bg-th-bkg-4'
i === stepIndex ? 'bg-th-active' : 'bg-th-bkg-4'
}`}
key={s.title}
/>

4
components/trade/AdvancedTradeForm.tsx
View File

@ -529,8 +529,8 @@ const AdvancedTradeForm = () => {
onClick={handlePlaceOrder}
className={`flex w-full items-center justify-center text-white ${
tradeForm.side === 'buy'
? 'bg-th-green-dark md:hover:bg-th-green'
: 'bg-th-red-dark md:hover:bg-th-red'
? 'bg-th-up-dark md:hover:bg-th-up'
: 'bg-th-down-dark md:hover:bg-th-down'
}`}
disabled={false}
size="large"

10
components/trade/FavoriteMarketsBar.tsx
View File

@ -20,7 +20,7 @@ const FavoriteMarketsBar = () => {
return !isMobile ? (
<Transition
className="flex items-center space-x-4 overflow-hidden border-b border-th-bkg-3 px-6"
className="flex items-center space-x-4 overflow-hidden border-b border-th-bkg-3 py-1 px-6"
show={!!favoriteMarkets.length}
enter="transition-all ease-in duration-200"
enterFrom="opacity-0 h-0"
@ -42,12 +42,12 @@ const FavoriteMarketsBar = () => {
return (
<Link href={`/trade?name=${mkt}`} key={mkt} shallow={true}>
<div
className={`default-transition flex items-center whitespace-nowrap py-1 text-xs hover:text-th-primary hover:opacity-100 ${
className={`default-transition flex items-center whitespace-nowrap py-1 text-xs hover:text-th-active hover:opacity-100 ${
asPath.includes(mkt) ||
(asPath === '/trade' &&
selectedMarket &&
selectedMarket.name === mkt)
? 'text-th-primary'
? 'text-th-active'
: 'text-th-fgd-1 opacity-60'
}`}
>
@ -58,8 +58,8 @@ const FavoriteMarketsBar = () => {
className={`text-xs ${
change24h
? change24h >= 0
? 'text-th-green'
: 'text-th-red'
? 'text-th-up'
: 'text-th-down'
: 'text-th-fgd-4'
}`}
>

6
components/trade/GroupSize.tsx
View File

@ -30,7 +30,7 @@ const GroupSize = ({
{({ open }) => (
<>
<Listbox.Button
className={`default-transition flex h-6 items-center rounded bg-th-bkg-1 py-1 font-normal text-th-fgd-2 hover:text-th-primary focus:border-th-bkg-4 focus:outline-none`}
className={`default-transition flex h-6 items-center rounded bg-th-bkg-1 py-1 font-normal text-th-fgd-2 hover:text-th-active focus:border-th-bkg-4 focus:outline-none`}
>
<div
className={`flex items-center justify-between font-mono text-xs leading-none`}
@ -53,8 +53,8 @@ const GroupSize = ({
<Listbox.Option key={size} value={size}>
{({ selected }) => (
<div
className={`default-transition text-right font-mono text-xs text-th-fgd-2 hover:cursor-pointer hover:text-th-primary ${
selected && `text-th-primary`
className={`default-transition text-right font-mono text-xs text-th-fgd-2 hover:cursor-pointer hover:text-th-active ${
selected && `text-th-active`
}`}
>
{size}

8
components/trade/MarketSelectDropdown.tsx
View File

@ -38,7 +38,7 @@ const MarketSelectDropdown = () => {
className="relative flex flex-col overflow-visible"
id="trade-step-one"
>
<Popover.Button className="default-transition flex w-full items-center justify-between hover:text-th-primary">
<Popover.Button className="default-transition flex w-full items-center justify-between hover:text-th-active">
<>
{selectedMarket ? <MarketLogos market={selectedMarket} /> : null}
</>
@ -89,12 +89,12 @@ const MarketSelectDropdown = () => {
}}
shallow={true}
>
<div className="default-transition flex items-center hover:cursor-pointer hover:text-th-primary">
<div className="default-transition flex items-center hover:cursor-pointer hover:text-th-active">
<MarketLogos market={m} />
<span
className={
m.name === selectedMarket?.name
? 'text-th-primary'
? 'text-th-active'
: ''
}
>
@ -129,7 +129,7 @@ const MarketSelectDropdown = () => {
<span
className={
m.name === selectedMarket?.name
? 'text-th-primary'
? 'text-th-active'
: ''
}
>

6
components/trade/Orderbook.tsx
View File

@ -637,7 +637,7 @@ const OrderbookRow = ({
<div
style={{ fontFeatureSettings: 'zero 1' }}
className={`z-10 w-full text-right font-mono text-xs ${
hasOpenOrder ? 'text-th-primary' : ''
hasOpenOrder ? 'text-th-active' : ''
}`}
// onClick={handleSizeClick}
>
@ -651,13 +651,13 @@ const OrderbookRow = ({
<Line
className={`absolute left-0 opacity-40 brightness-125 ${
side === 'buy' ? `bg-th-green-muted` : `bg-th-red-muted`
side === 'buy' ? `bg-th-up-muted` : `bg-th-down-muted`
}`}
data-width={Math.max(sizePercent, 0.5) + '%'}
/>
<Line
className={`absolute left-0 opacity-70 ${
side === 'buy' ? `bg-th-green` : `bg-th-red`
side === 'buy' ? `bg-th-up` : `bg-th-down`
}`}
data-width={
Math.max((cumulativeSizePercent / 100) * sizePercent, 0.1) + '%'

4
components/trade/RecentTrades.tsx
View File

@ -175,8 +175,8 @@ const RecentTrades = () => {
<td
className={`pb-1.5 text-right ${
['buy', 'bid'].includes(side)
? `text-th-green`
: `text-th-red`
? `text-th-up`
: `text-th-down`
}`}
>
{formattedPrice.toFixed()}

18
components/trade/TradingViewChart.tsx
View File

@ -47,8 +47,8 @@ const TradingViewChart = () => {
fullscreen: false,
autosize: true,
studiesOverrides: {
'volume.volume.color.0': COLORS.RED[theme],
'volume.volume.color.1': COLORS.GREEN[theme],
'volume.volume.color.0': COLORS.DOWN[theme],
'volume.volume.color.1': COLORS.UP[theme],
'volume.precision': 4,
},
}),
@ -81,13 +81,13 @@ const TradingViewChart = () => {
[`mainSeriesProperties.${prop}.barColorsOnPrevClose`]: true,
[`mainSeriesProperties.${prop}.drawWick`]: true,
[`mainSeriesProperties.${prop}.drawBorder`]: true,
[`mainSeriesProperties.${prop}.upColor`]: COLORS.GREEN[theme],
[`mainSeriesProperties.${prop}.downColor`]: COLORS.RED[theme],
[`mainSeriesProperties.${prop}.borderColor`]: COLORS.GREEN[theme],
[`mainSeriesProperties.${prop}.borderUpColor`]: COLORS.GREEN[theme],
[`mainSeriesProperties.${prop}.borderDownColor`]: COLORS.RED[theme],
[`mainSeriesProperties.${prop}.wickUpColor`]: COLORS.GREEN[theme],
[`mainSeriesProperties.${prop}.wickDownColor`]: COLORS.RED[theme],
[`mainSeriesProperties.${prop}.upColor`]: COLORS.UP[theme],
[`mainSeriesProperties.${prop}.downColor`]: COLORS.DOWN[theme],
[`mainSeriesProperties.${prop}.borderColor`]: COLORS.UP[theme],
[`mainSeriesProperties.${prop}.borderUpColor`]: COLORS.UP[theme],
[`mainSeriesProperties.${prop}.borderDownColor`]: COLORS.DOWN[theme],
[`mainSeriesProperties.${prop}.wickUpColor`]: COLORS.UP[theme],
[`mainSeriesProperties.${prop}.wickDownColor`]: COLORS.DOWN[theme],
}
})

6
components/wallet/ConnectWalletButton.tsx
View File

@ -19,7 +19,7 @@ export const ConnectWalletButton: React.FC = () => {
disabled={!groupLoaded}
className={` text-white focus:outline-none disabled:cursor-wait disabled:opacity-25`}
>
<div className="relative flex h-16 w-44 bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
<div className="relative flex h-16 w-44 bg-th-bkg-2 py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
<div className="default-transition flex h-full flex-row items-center justify-center space-x-3 px-4">
<div
className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
@ -37,11 +37,11 @@ export const ConnectWalletButton: React.FC = () => {
/>
</div>
<div className="text-left">
<div className="mb-1.5 flex justify-center text-base font-bold leading-none">
<div className="mb-1.5 flex justify-center text-base font-bold leading-none text-th-fgd-1">
{connecting ? <Loading className="h-4 w-4" /> : t('connect')}
</div>
<div className="text-xxs font-normal leading-3 tracking-wider text-white">
<div className="text-xxs font-normal leading-3 tracking-wider text-th-fgd-3">
{preselectedWalletName}
</div>
</div>

8
components/wallet/ConnectedMenu.tsx
View File

@ -118,7 +118,7 @@ const ConnectedMenu = () => {
<Menu.Items className="absolute right-0 top-[61px] z-20 mt-1 w-48 space-y-1.5 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 md:rounded-r-none">
<Menu.Item>
<button
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none"
onClick={() => setShowEditProfileModal(true)}
>
<UserCircleIcon className="h-4 w-4" />
@ -130,7 +130,7 @@ const ConnectedMenu = () => {
{isMobile ? (
<Menu.Item>
<button
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none"
onClick={() => setShowMangoAccountsModal(true)}
>
<CurrencyDollarIcon className="h-4 w-4" />
@ -140,7 +140,7 @@ const ConnectedMenu = () => {
) : null}
{/* <Menu.Item>
<button
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-primary focus:outline-none"
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer hover:text-th-active focus:outline-none"
onClick={() => setShowProfileImageModal(true)}
>
<ProfileIcon className="h-4 w-4" />
@ -151,7 +151,7 @@ const ConnectedMenu = () => {
</Menu.Item> */}
<Menu.Item>
<button
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer focus:outline-none md:hover:text-th-primary"
className="flex w-full flex-row items-center rounded-none py-0.5 font-normal hover:cursor-pointer focus:outline-none md:hover:text-th-active"
onClick={handleDisconnect}
>
<ArrowRightOnRectangleIcon className="h-4 w-4" />

4
components/wallet/WalletSelect.tsx
View File

@ -13,7 +13,7 @@ const WalletSelect = () => {
{({ open }) => (
<>
<Menu.Button
className={`flex h-full w-12 cursor-pointer items-center justify-center rounded-none bg-transparent text-white hover:brightness-[1.1] focus:outline-none disabled:opacity-25`}
className={`flex h-full w-12 cursor-pointer items-center justify-center rounded-none bg-transparent text-th-fgd-3 hover:brightness-[1.1] focus:outline-none disabled:opacity-25`}
disabled={!group}
>
<ChevronDownIcon
@ -37,7 +37,7 @@ const WalletSelect = () => {
{displayedWallets?.map((wallet, index) => (
<Menu.Item key={index}>
<button
className="flex w-full flex-row items-center justify-between rounded-none py-1.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-primary"
className="flex w-full flex-row items-center justify-between rounded-none py-1.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-active"
onClick={() => {
handleSelect(wallet.adapter.name)
}}

2
pages/404.tsx
View File

@ -19,7 +19,7 @@ export default function Custom404() {
style={{ height: 'calc(100vh - 80px)' }}
>
{/* <span className="mb-4 text-lg font-bold text-th-fgd-3">404</span> */}
<RektIcon className="mb-4 h-14 w-auto -rotate-6 transform text-th-red" />
<RektIcon className="mb-4 h-14 w-auto -rotate-6 transform text-th-down" />
<h1 className="mt-1 text-3xl text-th-fgd-1 sm:text-4xl">
404: {t('404-heading')}
</h1>

4
pages/token/[token].tsx
View File

@ -323,7 +323,7 @@ const Token: NextPage = () => {
</div>
<div className="flex justify-between border-t border-th-bkg-3 pt-4">
<p>{t('deposit-rate')}</p>
<p className="font-mono text-th-green">
<p className="font-mono text-th-up">
{formatDecimal(bank.getDepositRateUi(), 2, {
fixed: true,
})}
@ -347,7 +347,7 @@ const Token: NextPage = () => {
</div>
<div className="flex justify-between border-t border-th-bkg-3 pt-4">
<p>{t('borrow-rate')}</p>
<p className="font-mono text-th-red">
<p className="font-mono text-th-down">
{formatDecimal(bank.getBorrowRateUi(), 2, {
fixed: true,
})}

77
styles/colors.ts
View File

@ -1,7 +1,74 @@
export const COLORS: any = {
BKG1: { Mango: '#18181C', Dark: '#17171B', Light: '#FDFDFD' },
BKG2: { Mango: '#242132', Dark: '#201F27', Light: '#f0f0f0' },
GREEN: { Mango: '#A6CD03', Dark: '#5EBF4d', Light: '#5EBF4d' },
PRIMARY: { Mango: '#F2C94C', Dark: '#F2C94C', Light: '#FF9C24' },
RED: { Mango: '#F84638', Dark: '#CC2929', Light: '#CC2929' },
BKG1: {
Mango: 'hsl(256, 18%, 12%)',
Dark: 'hsl(240, 6%, 7%)',
Light: 'hsl(0, 0%, 99%)',
// Smoothy: 'hsl(45, 100%, 96%)',
Jungle: 'hsl(120, 18%, 12%)',
Medium: 'hsl(240, 6%, 12%)',
Ocean: 'hsl(222, 74%, 21%)',
},
BKG2: {
Mango: 'hsl(256, 18%, 17%)',
Dark: 'hsl(240, 6%, 12%)',
Light: 'hsl(0, 0%, 94%)',
// Smoothy: 'hsl(45, 100%, 91%)',
Jungle: 'hsl(120, 18%, 17%)',
Medium: 'hsl(240, 6%, 17%)',
Ocean: 'hsl(222, 74%, 26%)',
},
BKG3: {
Mango: 'hsl(256, 18%, 22%)',
Dark: 'hsl(240, 6%, 17%)',
Light: 'hsl(0, 0%, 89%)',
// Smoothy: 'hsl(45, 100%, 86%)',
Jungle: 'hsl(120, 18%, 22%)',
Medium: 'hsl(240, 6%, 22%)',
Ocean: 'hsl(222, 74%, 31%)',
},
BKG4: {
Mango: 'hsl(256, 18%, 27%)',
Dark: 'hsl(240, 6%, 22%)',
Light: 'hsl(0, 0%, 84%)',
// Smoothy: 'hsl(45, 100%, 81%)',
Jungle: 'hsl(120, 18%, 27%)',
Medium: 'hsl(240, 6%, 27%)',
Ocean: 'hsl(222, 74%, 36%)',
},
FGD4: {
Mango: 'hsl(253, 19%, 61%)',
Dark: 'hsl(0, 0%, 52%)',
Light: 'hsl(188, 71%, 38%)',
// Smoothy: 'hsl(45, 100%, 34%)',
Jungle: 'hsl(120, 20%, 63%)',
Medium: 'hsl(0, 0%, 50%)',
Ocean: 'hsl(220, 71%, 66%)',
},
UP: {
Mango: 'hsl(72, 97%, 41%)',
Dark: 'hsl(111, 47%, 53%)',
Light: 'hsl(111, 47%, 53%)',
// Smoothy: 'hsl(110, 73%, 40%)',
Jungle: 'hsl(120, 50%, 53%)',
Medium: 'hsl(111, 47%, 53%)',
Ocean: 'hsl(165, 82%, 45%)',
},
ACTIVE: {
Mango: 'hsl(45, 86%, 62%)',
Dark: 'hsl(45, 86%, 62%)',
Light: 'hsl(33, 100%, 57%)',
// Smoothy: 'hsl(321, 100%, 48%)',
Jungle: 'hsl(120, 100%, 73%)',
Medium: 'hsl(45, 86%, 62%)',
Ocean: 'hsl(45, 86%, 62%)',
},
DOWN: {
Mango: 'hsl(4, 93%, 60%)',
Dark: 'hsl(0, 67%, 48%)',
Light: 'hsl(0, 67%, 48%)',
// Smoothy: 'hsl(0, 100%, 56%)',
Jungle: 'hsl(0, 100%, 73%)',
Medium: 'hsl(0, 67%, 48%)',
Ocean: 'hsl(3, 59%, 56%)',
},
}

8
styles/datepicker.css
View File

@ -9,19 +9,19 @@
}
.nice-dates .nice-dates-navigation_next:before {
@apply border-th-fgd-2 hover:border-th-primary;
@apply border-th-fgd-2 hover:border-th-active;
}
.nice-dates .nice-dates-navigation_next:hover:before {
@apply border-th-primary;
@apply border-th-active;
}
.nice-dates .nice-dates-navigation_previous:before {
@apply border-th-fgd-2 hover:border-th-primary;
@apply border-th-fgd-2 hover:border-th-active;
}
.nice-dates .nice-dates-navigation_previous:hover:before {
@apply border-th-primary;
@apply border-th-active;
}
.nice-dates .nice-dates-week-header_day {

208
styles/globals.css
View File

@ -80,15 +80,16 @@ th {
/* Theme */
:root {
--primary: theme('colors.light-theme.orange.DEFAULT');
--primary-dark: theme('colors.light-theme.orange.dark');
--red: theme('colors.light-theme.red.DEFAULT');
--red-dark: theme('colors.light-theme.red.dark');
--red-muted: theme('colors.light-theme.red.muted');
--green: theme('colors.light-theme.green.DEFAULT');
--green-dark: theme('colors.light-theme.green.dark');
--green-muted: theme('colors.light-theme.green.muted');
--orange: theme('colors.light-theme.orange.DEFAULT');
--active: theme('colors.light-theme.active.DEFAULT');
--active-dark: theme('colors.light-theme.active.dark');
--down: theme('colors.light-theme.down.DEFAULT');
--down-dark: theme('colors.light-theme.down.dark');
--down-muted: theme('colors.light-theme.down.muted');
--up: theme('colors.light-theme.up.DEFAULT');
--up-dark: theme('colors.light-theme.up.dark');
--up-muted: theme('colors.light-theme.up.muted');
--link: theme('colors.light-theme.link.DEFAULT');
--link-hover: theme('colors.light-theme.link.hover');
--bkg-1: theme('colors.light-theme.bkg-1');
--bkg-2: theme('colors.light-theme.bkg-2');
--bkg-3: theme('colors.light-theme.bkg-3');
@ -97,20 +98,24 @@ th {
--fgd-2: theme('colors.light-theme.fgd-2');
--fgd-3: theme('colors.light-theme.fgd-3');
--fgd-4: theme('colors.light-theme.fgd-4');
--button: theme('colors.light-theme.button');
--button-hover: theme('colors.light-theme.button-hover');
--button: theme('colors.light-theme.button.DEFAULT');
--button-hover: theme('colors.light-theme.button.hover');
--error: theme('colors.light-theme.error');
--success: theme('colors.light-theme.success');
--warning: theme('colors.light-theme.warning');
}
[data-theme='Dark'] {
--primary: theme('colors.dark-theme.yellow.DEFAULT');
--primary-dark: theme('colors.dark-theme.yellow.dark');
--red: theme('colors.dark-theme.red.DEFAULT');
--red-dark: theme('colors.dark-theme.red.dark');
--red-muted: theme('colors.dark-theme.red.muted');
--green: theme('colors.dark-theme.green.DEFAULT');
--green-dark: theme('colors.dark-theme.green.dark');
--green-muted: theme('colors.dark-theme.green.muted');
--orange: theme('colors.dark-theme.orange.DEFAULT');
--active: theme('colors.dark-theme.active.DEFAULT');
--active-dark: theme('colors.dark-theme.active.dark');
--down: theme('colors.dark-theme.down.DEFAULT');
--down-dark: theme('colors.dark-theme.down.dark');
--down-muted: theme('colors.dark-theme.down.muted');
--up: theme('colors.dark-theme.up.DEFAULT');
--up-dark: theme('colors.dark-theme.up.dark');
--up-muted: theme('colors.dark-theme.up.muted');
--link: theme('colors.dark-theme.link.DEFAULT');
--link-hover: theme('colors.dark-theme.link.hover');
--bkg-1: theme('colors.dark-theme.bkg-1');
--bkg-2: theme('colors.dark-theme.bkg-2');
--bkg-3: theme('colors.dark-theme.bkg-3');
@ -119,20 +124,24 @@ th {
--fgd-2: theme('colors.dark-theme.fgd-2');
--fgd-3: theme('colors.dark-theme.fgd-3');
--fgd-4: theme('colors.dark-theme.fgd-4');
--button: theme('colors.dark-theme.button');
--button-hover: theme('colors.dark-theme.button-hover');
--button: theme('colors.dark-theme.button.DEFAULT');
--button-hover: theme('colors.dark-theme.button.hover');
--error: theme('colors.dark-theme.error');
--success: theme('colors.dark-theme.success');
--warning: theme('colors.dark-theme.warning');
}
[data-theme='Mango'] {
--primary: theme('colors.mango-theme.yellow.DEFAULT');
--primary-dark: theme('colors.mango-theme.yellow.dark');
--red: theme('colors.mango-theme.red.DEFAULT');
--red-dark: theme('colors.mango-theme.red.dark');
--red-muted: theme('colors.mango-theme.red.muted');
--green: theme('colors.mango-theme.green.DEFAULT');
--green-dark: theme('colors.mango-theme.green.dark');
--green-muted: theme('colors.mango-theme.green.muted');
--orange: theme('colors.mango-theme.orange.DEFAULT');
--active: theme('colors.mango-theme.active.DEFAULT');
--active-dark: theme('colors.mango-theme.active.dark');
--down: theme('colors.mango-theme.down.DEFAULT');
--down-dark: theme('colors.mango-theme.down.dark');
--down-muted: theme('colors.mango-theme.down.muted');
--up: theme('colors.mango-theme.up.DEFAULT');
--up-dark: theme('colors.mango-theme.up.dark');
--up-muted: theme('colors.mango-theme.up.muted');
--link: theme('colors.mango-theme.link.DEFAULT');
--link-hover: theme('colors.mango-theme.link.hover');
--bkg-1: theme('colors.mango-theme.bkg-1');
--bkg-2: theme('colors.mango-theme.bkg-2');
--bkg-3: theme('colors.mango-theme.bkg-3');
@ -141,8 +150,115 @@ th {
--fgd-2: theme('colors.mango-theme.fgd-2');
--fgd-3: theme('colors.mango-theme.fgd-3');
--fgd-4: theme('colors.mango-theme.fgd-4');
--button: theme('colors.mango-theme.button');
--button-hover: theme('colors.mango-theme.button-hover');
--button: theme('colors.mango-theme.button.DEFAULT');
--button-hover: theme('colors.mango-theme.button.hover');
--error: theme('colors.mango-theme.error');
--success: theme('colors.mango-theme.success');
--warning: theme('colors.mango-theme.warning');
}
[data-theme='Medium'] {
--active: theme('colors.medium-theme.active.DEFAULT');
--active-dark: theme('colors.medium-theme.active.dark');
--down: theme('colors.medium-theme.down.DEFAULT');
--down-dark: theme('colors.medium-theme.down.dark');
--down-muted: theme('colors.medium-theme.down.muted');
--up: theme('colors.medium-theme.up.DEFAULT');
--up-dark: theme('colors.medium-theme.up.dark');
--up-muted: theme('colors.medium-theme.up.muted');
--link: theme('colors.medium-theme.link.DEFAULT');
--link-hover: theme('colors.medium-theme.link.hover');
--bkg-1: theme('colors.medium-theme.bkg-1');
--bkg-2: theme('colors.medium-theme.bkg-2');
--bkg-3: theme('colors.medium-theme.bkg-3');
--bkg-4: theme('colors.medium-theme.bkg-4');
--fgd-1: theme('colors.medium-theme.fgd-1');
--fgd-2: theme('colors.medium-theme.fgd-2');
--fgd-3: theme('colors.medium-theme.fgd-3');
--fgd-4: theme('colors.medium-theme.fgd-4');
--button: theme('colors.medium-theme.button.DEFAULT');
--button-hover: theme('colors.medium-theme.button.hover');
--error: theme('colors.medium-theme.error');
--success: theme('colors.medium-theme.success');
--warning: theme('colors.medium-theme.warning');
}
[data-theme='Ocean'] {
--active: theme('colors.ocean-theme.active.DEFAULT');
--active-dark: theme('colors.ocean-theme.active.dark');
--down: theme('colors.ocean-theme.down.DEFAULT');
--down-dark: theme('colors.ocean-theme.down.dark');
--down-muted: theme('colors.ocean-theme.down.muted');
--up: theme('colors.ocean-theme.up.DEFAULT');
--up-dark: theme('colors.ocean-theme.up.dark');
--up-muted: theme('colors.ocean-theme.up.muted');
--link: theme('colors.ocean-theme.link.DEFAULT');
--link-hover: theme('colors.ocean-theme.link.hover');
--bkg-1: theme('colors.ocean-theme.bkg-1');
--bkg-2: theme('colors.ocean-theme.bkg-2');
--bkg-3: theme('colors.ocean-theme.bkg-3');
--bkg-4: theme('colors.ocean-theme.bkg-4');
--fgd-1: theme('colors.ocean-theme.fgd-1');
--fgd-2: theme('colors.ocean-theme.fgd-2');
--fgd-3: theme('colors.ocean-theme.fgd-3');
--fgd-4: theme('colors.ocean-theme.fgd-4');
--button: theme('colors.ocean-theme.button.DEFAULT');
--button-hover: theme('colors.ocean-theme.button.hover');
--error: theme('colors.ocean-theme.error');
--success: theme('colors.ocean-theme.success');
--warning: theme('colors.ocean-theme.warning');
}
/* [data-theme='Smoothy'] {
--active: theme('colors.smoothy-theme.active.DEFAULT');
--active-dark: theme('colors.smoothy-theme.active.dark');
--down: theme('colors.smoothy-theme.down.DEFAULT');
--down-dark: theme('colors.smoothy-theme.down.dark');
--down-muted: theme('colors.smoothy-theme.down.muted');
--up: theme('colors.smoothy-theme.up.DEFAULT');
--up-dark: theme('colors.smoothy-theme.up.dark');
--up-muted: theme('colors.smoothy-theme.up.muted');
--link: theme('colors.smoothy-theme.link.DEFAULT');
--link-hover: theme('colors.smoothy-theme.link.hover');
--bkg-1: theme('colors.smoothy-theme.bkg-1');
--bkg-2: theme('colors.smoothy-theme.bkg-2');
--bkg-3: theme('colors.smoothy-theme.bkg-3');
--bkg-4: theme('colors.smoothy-theme.bkg-4');
--fgd-1: theme('colors.smoothy-theme.fgd-1');
--fgd-2: theme('colors.smoothy-theme.fgd-2');
--fgd-3: theme('colors.smoothy-theme.fgd-3');
--fgd-4: theme('colors.smoothy-theme.fgd-4');
--button: theme('colors.smoothy-theme.button.DEFAULT');
--button-hover: theme('colors.smoothy-theme.button.hover');
--error: theme('colors.smoothy-theme.error');
--success: theme('colors.smoothy-theme.success');
--warning: theme('colors.smoothy-theme.warning');
} */
[data-theme='Jungle'] {
--active: theme('colors.jungle-theme.active.DEFAULT');
--active-dark: theme('colors.jungle-theme.active.dark');
--down: theme('colors.jungle-theme.down.DEFAULT');
--down-dark: theme('colors.jungle-theme.down.dark');
--down-muted: theme('colors.jungle-theme.down.muted');
--up: theme('colors.jungle-theme.up.DEFAULT');
--up-dark: theme('colors.jungle-theme.up.dark');
--up-muted: theme('colors.jungle-theme.up.muted');
--link: theme('colors.jungle-theme.link.DEFAULT');
--link-hover: theme('colors.jungle-theme.link.hover');
--bkg-1: theme('colors.jungle-theme.bkg-1');
--bkg-2: theme('colors.jungle-theme.bkg-2');
--bkg-3: theme('colors.jungle-theme.bkg-3');
--bkg-4: theme('colors.jungle-theme.bkg-4');
--fgd-1: theme('colors.jungle-theme.fgd-1');
--fgd-2: theme('colors.jungle-theme.fgd-2');
--fgd-3: theme('colors.jungle-theme.fgd-3');
--fgd-4: theme('colors.jungle-theme.fgd-4');
--button: theme('colors.jungle-theme.button.DEFAULT');
--button-hover: theme('colors.jungle-theme.button.hover');
--error: theme('colors.jungle-theme.error');
--success: theme('colors.jungle-theme.success');
--warning: theme('colors.jungle-theme.warning');
}
/* Base */
@ -191,6 +307,12 @@ li {
@apply text-sm text-th-fgd-3;
}
/* Forms */
input::placeholder {
@apply text-th-fgd-4;
}
/* Slider */
input[type='range']::-webkit-slider-thumb {
@ -198,7 +320,7 @@ input[type='range']::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 100%;
background: var(--primary);
background: var(--active);
cursor: pointer;
margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
@ -208,7 +330,7 @@ input[type='range']::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 100%;
background: var(--primary);
background: var(--active);
cursor: pointer;
}
@ -217,7 +339,7 @@ input[type='range']::-ms-thumb {
height: 16px;
width: 16px;
border-radius: 100%;
background: var(--primary);
background: var(--active);
cursor: pointer;
}
@ -311,7 +433,7 @@ input[type='range'] {
}
input[type='range']::-webkit-slider-thumb {
@apply h-5 w-5 cursor-ew-resize appearance-none rounded-full bg-th-primary;
@apply h-5 w-5 cursor-ew-resize appearance-none rounded-full bg-th-active;
}
input[type='range']::-webkit-slider-runnable-track {
@ -328,7 +450,7 @@ input[type='range']::-webkit-slider-runnable-track {
@keyframes green-flash {
from {
background-color: var(--green-muted);
background-color: var(--up-muted);
}
to {
background-color: transparent;
@ -337,7 +459,7 @@ input[type='range']::-webkit-slider-runnable-track {
@-webkit-keyframes green-flash {
from {
background-color: var(--green-muted);
background-color: var(--up-muted);
}
to {
background-color: transparent;
@ -345,7 +467,7 @@ input[type='range']::-webkit-slider-runnable-track {
}
@-moz-keyframes green-flash {
from {
background-color: var(--green-muted);
background-color: var(--up-muted);
}
to {
background-color: transparent;
@ -354,7 +476,7 @@ input[type='range']::-webkit-slider-runnable-track {
@keyframes red-flash {
from {
background-color: var(--red-muted);
background-color: var(--down-muted);
}
to {
background-color: transparent;
@ -363,7 +485,7 @@ input[type='range']::-webkit-slider-runnable-track {
@-webkit-keyframes red-flash {
from {
background-color: var(--red-muted);
background-color: var(--down-muted);
}
to {
background-color: transparent;
@ -371,7 +493,7 @@ input[type='range']::-webkit-slider-runnable-track {
}
@-moz-keyframes red-flash {
from {
background-color: var(--red-muted);
background-color: var(--down-muted);
}
to {
background-color: transparent;

290
tailwind.config.js
View File

@ -17,65 +17,234 @@ module.exports = {
cursor: {
help: 'help',
},
// each color category in a theme has a single base color with the variations acheived by adjusting lightness (dark and hover variants) and lightness and saturation for muted variants
colors: {
'gradient-start': '#AFD803',
'gradient-mid': '#F2C94C',
'gradient-end': '#E54033',
'light-theme': {
orange: {
DEFAULT: '#FF9C24',
dark: '#F58700',
'mango-theme': {
active: {
DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)',
},
red: { DEFAULT: '#CC2929', dark: '#CC2929', muted: '#eba9a9' },
green: { DEFAULT: '#5EBF4D', dark: '#5EBF4D', muted: '#bfe5b8' },
'bkg-1': '#FDFDFD',
'bkg-2': '#f7f7f7',
'bkg-3': '#F0F0F0',
'bkg-4': '#E6E6E6',
'fgd-1': '#061f23',
'fgd-2': '#0C3F45',
'fgd-3': '#446065',
'fgd-4': '#B0B0B0',
button: '#7261BD',
'button-hover': '#5B48AD',
button: {
DEFAULT: 'hsl(251, 41%, 48%)',
hover: 'hsl(251, 41%, 38%)',
},
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' },
down: {
DEFAULT: 'hsl(4, 93%, 60%)',
dark: 'hsl(4, 93%, 50%)',
muted: 'hsl(4, 53%, 50%)',
},
up: {
DEFAULT: 'hsl(72, 97%, 41%)',
dark: 'hsl(72, 97%, 31%)',
muted: 'hsl(72, 57%, 31%)',
},
error: 'hsl(4, 93%, 60%)',
success: 'hsl(72, 97%, 41%)',
warning: 'hsl(33, 100%, 57%)',
'bkg-1': 'hsl(256, 18%, 12%)',
'bkg-2': 'hsl(256, 18%, 17%)',
'bkg-3': 'hsl(256, 18%, 22%)',
'bkg-4': 'hsl(256, 18%, 27%)',
'fgd-1': 'hsl(253, 19%, 91%)',
'fgd-2': 'hsl(253, 19%, 81%)',
'fgd-3': 'hsl(253, 19%, 71%)',
'fgd-4': 'hsl(253, 19%, 61%)',
},
'light-theme': {
active: {
DEFAULT: 'hsl(33, 100%, 57%)',
dark: 'hsl(33, 100%, 47%)',
},
button: {
DEFAULT: 'hsl(251, 41%, 56%)',
hover: 'hsl(251, 41%, 46%)',
},
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 47%)' },
down: {
DEFAULT: 'hsl(0, 67%, 48%)',
dark: 'hsl(0, 67%, 38%)',
muted: 'hsl(0, 27%, 38%)',
},
up: {
DEFAULT: 'hsl(111, 47%, 53%)',
dark: 'hsl(111, 47%, 43%)',
muted: 'hsl(111, 7%, 43%)',
},
error: 'hsl(0, 67%, 48%)',
success: 'hsl(111, 47%, 53%)',
warning: 'hsl(33, 100%, 57%)',
'bkg-1': 'hsl(0, 0%, 99%)',
'bkg-2': 'hsl(0, 0%, 94%)',
'bkg-3': 'hsl(0, 0%, 89%)',
'bkg-4': 'hsl(0, 0%, 84%)',
'fgd-1': 'hsl(188, 71%, 8%)',
'fgd-2': 'hsl(188, 71%, 18%)',
'fgd-3': 'hsl(188, 71%, 28%)',
'fgd-4': 'hsl(188, 71%, 38%)',
},
'dark-theme': {
yellow: {
DEFAULT: '#F2C94C',
dark: '#E4AF11',
active: {
DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)',
},
red: { DEFAULT: '#CC2929', dark: '#AA2222', muted: '#571e20' },
green: { DEFAULT: '#5EBF4D', dark: '#4BA53B', muted: '#365D31' },
orange: { DEFAULT: '#FF9C24' },
'bkg-1': '#101012',
'bkg-2': '#1B1B1F',
'bkg-3': '#27272B',
'bkg-4': '#38383D',
'fgd-1': '#D1D1D1',
'fgd-2': '#C8C8C8',
'fgd-3': '#B3B3B3',
'fgd-4': '#878787',
button: '#5B48AD',
'button-hover': '#443681',
button: {
DEFAULT: 'hsl(251, 41%, 48%)',
hover: 'hsl(251, 41%, 38%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
down: {
DEFAULT: 'hsl(0, 67%, 48%)',
dark: 'hsl(0, 67%, 38%)',
muted: 'hsl(0, 27%, 38%)',
},
up: {
DEFAULT: 'hsl(111, 47%, 53%)',
dark: 'hsl(111, 47%, 43%)',
muted: 'hsl(111, 7%, 43%)',
},
error: 'hsl(0, 67%, 48%)',
success: 'hsl(111, 47%, 53%)',
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%)',
},
'mango-theme': {
yellow: {
DEFAULT: '#F2C94C',
dark: '#E4AF11',
'medium-theme': {
active: {
DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)',
},
red: { DEFAULT: '#F84638', dark: '#C7251A', muted: '#6d2832' },
green: { DEFAULT: '#A6CD03', dark: '#84A21C', muted: '#49601b' },
orange: { DEFAULT: '#FF9C24' },
'bkg-1': '#1C1924', // '#141026',
'bkg-2': '#252232', // '#1D1832',
'bkg-3': '#302B40', // '#2A2440',
'bkg-4': '#383544', // '#37324D',
'fgd-1': '#E5E3EC',
'fgd-2': '#D2CEDE',
'fgd-3': '#C1BED3',
'fgd-4': '#7E7A90',
button: '#5B48AD',
'button-hover': '#443681',
button: {
DEFAULT: 'hsl(251, 35%, 38%)',
hover: 'hsl(251, 35%, 28%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
down: {
DEFAULT: 'hsl(0, 67%, 48%)',
dark: 'hsl(0, 67%, 38%)',
muted: 'hsl(0, 27%, 38%)',
},
up: {
DEFAULT: 'hsl(111, 47%, 53%)',
dark: 'hsl(111, 47%, 43%)',
muted: 'hsl(111, 7%, 43%)',
},
error: 'hsl(0, 67%, 48%)',
success: 'hsl(111, 47%, 53%)',
warning: 'hsl(45, 86%, 62%)',
'bkg-1': 'hsl(240, 6%, 12%)',
'bkg-2': 'hsl(240, 6%, 17%)',
'bkg-3': 'hsl(240, 6%, 22%)',
'bkg-4': 'hsl(240, 6%, 27%)',
'fgd-1': 'hsl(0, 0%, 80%)',
'fgd-2': 'hsl(0, 0%, 70%)',
'fgd-3': 'hsl(0, 0%, 60%)',
'fgd-4': 'hsl(0, 0%, 50%)',
},
'ocean-theme': {
active: {
DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 52%)',
},
button: {
DEFAULT: 'hsl(222, 74%, 36%)',
hover: 'hsl(222, 74%, 26%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 52%)' },
down: {
DEFAULT: 'hsl(3, 59%, 56%)',
dark: 'hsl(3, 59%, 46%)',
muted: 'hsl(3, 19%, 46%)',
},
up: {
DEFAULT: 'hsl(165, 82%, 45%)',
dark: 'hsl(165, 82%, 35%)',
muted: 'hsl(165, 42%, 35%)',
},
error: 'hsl(3, 59%, 56%)',
success: 'hsl(165, 82%, 45%)',
warning: 'hsl(45, 86%, 62%)',
'bkg-1': 'hsl(222, 74%, 21%)',
'bkg-2': 'hsl(222, 74%, 26%)',
'bkg-3': 'hsl(222, 74%, 31%)',
'bkg-4': 'hsl(222, 74%, 36%)',
'fgd-1': 'hsl(220, 71%, 96%)',
'fgd-2': 'hsl(220, 71%, 86%)',
'fgd-3': 'hsl(220, 71%, 76%)',
'fgd-4': 'hsl(220, 71%, 66%)',
},
'smoothy-theme': {
active: {
DEFAULT: 'hsl(321, 100%, 48%)',
dark: 'hsl(321, 100%, 38%)',
},
button: {
DEFAULT: 'hsl(284, 100%, 56%)',
hover: 'hsl(284, 100%, 46%)',
},
link: { DEFAULT: 'hsl(21, 100%, 56%)', hover: 'hsl(21, 100%, 46%)' },
down: {
DEFAULT: 'hsl(0, 100%, 56%)',
dark: 'hsl(0, 100%, 46%)',
muted: 'hsl(0, 60%, 46%)',
},
up: {
DEFAULT: 'hsl(110, 73%, 40%)',
dark: 'hsl(110, 73%, 30%)',
muted: 'hsl(110, 33%, 30%)',
},
error: 'hsl(0, 100%, 56%)',
success: 'hsl(110, 73%, 40%)',
warning: 'hsl(21, 100%, 56%)',
'bkg-1': 'hsl(45, 100%, 96%)',
'bkg-2': 'hsl(45, 100%, 91%)',
'bkg-3': 'hsl(45, 100%, 86%)',
'bkg-4': 'hsl(45, 100%, 81%)',
'fgd-1': 'hsl(45, 100%, 4%)',
'fgd-2': 'hsl(45, 100%, 14%)',
'fgd-3': 'hsl(45, 100%, 24%)',
'fgd-4': 'hsl(45, 100%, 34%)',
},
'jungle-theme': {
active: {
DEFAULT: 'hsl(120, 100%, 73%)',
dark: 'hsl(120, 100%, 63%)',
},
button: {
DEFAULT: 'hsl(21, 15%, 38%)',
hover: 'hsl(21, 15%, 28%)',
},
link: { DEFAULT: 'hsl(31, 100%, 57%)', hover: 'hsl(31, 100%, 47%)' },
down: {
DEFAULT: 'hsl(0, 100%, 73%)',
dark: 'hsl(0, 100%, 63%)',
muted: 'hsl(0, 60%, 63%)',
},
up: {
DEFAULT: 'hsl(120, 50%, 53%)',
dark: 'hsl(120, 50%, 43%)',
muted: 'hsl(120, 10%, 43%)',
},
error: 'hsl(0, 100%, 73%)',
success: 'hsl(120, 50%, 53%)',
warning: 'hsl(31, 80%, 57%)',
'bkg-1': 'hsl(120, 18%, 12%)',
'bkg-2': 'hsl(120, 18%, 17%)',
'bkg-3': 'hsl(120, 18%, 22%)',
'bkg-4': 'hsl(120, 18%, 27%)',
'fgd-1': 'hsl(120, 20%, 93%)',
'fgd-2': 'hsl(120, 20%, 83%)',
'fgd-3': 'hsl(120, 20%, 73%)',
'fgd-4': 'hsl(120, 20%, 63%)',
},
'th-bkg-1': 'var(--bkg-1)',
'th-bkg-2': 'var(--bkg-2)',
@ -85,17 +254,22 @@ module.exports = {
'th-fgd-2': 'var(--fgd-2)',
'th-fgd-3': 'var(--fgd-3)',
'th-fgd-4': 'var(--fgd-4)',
'th-primary': 'var(--primary)',
'th-primary-dark': 'var(--primary-dark)',
'th-red': 'var(--red)',
'th-red-dark': 'var(--red-dark)',
'th-red-muted': 'var(--red-muted)',
'th-green': 'var(--green)',
'th-green-dark': 'var(--green-dark)',
'th-green-muted': 'var(--green-muted)',
'th-orange': 'var(--orange)',
'th-active': 'var(--active)',
'th-active-dark': 'var(--active-dark)',
'th-error': 'var(--error)',
'th-success': 'var(--success)',
'th-warning': 'var(--warning)',
'th-down': 'var(--down)',
'th-down-dark': 'var(--down-dark)',
'th-down-muted': 'var(--down-muted)',
'th-up': 'var(--up)',
'th-up-dark': 'var(--up-dark)',
'th-up-muted': 'var(--up-muted)',
'th-link': 'var(--link)',
'th-link-hover': 'var(--link-hover)',
'th-button': 'var(--button)',
'th-button-hover': 'var(--button-hover)',
'th-warning': 'var(--warning)',
},
fontSize: {
xxs: '.65rem',