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

Merge remote-tracking branch 'origin/ui-styling-4' into main

This commit is contained in:
Tyler Shipe 2021-04-16 10:09:42 -04:00
parent 9e9eb1d7f3 06ae85f26f
commit 2f48b272d3
5 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Input.tsx
View File

@ -41,9 +41,9 @@ const Input = ({
type={type}
value={value}
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' : ''
} ${type === 'number' ? 'text-right' : ''} ${
} ${type === 'number' ? 'text-right mr-1' : ''} ${
value.toString().length > 9 ? 'text-xs' : ''
}`}
disabled={disabled}

37
components/TradeForm.tsx
View File

@ -208,6 +208,9 @@ export default function TradeForm() {
}
}
const disabled =
(!price && tradeType === 'Limit') || !baseSize || !connected || submitting
return (
<FloatingElement>
<div>
@ -217,7 +220,7 @@ export default function TradeForm() {
className={`flex-1 outline-none focus:outline-none`}
>
<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' &&
`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`}
>
<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' &&
`text-th-red hover:text-th-red border-b-2 border-th-red`
@ -296,29 +299,27 @@ export default function TradeForm() {
{ipAllowed ? (
side === 'buy' ? (
<Button
disabled={
(!price && tradeType === 'Limit') ||
!baseSize ||
!connected ||
submitting
}
disabled={disabled}
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
disabled={
(!price && tradeType === 'Limit') ||
!baseSize ||
!connected ||
submitting
}
disabled={disabled}
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>
)
) : (

2
components/UserInfo.tsx
View File

@ -42,7 +42,7 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
${
activeTab === tabName
? `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`
}
`}
>

18
styles/index.css
View File

@ -4,8 +4,10 @@
:root {
--primary: theme('colors.light-theme.orange');
--red: theme('colors.light-theme.red');
--green: theme('colors.light-theme.green');
--red: theme('colors.light-theme.red.DEFAULT');
--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-2: theme('colors.light-theme["bkg-2"]');
--bkg-3: theme('colors.light-theme["bkg-3"]');
@ -17,8 +19,10 @@
[data-theme='Dark'] {
--primary: theme('colors.dark-theme.orange');
--red: theme('colors.dark-theme.red');
--green: theme('colors.dark-theme.green');
--red: theme('colors.dark-theme.red.DEFAULT');
--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-2: theme('colors.dark-theme["bkg-2"]');
--bkg-3: theme('colors.dark-theme["bkg-3"]');
@ -30,8 +34,10 @@
[data-theme='Mango'] {
--primary: theme('colors.mango-theme.yellow');
--red: theme('colors.mango-theme.red');
--green: theme('colors.mango-theme.green');
--red: theme('colors.mango-theme.red.DEFAULT');
--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-2: theme('colors.mango-theme["bkg-2"]');
--bkg-3: theme('colors.mango-theme["bkg-3"]');

14
tailwind.config.js
View File

@ -49,8 +49,8 @@ module.exports = {
},
'light-theme': {
orange: '#FF9C24',
red: '#CC2929',
green: '#5EBF4D',
red: { DEFAULT: '#CC2929', dark: '#AA2222' },
green: { DEFAULT: '#5EBF4D', dark: '#4BA53B' },
'bkg-1': '#f7f7f7',
'bkg-2': '#FFFFFF',
'bkg-3': '#EDEDED',
@ -61,8 +61,8 @@ module.exports = {
},
'dark-theme': {
orange: '#F2C94C',
red: '#CC2929',
green: '#5EBF4D',
red: { DEFAULT: '#CC2929', dark: '#AA2222' },
green: { DEFAULT: '#5EBF4D', dark: '#4BA53B' },
'bkg-1': '#1C1C1C',
'bkg-2': '#2B2B2B',
'bkg-3': '#424242',
@ -73,8 +73,8 @@ module.exports = {
},
'mango-theme': {
yellow: '#F2C94C',
red: '#E54033',
green: '#AFD803',
red: { DEFAULT: '#E54033', dark: '#C7251A' },
green: { DEFAULT: '#AFD803', dark: '#91B503' },
'bkg-1': '#141026',
'bkg-2': '#1D1832',
'bkg-3': '#322E47',
@ -92,7 +92,9 @@ module.exports = {
'th-fgd-4': 'var(--fgd-4)',
'th-primary': 'var(--primary)',
'th-red': 'var(--red)',
'th-red-dark': 'var(--red-dark)',
'th-green': 'var(--green)',
'th-green-dark': 'var(--green-dark)',
},
},
},