Merge remote-tracking branch 'origin/ui-styling-4' into main
This commit is contained in:
commit
2f48b272d3
|
@ -41,9 +41,9 @@ const Input = ({
|
||||||
type={type}
|
type={type}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
className={`bg-transparent font-light tracking-wider w-full h-full focus:outline-none ${
|
className={`bg-transparent tracking-wider w-full focus:outline-none ${
|
||||||
disabled ? 'opacity-20 cursor-not-allowed' : ''
|
disabled ? 'opacity-20 cursor-not-allowed' : ''
|
||||||
} ${type === 'number' ? 'text-right' : ''} ${
|
} ${type === 'number' ? 'text-right mr-1' : ''} ${
|
||||||
value.toString().length > 9 ? 'text-xs' : ''
|
value.toString().length > 9 ? 'text-xs' : ''
|
||||||
}`}
|
}`}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
|
|
@ -208,6 +208,9 @@ export default function TradeForm() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const disabled =
|
||||||
|
(!price && tradeType === 'Limit') || !baseSize || !connected || submitting
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FloatingElement>
|
<FloatingElement>
|
||||||
<div>
|
<div>
|
||||||
|
@ -217,7 +220,7 @@ export default function TradeForm() {
|
||||||
className={`flex-1 outline-none focus:outline-none`}
|
className={`flex-1 outline-none focus:outline-none`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
|
className={`hover:text-th-green pb-1 transition-colors duration-500
|
||||||
${
|
${
|
||||||
side === 'buy' &&
|
side === 'buy' &&
|
||||||
`text-th-green hover:text-th-green border-b-2 border-th-green`
|
`text-th-green hover:text-th-green border-b-2 border-th-green`
|
||||||
|
@ -231,7 +234,7 @@ export default function TradeForm() {
|
||||||
className={`flex-1 outline-none focus:outline-none`}
|
className={`flex-1 outline-none focus:outline-none`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
|
className={`hover:text-th-red pb-1 transition-colors duration-500
|
||||||
${
|
${
|
||||||
side === 'sell' &&
|
side === 'sell' &&
|
||||||
`text-th-red hover:text-th-red border-b-2 border-th-red`
|
`text-th-red hover:text-th-red border-b-2 border-th-red`
|
||||||
|
@ -296,29 +299,27 @@ export default function TradeForm() {
|
||||||
{ipAllowed ? (
|
{ipAllowed ? (
|
||||||
side === 'buy' ? (
|
side === 'buy' ? (
|
||||||
<Button
|
<Button
|
||||||
disabled={
|
disabled={disabled}
|
||||||
(!price && tradeType === 'Limit') ||
|
|
||||||
!baseSize ||
|
|
||||||
!connected ||
|
|
||||||
submitting
|
|
||||||
}
|
|
||||||
onClick={onSubmit}
|
onClick={onSubmit}
|
||||||
className="rounded text-lg bg-th-green text-th-bkg-1 hover:bg-th-primary flex-grow"
|
className={`rounded text-lg ${
|
||||||
|
!disabled && 'border-th-green hover:border-th-red-green'
|
||||||
|
} text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark hover:border-th-green-dark flex-grow`}
|
||||||
>
|
>
|
||||||
{connected ? `Buy ${baseCurrency}` : 'Connect Wallet'}
|
{connected
|
||||||
|
? `Buy ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`
|
||||||
|
: 'Connect Wallet'}
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
disabled={
|
disabled={disabled}
|
||||||
(!price && tradeType === 'Limit') ||
|
|
||||||
!baseSize ||
|
|
||||||
!connected ||
|
|
||||||
submitting
|
|
||||||
}
|
|
||||||
onClick={onSubmit}
|
onClick={onSubmit}
|
||||||
className="rounded text-lg bg-th-red text-white hover:bg-th-primary flex-grow"
|
className={`rounded text-lg ${
|
||||||
|
!disabled && 'border-th-red hover:border-th-red-dark'
|
||||||
|
} text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
|
||||||
>
|
>
|
||||||
{connected ? `Sell ${baseCurrency}` : 'Connect Wallet'}
|
{connected
|
||||||
|
? `Sell ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`
|
||||||
|
: 'Connect Wallet'}
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -42,7 +42,7 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
|
||||||
${
|
${
|
||||||
activeTab === tabName
|
activeTab === tabName
|
||||||
? `border-th-primary text-th-primary`
|
? `border-th-primary text-th-primary`
|
||||||
: `border-transparent text-th-fgd-4 hover:text-th-fgd-2`
|
: `border-transparent text-th-fgd-4 hover:text-th-primary`
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
|
|
|
@ -4,8 +4,10 @@
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--primary: theme('colors.light-theme.orange');
|
--primary: theme('colors.light-theme.orange');
|
||||||
--red: theme('colors.light-theme.red');
|
--red: theme('colors.light-theme.red.DEFAULT');
|
||||||
--green: theme('colors.light-theme.green');
|
--red-dark: theme('colors.light-theme.red.dark');
|
||||||
|
--green: theme('colors.light-theme.green.DEFAULT');
|
||||||
|
--green-dark: theme('colors.light-theme.green.dark');
|
||||||
--bkg-1: theme('colors.light-theme["bkg-1"]');
|
--bkg-1: theme('colors.light-theme["bkg-1"]');
|
||||||
--bkg-2: theme('colors.light-theme["bkg-2"]');
|
--bkg-2: theme('colors.light-theme["bkg-2"]');
|
||||||
--bkg-3: theme('colors.light-theme["bkg-3"]');
|
--bkg-3: theme('colors.light-theme["bkg-3"]');
|
||||||
|
@ -17,8 +19,10 @@
|
||||||
|
|
||||||
[data-theme='Dark'] {
|
[data-theme='Dark'] {
|
||||||
--primary: theme('colors.dark-theme.orange');
|
--primary: theme('colors.dark-theme.orange');
|
||||||
--red: theme('colors.dark-theme.red');
|
--red: theme('colors.dark-theme.red.DEFAULT');
|
||||||
--green: theme('colors.dark-theme.green');
|
--red-dark: theme('colors.dark-theme.red.dark');
|
||||||
|
--green: theme('colors.dark-theme.green.DEFAULT');
|
||||||
|
--green-dark: theme('colors.dark-theme.green.dark');
|
||||||
--bkg-1: theme('colors.dark-theme["bkg-1"]');
|
--bkg-1: theme('colors.dark-theme["bkg-1"]');
|
||||||
--bkg-2: theme('colors.dark-theme["bkg-2"]');
|
--bkg-2: theme('colors.dark-theme["bkg-2"]');
|
||||||
--bkg-3: theme('colors.dark-theme["bkg-3"]');
|
--bkg-3: theme('colors.dark-theme["bkg-3"]');
|
||||||
|
@ -30,8 +34,10 @@
|
||||||
|
|
||||||
[data-theme='Mango'] {
|
[data-theme='Mango'] {
|
||||||
--primary: theme('colors.mango-theme.yellow');
|
--primary: theme('colors.mango-theme.yellow');
|
||||||
--red: theme('colors.mango-theme.red');
|
--red: theme('colors.mango-theme.red.DEFAULT');
|
||||||
--green: theme('colors.mango-theme.green');
|
--red-dark: theme('colors.mango-theme.red.dark');
|
||||||
|
--green: theme('colors.mango-theme.green.DEFAULT');
|
||||||
|
--green-dark: theme('colors.mango-theme.green.dark');
|
||||||
--bkg-1: theme('colors.mango-theme["bkg-1"]');
|
--bkg-1: theme('colors.mango-theme["bkg-1"]');
|
||||||
--bkg-2: theme('colors.mango-theme["bkg-2"]');
|
--bkg-2: theme('colors.mango-theme["bkg-2"]');
|
||||||
--bkg-3: theme('colors.mango-theme["bkg-3"]');
|
--bkg-3: theme('colors.mango-theme["bkg-3"]');
|
||||||
|
|
|
@ -49,8 +49,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
'light-theme': {
|
'light-theme': {
|
||||||
orange: '#FF9C24',
|
orange: '#FF9C24',
|
||||||
red: '#CC2929',
|
red: { DEFAULT: '#CC2929', dark: '#AA2222' },
|
||||||
green: '#5EBF4D',
|
green: { DEFAULT: '#5EBF4D', dark: '#4BA53B' },
|
||||||
'bkg-1': '#f7f7f7',
|
'bkg-1': '#f7f7f7',
|
||||||
'bkg-2': '#FFFFFF',
|
'bkg-2': '#FFFFFF',
|
||||||
'bkg-3': '#EDEDED',
|
'bkg-3': '#EDEDED',
|
||||||
|
@ -61,8 +61,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
'dark-theme': {
|
'dark-theme': {
|
||||||
orange: '#F2C94C',
|
orange: '#F2C94C',
|
||||||
red: '#CC2929',
|
red: { DEFAULT: '#CC2929', dark: '#AA2222' },
|
||||||
green: '#5EBF4D',
|
green: { DEFAULT: '#5EBF4D', dark: '#4BA53B' },
|
||||||
'bkg-1': '#1C1C1C',
|
'bkg-1': '#1C1C1C',
|
||||||
'bkg-2': '#2B2B2B',
|
'bkg-2': '#2B2B2B',
|
||||||
'bkg-3': '#424242',
|
'bkg-3': '#424242',
|
||||||
|
@ -73,8 +73,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
'mango-theme': {
|
'mango-theme': {
|
||||||
yellow: '#F2C94C',
|
yellow: '#F2C94C',
|
||||||
red: '#E54033',
|
red: { DEFAULT: '#E54033', dark: '#C7251A' },
|
||||||
green: '#AFD803',
|
green: { DEFAULT: '#AFD803', dark: '#91B503' },
|
||||||
'bkg-1': '#141026',
|
'bkg-1': '#141026',
|
||||||
'bkg-2': '#1D1832',
|
'bkg-2': '#1D1832',
|
||||||
'bkg-3': '#322E47',
|
'bkg-3': '#322E47',
|
||||||
|
@ -92,7 +92,9 @@ module.exports = {
|
||||||
'th-fgd-4': 'var(--fgd-4)',
|
'th-fgd-4': 'var(--fgd-4)',
|
||||||
'th-primary': 'var(--primary)',
|
'th-primary': 'var(--primary)',
|
||||||
'th-red': 'var(--red)',
|
'th-red': 'var(--red)',
|
||||||
|
'th-red-dark': 'var(--red-dark)',
|
||||||
'th-green': 'var(--green)',
|
'th-green': 'var(--green)',
|
||||||
|
'th-green-dark': 'var(--green-dark)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue