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

use new theme vars

This commit is contained in:
saml33 2022-12-01 14:46:37 +11:00
parent 209490752c
commit 4af775a1c3
9 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/SolanaTps.tsx
View File

@ -49,8 +49,8 @@ const SolanaTps = () => {
tps < tpsWarningThreshold
? 'bg-th-warning'
: tps < tpsAlertThreshold
? 'bg-th-down'
: 'bg-th-up'
? 'bg-th-error'
: 'bg-th-success'
}`}
/>
<div
@ -58,8 +58,8 @@ const SolanaTps = () => {
tps < tpsWarningThreshold
? 'bg-th-warning'
: tps < tpsAlertThreshold
? 'bg-th-down'
: 'bg-th-up'
? 'bg-th-error'
: 'bg-th-success'
}`}
/>
</div>

10
components/UserSetup.tsx
View File

@ -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-up" />
<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-up" />
<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-up" />
<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-up" />
<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-up" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
<p className="text-base">{t('onboarding:bullet-4')}</p>
</div>
</div>

4
components/account/HealthHeart.tsx
View File

@ -19,8 +19,8 @@ const HealthHeart = ({
? health > 15 && health < 50
? 'text-th-warning'
: health >= 50
? 'text-th-up'
: 'text-th-down'
? 'text-th-success'
: 'text-th-error'
: 'text-th-fgd-4'
}
style={styles}

6
components/modals/MangoAccountsListModal.tsx
View File

@ -108,8 +108,8 @@ const MangoAccountsListModal = ({
? maintHealth > 15 && maintHealth < 50
? 'text-th-warning'
: maintHealth >= 50
? 'text-th-up'
: 'text-th-down'
? '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-up">
<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>
) : (

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-up" />
<CheckCircleIcon className="h-5 w-5 text-th-success" />
) : null}
</button>
))}

14
components/shared/InlineNotification.tsx
View File

@ -26,30 +26,30 @@ const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
!hideBorder
? `border text-th-fgd-3 ${
type === 'error'
? 'border-th-down'
? 'border-th-error'
: type === 'success'
? 'border-th-up'
? 'border-th-success'
: type === 'info'
? 'border-th-bkg-4'
: 'border-th-warning'
}`
: type === 'error'
? 'text-th-down'
? 'text-th-error'
: type === 'success'
? 'text-th-up'
? 'text-th-success'
: type === 'info'
? 'text-th-bkg-4'
: '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-down" />
<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-up" />
<CheckCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-success" />
) : null}
{type === 'warning' ? (
<ExclamationTriangleIcon className="text-th-warning mr-1.5 h-5 w-5 flex-shrink-0" />
<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" />

10
components/shared/Notification.tsx
View File

@ -224,22 +224,22 @@ 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-up'
? 'border-th-success'
: type === 'error'
? 'border-th-down'
? '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-up`} />
<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-down`} />
<XCircleIcon className={`h-6 w-6 text-th-error`} />
)}
{type === 'confirm' && (
<Loading className="mr-0.5 h-5 w-5 text-th-active" />
@ -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>

2
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"

34
tailwind.config.js
View File

@ -25,7 +25,7 @@ module.exports = {
'mango-theme': {
active: {
DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 42%)',
dark: 'hsl(45, 86%, 52%)',
},
button: {
DEFAULT: 'hsl(251, 41%, 48%)',
@ -34,13 +34,13 @@ module.exports = {
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 37%)' },
down: {
DEFAULT: 'hsl(4, 93%, 60%)',
dark: 'hsl(4, 93%, 40%)',
muted: 'hsl(4, 53%, 40%)',
dark: 'hsl(4, 93%, 50%)',
muted: 'hsl(4, 53%, 50%)',
},
up: {
DEFAULT: 'hsl(72, 97%, 41%)',
dark: 'hsl(72, 97%, 21%)',
muted: 'hsl(72, 57%, 21%)',
dark: 'hsl(72, 97%, 31%)',
muted: 'hsl(72, 57%, 31%)',
},
error: 'hsl(4, 93%, 60%)',
success: 'hsl(72, 97%, 41%)',
@ -57,22 +57,22 @@ module.exports = {
'light-theme': {
active: {
DEFAULT: 'hsl(33, 100%, 57%)',
dark: 'hsl(33, 100%, 37%)',
dark: 'hsl(33, 100%, 47%)',
},
button: {
DEFAULT: 'hsl(251, 41%, 56%)',
hover: 'hsl(251, 41%, 36%)',
hover: 'hsl(251, 41%, 46%)',
},
link: { DEFAULT: 'hsl(33, 100%, 57%)', hover: 'hsl(33, 100%, 37%)' },
down: {
DEFAULT: 'hsl(0, 67%, 48%)',
dark: 'hsl(0, 67%, 28%)',
muted: 'hsl(0, 27%, 28%)',
dark: 'hsl(0, 67%, 38%)',
muted: 'hsl(0, 27%, 38%)',
},
up: {
DEFAULT: 'hsl(111, 47%, 53%)',
dark: 'hsl(111, 47%, 33%)',
muted: 'hsl(111, 7%, 33%)',
dark: 'hsl(111, 47%, 43%)',
muted: 'hsl(111, 7%, 43%)',
},
error: 'hsl(0, 67%, 48%)',
success: 'hsl(111, 47%, 53%)',
@ -89,22 +89,22 @@ module.exports = {
'dark-theme': {
active: {
DEFAULT: 'hsl(45, 86%, 62%)',
dark: 'hsl(45, 86%, 42%)',
dark: 'hsl(45, 86%, 52%)',
},
button: {
DEFAULT: 'hsl(251, 41%, 48%)',
hover: 'hsl(251, 41%, 28%)',
hover: 'hsl(251, 41%, 38%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 42%)' },
down: {
DEFAULT: 'hsl(0, 67%, 48%)',
dark: 'hsl(0, 67%, 28%)',
muted: 'hsl(0, 27%, 28%)',
dark: 'hsl(0, 67%, 38%)',
muted: 'hsl(0, 27%, 38%)',
},
up: {
DEFAULT: 'hsl(111, 47%, 53%)',
dark: 'hsl(111, 47%, 33%)',
muted: 'hsl(111, 7%, 33%)',
dark: 'hsl(111, 47%, 43%)',
muted: 'hsl(111, 7%, 43%)',
},
error: 'hsl(0, 67%, 48%)',
success: 'hsl(111, 47%, 53%)',