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 tps < tpsWarningThreshold
? 'bg-th-warning' ? 'bg-th-warning'
: tps < tpsAlertThreshold : tps < tpsAlertThreshold
? 'bg-th-down' ? 'bg-th-error'
: 'bg-th-up' : 'bg-th-success'
}`} }`}
/> />
<div <div
@ -58,8 +58,8 @@ const SolanaTps = () => {
tps < tpsWarningThreshold tps < tpsWarningThreshold
? 'bg-th-warning' ? 'bg-th-warning'
: tps < tpsAlertThreshold : tps < tpsAlertThreshold
? 'bg-th-down' ? 'bg-th-error'
: 'bg-th-up' : 'bg-th-success'
}`} }`}
/> />
</div> </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> <p className="mb-4 text-base">{t('onboarding:intro-desc')}</p>
<div className="mb-6 space-y-2 py-3"> <div className="mb-6 space-y-2 py-3">
<div className="flex items-center space-x-2"> <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> <p className="text-base">{t('onboarding:bullet-1')}</p>
</div> </div>
{/* <div className="flex items-center space-x-2"> {/* <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> <p className="text-base">Deeply liquid markets</p>
</div> */} </div> */}
<div className="flex items-center space-x-2"> <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> <p className="text-base">{t('onboarding:bullet-2')}</p>
</div> </div>
<div className="flex items-center space-x-2"> <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> <p className="text-base">{t('onboarding:bullet-3')}</p>
</div> </div>
<div className="flex items-center space-x-2"> <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> <p className="text-base">{t('onboarding:bullet-4')}</p>
</div> </div>
</div> </div>

4
components/account/HealthHeart.tsx
View File

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

6
components/modals/MangoAccountsListModal.tsx
View File

@ -108,8 +108,8 @@ const MangoAccountsListModal = ({
? maintHealth > 15 && maintHealth < 50 ? maintHealth > 15 && maintHealth < 50
? 'text-th-warning' ? 'text-th-warning'
: maintHealth >= 50 : maintHealth >= 50
? 'text-th-up' ? 'text-th-success'
: 'text-th-down' : 'text-th-error'
: 'text-th-fgd-4' : 'text-th-fgd-4'
}`} }`}
> >
@ -120,7 +120,7 @@ const MangoAccountsListModal = ({
</div> </div>
{acc.publicKey.toString() === {acc.publicKey.toString() ===
mangoAccount?.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" /> <CheckIcon className="h-4 w-4 text-th-bkg-1" />
</div> </div>
) : ( ) : (

2
components/settings/PreferredExplorerSettings.tsx
View File

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

14
components/shared/InlineNotification.tsx
View File

@ -26,30 +26,30 @@ const InlineNotification: FunctionComponent<InlineNotificationProps> = ({
!hideBorder !hideBorder
? `border text-th-fgd-3 ${ ? `border text-th-fgd-3 ${
type === 'error' type === 'error'
? 'border-th-down' ? 'border-th-error'
: type === 'success' : type === 'success'
? 'border-th-up' ? 'border-th-success'
: type === 'info' : type === 'info'
? 'border-th-bkg-4' ? 'border-th-bkg-4'
: 'border-th-warning' : 'border-th-warning'
}` }`
: type === 'error' : type === 'error'
? 'text-th-down' ? 'text-th-error'
: type === 'success' : type === 'success'
? 'text-th-up' ? 'text-th-success'
: type === 'info' : type === 'info'
? 'text-th-bkg-4' ? 'text-th-bkg-4'
: 'text-th-warning' : 'text-th-warning'
} flex items-center rounded-md ${!hidePadding ? 'p-2' : ''}`} } flex items-center rounded-md ${!hidePadding ? 'p-2' : ''}`}
> >
{type === 'error' ? ( {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} ) : null}
{type === 'success' ? ( {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} ) : null}
{type === 'warning' ? ( {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} ) : null}
{type === 'info' ? ( {type === 'info' ? (
<InformationCircleIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-th-fgd-4" /> <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 <div
className={`pointer-events-auto w-full rounded-md border bg-th-bkg-2 shadow-lg md:w-auto ${ className={`pointer-events-auto w-full rounded-md border bg-th-bkg-2 shadow-lg md:w-auto ${
type === 'success' type === 'success'
? 'border-th-up' ? 'border-th-success'
: type === 'error' : type === 'error'
? 'border-th-down' ? 'border-th-error'
: 'border-th-bkg-4' : 'border-th-bkg-4'
}`} }`}
> >
<div className={`relative flex w-full items-center p-3.5 md:w-96`}> <div className={`relative flex w-full items-center p-3.5 md:w-96`}>
<div className={`mr-1 flex-shrink-0`}> <div className={`mr-1 flex-shrink-0`}>
{type === 'success' ? ( {type === 'success' ? (
<CheckCircleIcon className={`h-6 w-6 text-th-up`} /> <CheckCircleIcon className={`h-6 w-6 text-th-success`} />
) : null} ) : null}
{type === 'info' && ( {type === 'info' && (
<InformationCircleIcon className={`h-6 w-6 text-th-fgd-3`} /> <InformationCircleIcon className={`h-6 w-6 text-th-fgd-3`} />
)} )}
{type === 'error' && ( {type === 'error' && (
<XCircleIcon className={`h-6 w-6 text-th-down`} /> <XCircleIcon className={`h-6 w-6 text-th-error`} />
)} )}
{type === 'confirm' && ( {type === 'confirm' && (
<Loading className="mr-0.5 h-5 w-5 text-th-active" /> <Loading className="mr-0.5 h-5 w-5 text-th-active" />
@ -266,7 +266,7 @@ const Notification = ({ notification }: { notification: Notification }) => {
? txid ? txid
: `${txid.slice(0, 14)}...${txid.slice(txid.length - 14)}`} : `${txid.slice(0, 14)}...${txid.slice(txid.length - 14)}`}
</div> </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> </a>
) : null} ) : null}
</div> </div>

2
components/trade/FavoriteMarketsBar.tsx
View File

@ -20,7 +20,7 @@ const FavoriteMarketsBar = () => {
return !isMobile ? ( return !isMobile ? (
<Transition <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} show={!!favoriteMarkets.length}
enter="transition-all ease-in duration-200" enter="transition-all ease-in duration-200"
enterFrom="opacity-0 h-0" enterFrom="opacity-0 h-0"

34
tailwind.config.js
View File

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