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 branch 'ui-styling-2' into main

This commit is contained in:
Tyler Shipe 2021-04-13 10:42:42 -04:00
parent 56c0372a7f f5cf996c41
commit e0370f4b0f
20 changed files with 201 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Button.tsx
View File

@ -17,7 +17,7 @@ const Button: FunctionComponent<ButtonProps> = ({
<button
onClick={onClick}
disabled={disabled}
className={`${className} px-8 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md
className={`${className} px-6 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md
active:border-mango-yellow hover:bg-th-bkg-3 focus:outline-none disabled:bg-th-bkg-2
disabled:text-th-fgd-4 disabled:cursor-not-allowed`}
{...props}

2
components/FeeDiscountsTable.tsx
View File

@ -59,7 +59,7 @@ const FeeDiscountsTable = () => {
</div>
</div>
) : (
<Button disabled>Connect wallet to deposit SRM</Button>
<Button disabled>Connect Wallet</Button>
)}
</div>
{showDeposit && (

4
components/Input.tsx
View File

@ -24,7 +24,7 @@ const Input = ({
} ${className}`}
>
{prefix ? (
<div className="border-r border-th-fgd-4 bg-th-bkg-2 p-2 rounded rounded-r-none">
<div className="border-r border-th-fgd-4 bg-th-bkg-2 p-2 rounded rounded-r-none w-14 text-right">
{prefix}
</div>
) : null}
@ -33,7 +33,7 @@ const Input = ({
type={type}
value={value}
onChange={onChange}
className={`bg-transparent w-full font-light focus:outline-none ${
className={`bg-transparent w-full focus:outline-none ${
disabled && 'opacity-20 cursor-not-allowed'
} ${type === 'number' ? 'text-right' : ''}`}
disabled={disabled}

29
components/MangoIcon.jsx Normal file
View File

@ -0,0 +1,29 @@
const MangoIcon = ({ className }) => {
return (
<svg
className={className}
width="14"
height="20"
viewBox="0 0 22 29"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.3612 4.7088L19.3624 4.70878L19.3954 4.68752C15.1331 -2.5831 9.55993 3.14112 9.55993 3.14112L9.5679 3.15513L9.56692 3.15538C12.7718 8.77426 18.8625 5.02924 19.3612 4.7088Z"
stroke-width="2.5"
stroke-linejoin="round"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.4268 8.60034C11.4416 9.12103 12.5521 9.29944 13.6147 9.29636C14.2321 9.86347 14.7458 10.5296 15.2285 11.2136C15.4286 11.4993 15.6091 11.7982 15.7688 12.1084C16.1378 12.8191 16.4093 13.5711 16.6839 14.332C16.7644 14.555 16.8454 14.7792 16.929 15.003C16.9552 15.0988 16.9826 15.1946 17.0111 15.2905L17.0126 15.2902C17.4368 16.7451 18.0562 18.2994 18.8862 19.5826C19.1607 20.0042 19.4674 20.4037 19.8051 20.7767C19.8715 20.8486 19.9395 20.9198 20.0076 20.9911C20.3255 21.3241 20.6457 21.6596 20.8272 22.0792C21.0531 22.6022 21.0358 23.2037 20.8999 23.7571C20.2586 26.3656 17.7466 27.0509 15.3459 27.1141L15.3471 27.1111C14.447 27.1291 13.5531 27.062 12.7604 26.9808C12.7604 26.9808 8.93745 26.5851 5.69698 24.216L5.59239 24.1382C5.21415 23.8564 4.85332 23.5518 4.51186 23.2263C3.6036 22.3594 2.79544 21.3762 2.17743 20.2968C2.1801 20.2941 2.18277 20.2915 2.18543 20.2888L2.18982 20.2844C2.11668 20.1527 2.04656 20.0198 1.97946 19.8855C1.38159 18.6889 1.01722 17.3863 1.00072 16.0018C0.9726 13.6787 1.76736 11.2996 3.27803 9.57468L3.27642 9.57041C4.09436 8.67445 5.11672 7.97059 6.327 7.56987C7.08575 7.31635 7.8823 7.19462 8.68213 7.20997C9.16883 7.78148 9.76147 8.25316 10.4268 8.60034Z"
stroke-width="2.5"
stroke-linejoin="round"
/>
</svg>
)
}
export default MangoIcon

43
components/MarginBalances.tsx
View File

@ -58,16 +58,16 @@ export default function MarginStats() {
<table className={`min-w-full`}>
<thead>
<tr className={`text-center text-th-fgd-4 mb-2`}>
<th scope="col" className={`flex-auto font-light`}>
<th scope="col" className={`flex-auto font-normal`}>
Assets
</th>
<th scope="col" className={`flex-auto font-light`}>
<th scope="col" className={`flex-auto font-normal`}>
Deposits
</th>
<th scope="col" className={`flex-auto font-light`}>
<th scope="col" className={`flex-auto font-normal`}>
Borrows
</th>
<th scope="col" className={`flex-auto font-light`}>
<th scope="col" className={`flex-auto font-normal`}>
Interest (APY)
</th>
</tr>
@ -104,7 +104,7 @@ export default function MarginStats() {
+{(selectedMangoGroup.getDepositRate(i) * 100).toFixed(2)}
%
</span>
<span>{' / '}</span>
<span className={`text-th-fgd-4`}>{' / '}</span>
<span className={`text-th-red`}>
-{(selectedMangoGroup.getBorrowRate(i) * 100).toFixed(2)}%
</span>
@ -114,24 +114,21 @@ export default function MarginStats() {
</tbody>
</table>
) : null}
<div className={`flex justify-around items-center mt-4`}>
<div>
<Button
onClick={() => setShowDepositModal(true)}
disabled={!connected}
>
<span>Deposit</span>
</Button>
</div>
<div>
<Button
onClick={() => setShowWithdrawModal(true)}
className="ml-4"
disabled={!connected}
>
<span>Withdraw</span>
</Button>
</div>
<div className={`flex justify-center items-center mt-4`}>
<Button
onClick={() => setShowDepositModal(true)}
className="w-1/2"
disabled={!connected}
>
<span>Deposit</span>
</Button>
<Button
onClick={() => setShowWithdrawModal(true)}
className="ml-4 w-1/2"
disabled={!connected}
>
<span>Withdraw</span>
</Button>
</div>
<div className={`text-center mt-4 text-th-fgd-4 tracking-wider`}>
Settle funds in the Balances tab

2
components/MarginStats.tsx
View File

@ -156,7 +156,7 @@ export default function MarginStats() {
{entry.label}
</div>
</Popover>
<div className={`text-th-fgd-1 font-light`}>
<div className={`text-th-fgd-1`}>
{entry.currency + entry.value}
{entry.unit}
</div>

2
components/MenuItem.tsx
View File

@ -8,7 +8,7 @@ const MenuItem = ({ href, children }) => {
<Link href={href} passHref>
<a
className={`block text-th-fgd-1 font-semibold items-center pl-3 pr-4 py-2
sm:inline-flex sm:ml-4 sm:px-1 sm:py-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base tracking-wider
sm:inline-flex sm:ml-4 sm:px-1 sm:py-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base tracking-wider hover:text-th-primary
${
asPath === href
? `border-th-primary`

4
components/Orderbook.tsx
View File

@ -13,7 +13,7 @@ const Line = styled.div<any>`
text-align: ${(props) => (props.invert ? 'left' : 'right')};
float: ${(props) => (props.invert ? 'left' : 'right')};
height: 100%;
filter: opacity(70%);
filter: opacity(80%);
${(props) => props['data-width'] && `width: ${props['data-width']};`}
`
@ -156,7 +156,7 @@ const OrderbookRow = React.memo<any>(
return (
<div
className={`flex mb-0.5 justify-between font-light`}
className={`flex mb-0.5 justify-between`}
ref={element}
onClick={onSizeClick}
>

10
components/RecentMarketTrades.tsx
View File

@ -34,7 +34,7 @@ export default function PublicTrades() {
return (
<FloatingElement>
<ElementTitle>Recent Market Trades</ElementTitle>
<ElementTitle>Recent Trades</ElementTitle>
<div className={`grid grid-cols-3 text-th-fgd-4 mb-2`}>
<div>Price ({quoteCurrency}) </div>
<div className={`text-right`}>Size ({baseCurrency})</div>
@ -43,11 +43,11 @@ export default function PublicTrades() {
{!!trades.length && (
<div>
{trades.map((trade: ChartTradeType, i: number) => (
<div key={i} className={`mb-2 font-light grid grid-cols-3`}>
<div key={i} className={`mb-2 grid grid-cols-3`}>
<div
style={{
color: trade.side === 'buy' ? '#AFD803' : '#E54033',
}}
className={`${
trade.side === 'buy' ? `text-th-green` : `text-th-red`
}`}
>
{market?.tickSize && !isNaN(trade.price)
? Number(trade.price).toFixed(

51
components/Select.jsx Normal file
View File

@ -0,0 +1,51 @@
import { Listbox } from '@headlessui/react'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
const Select = ({ value, onChange, options, className = '' }) => {
return (
<div className={`relative`}>
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<Listbox.Button
className={`h-full w-full bg-th-bkg-1 border border-th-fgd-4 rounded focus:outline-none focus:ring-1 focus:ring-th-primary ${className}`}
>
<div
className={`flex items-center justify-between space-x-4 pl-2 pr-1`}
>
<span>{value}</span>
{open ? (
<ChevronUpIcon className={`h-5 w-5 mr-1 text-th-primary`} />
) : (
<ChevronDownIcon className={`h-5 w-5 mr-1 text-th-primary`} />
)}
</div>
</Listbox.Button>
{open ? (
<Listbox.Options
static
className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
>
{options.map((option) => (
<Listbox.Option key={option} value={option}>
{({ selected }) => (
<div
className={`p-2 hover:bg-th-bkg-3 hover:cursor-pointer tracking-wider ${
selected && `text-th-primary`
}`}
>
{option}
</div>
)}
</Listbox.Option>
))}
</Listbox.Options>
) : null}
</>
)}
</Listbox>
</div>
)
}
export default Select

2
components/Switch.tsx
View File

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

56
components/ThemeSwitch.tsx
View File

@ -1,10 +1,13 @@
import { useEffect, useState } from 'react'
import { useTheme } from 'next-themes'
import { Listbox } from '@headlessui/react'
import { MoonIcon, SunIcon } from '@heroicons/react/outline'
import MangoIcon from './MangoIcon'
const THEMES = [
{ name: 'light', display: 'Light' },
{ name: 'dark', display: 'Dark' },
{ name: 'mango', display: 'Mango' },
{ name: 'Light', icon: <SunIcon /> },
{ name: 'Dark', icon: <MoonIcon /> },
{ name: 'Mango', icon: <MangoIcon className="stroke-current" /> },
]
const ThemeChanger = () => {
@ -17,20 +20,39 @@ const ThemeChanger = () => {
if (!mounted) return null
return (
<select
name="theme"
id="theme-select"
className={`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-th-primary focus:border-th-primary rounded-md`}
onChange={(e) => setTheme(e.currentTarget.value)}
value={theme}
>
<option value="">Select Theme</option>
{THEMES.map((t) => (
<option key={t.name.toLowerCase()} value={t.name.toLowerCase()}>
{t.display}
</option>
))}
</select>
<div className={`flex relative`}>
<Listbox value={theme} onChange={(theme) => setTheme(theme)}>
{({ open }) => (
<>
<Listbox.Button
className={`bg-transparent rounded w-5 h-5 hover:text-th-primary focus:outline-none`}
>
{THEMES.filter((t) => t.name === theme).map((th) => th.icon)}
</Listbox.Button>
{open ? (
<Listbox.Options
static
className={`z-20 p-1 absolute right-0 mt-7 bg-th-bkg-3 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
>
{THEMES.map((option) => (
<Listbox.Option key={option.name} value={option.name}>
{({ selected }) => (
<div
className={`p-2 hover:bg-th-bkg-1 hover:cursor-pointer tracking-wider ${
selected && `text-th-primary`
}`}
>
{option.name}
</div>
)}
</Listbox.Option>
))}
</Listbox.Options>
) : null}
</>
)}
</Listbox>
</div>
)
}

2
components/TopBar.tsx
View File

@ -54,7 +54,7 @@ const TopBar = () => {
<div className={`hidden sm:ml-4 sm:flex sm:items-center`}>
<button
onClick={handleConnectDisconnect}
className={`border border-th-primary hover:bg-th-primary rounded-md px-4 py-2 focus:outline-none text-base text-th-primary hover:text-th-fgd-1 font-semibold`}
className={`border border-th-primary hover:bg-th-primary rounded-md px-4 py-2 focus:outline-none text-th-primary hover:text-th-fgd-1 font-semibold text-base`}
>
<div>
{connected ? (

12
components/TradeForm.tsx
View File

@ -213,7 +213,7 @@ export default function TradeForm() {
className={`flex-1 outline-none focus:outline-none`}
>
<div
className={`hover:text-th-primary pb-1
className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
${
side === 'buy' &&
`text-th-green hover:text-th-green border-b-2 border-th-green`
@ -227,7 +227,7 @@ export default function TradeForm() {
className={`flex-1 outline-none focus:outline-none`}
>
<div
className={`hover:text-th-primary pb-1
className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
${
side === 'sell' &&
`text-th-red hover:text-th-red border-b-2 border-th-red`
@ -247,7 +247,7 @@ export default function TradeForm() {
disabled={tradeType === 'Market'}
prefix={'Price'}
suffix={quoteCurrency}
className="w-3/5"
className="w-3/5 rounded-r-none"
/>
<TradeType
onChange={handleTradeTypeChange}
@ -262,7 +262,7 @@ export default function TradeForm() {
step={market?.minOrderSize || 1}
onChange={(e) => onSetBaseSize(parseFloat(e.target.value))}
value={baseSize}
className="text-right flex-grow w-3/5"
className="text-right flex-grow w-3/5 rounded-r-none"
prefix={'Size'}
suffix={baseCurrency}
/>
@ -301,7 +301,7 @@ export default function TradeForm() {
onClick={onSubmit}
className="rounded text-lg bg-th-green text-th-bkg-1 hover:bg-th-primary flex-grow"
>
{connected ? `Buy ${baseCurrency}` : 'Connect Wallet To Trade'}
{connected ? `Buy ${baseCurrency}` : 'Connect Wallet'}
</Button>
) : (
<Button
@ -314,7 +314,7 @@ export default function TradeForm() {
onClick={onSubmit}
className="rounded text-lg bg-th-red text-white hover:bg-th-primary flex-grow"
>
{connected ? `Sell ${baseCurrency}` : 'Connect Wallet To Trade'}
{connected ? `Sell ${baseCurrency}` : 'Connect Wallet'}
</Button>
)
) : (

12
components/TradeType.jsx
View File

@ -10,29 +10,29 @@ const TradeType = ({ value, onChange, className = '' }) => {
{({ open }) => (
<>
<Listbox.Button
className={`h-full w-full border-l border-th-fgd-4 focus:outline-none focus:ring-1 focus:ring-th-primary`}
className={`h-full w-full bg-th-bkg-1 border-l border-th-fgd-4 rounded rounded-l-none focus:outline-none focus:ring-1 focus:ring-th-primary`}
>
<div
className={`flex items-center justify-between space-x-4 font-light pl-2`}
className={`flex items-center justify-between space-x-4 pl-2 pr-1`}
>
<span>{value}</span>
{open ? (
<ChevronUpIcon className={`h-5 w-5 mr-1`} />
<ChevronUpIcon className={`h-5 w-5 mr-1 text-th-primary`} />
) : (
<ChevronDownIcon className={`h-5 w-5 mr-1`} />
<ChevronDownIcon className={`h-5 w-5 mr-1 text-th-primary`} />
)}
</div>
</Listbox.Button>
{open ? (
<Listbox.Options
static
className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-3 origin-top-left divide-y divide-th-fgd-4 shadow-lg outline-none`}
className={`z-20 w-full p-1 absolute left-0 mt-1 bg-th-bkg-1 origin-top-left divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
>
{TRADE_TYPES.map((type) => (
<Listbox.Option key={type} value={type}>
{({ selected }) => (
<div
className={`p-2 text-base hover:bg-th-fgd-4 hover:cursor-pointer tracking-wider font-light ${
className={`p-2 hover:bg-th-bkg-3 hover:cursor-pointer tracking-wider ${
selected && `text-th-primary`
}`}
>

36
components/TradingView/index.tsx
View File

@ -34,13 +34,6 @@ export interface ChartContainerProps {
const TVChartContainer = () => {
const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
const { theme } = useTheme()
const [currentTheme, setCurrentTheme] = useState(theme)
console.log(currentTheme)
useEffect(() => {
setCurrentTheme(theme)
}, [theme])
// @ts-ignore
const defaultProps: ChartContainerProps = {
@ -53,8 +46,8 @@ const TVChartContainer = () => {
fullscreen: false,
autosize: true,
studiesOverrides: {
'volume.volume.color.0': '#E54033',
'volume.volume.color.1': '#AFD803',
'volume.volume.color.0': theme === 'Mango' ? '#E54033' : '#CC2929',
'volume.volume.color.1': theme === 'Mango' ? '#AFD803' : '#5EBF4D',
},
}
@ -102,19 +95,26 @@ const TVChartContainer = () => {
fullscreen: defaultProps.fullscreen,
autosize: defaultProps.autosize,
studies_overrides: defaultProps.studiesOverrides,
theme: theme === 'light' ? 'Light' : 'Dark',
theme: theme === 'Light' ? 'Light' : 'Dark',
overrides: {
'paneProperties.background':
theme === 'dark' ? '#0F282D' : theme === 'light' ? '#fff' : '#1D1832',
'mainSeriesProperties.candleStyle.upColor': '#AFD803',
'mainSeriesProperties.candleStyle.downColor': '#E54033',
theme === 'Dark' ? '#2B2B2B' : theme === 'Light' ? '#fff' : '#1D1832',
'mainSeriesProperties.candleStyle.upColor':
theme === 'Mango' ? '#AFD803' : '#5EBF4D',
'mainSeriesProperties.candleStyle.downColor':
theme === 'Mango' ? '#E54033' : '#CC2929',
'mainSeriesProperties.candleStyle.drawWick': true,
'mainSeriesProperties.candleStyle.drawBorder': true,
'mainSeriesProperties.candleStyle.borderColor': '#AFD803',
'mainSeriesProperties.candleStyle.borderUpColor': '#AFD803',
'mainSeriesProperties.candleStyle.borderDownColor': '#E54033',
'mainSeriesProperties.candleStyle.wickUpColor': '#AFD803',
'mainSeriesProperties.candleStyle.wickDownColor': '#E54033',
'mainSeriesProperties.candleStyle.borderColor':
theme === 'Mango' ? '#AFD803' : '#5EBF4D',
'mainSeriesProperties.candleStyle.borderUpColor':
theme === 'Mango' ? '#AFD803' : '#5EBF4D',
'mainSeriesProperties.candleStyle.borderDownColor':
theme === 'Mango' ? '#E54033' : '#CC2929',
'mainSeriesProperties.candleStyle.wickUpColor':
theme === 'Mango' ? '#AFD803' : '#5EBF4D',
'mainSeriesProperties.candleStyle.wickDownColor':
theme === 'Mango' ? '#E54033' : '#CC2929',
},
}

2
pages/index.tsx
View File

@ -8,7 +8,7 @@ const Index = () => {
useHydrateStore()
return (
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
<TopBar />
<MarketSelect />
<div className={`min-h-screen p-1 sm:px-2 sm:py-1 md:px-6 md:py-1`}>

39
styles/global.css
View File

@ -1,39 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--primary: theme('colors.light-theme.orange');
--red: theme('colors.light-theme.red');
--green: theme('colors.light-theme.green');
--bkg-1: theme('colors.light-theme["bkg-1"]');
--bkg-2: theme('colors.light-theme["bkg-2"]');
--bkg-3: theme('colors.light-theme["bkg-3"]');
--fgd-1: theme('colors.light-theme["fgd-1"]');
--fgd-2: theme('colors.light-theme["fgd-2"]');
--fgd-3: theme('colors.light-theme["fgd-3"]');
}
[data-theme='dark'] {
--primary: theme('colors.dark-theme.orange');
--red: theme('colors.dark-theme.red');
--green: theme('colors.dark-theme.green');
--bkg-1: theme('colors.dark-theme["bkg-1"]');
--bkg-2: theme('colors.dark-theme["bkg-2"]');
--bkg-3: theme('colors.dark-theme["bkg-3"]');
--fgd-1: theme('colors.dark-theme["fgd-1"]');
--fgd-2: theme('colors.dark-theme["fgd-2"]');
--fgd-3: theme('colors.dark-theme["fgd-3"]');
}
[data-theme='mango'] {
--primary: theme('colors.mango-theme.yellow');
--red: theme('colors.mango-theme.red');
--green: theme('colors.mango-theme.green');
--bkg-1: theme('colors.mango-theme["bkg-1"]');
--bkg-2: theme('colors.mango-theme["bkg-2"]');
--bkg-3: theme('colors.mango-theme["bkg-3"]');
--fgd-1: theme('colors.mango-theme["fgd-1"]');
--fgd-2: theme('colors.mango-theme["fgd-2"]');
--fgd-3: theme('colors.mango-theme["fgd-3"]');
}

4
styles/index.css
View File

@ -15,7 +15,7 @@
--fgd-4: theme('colors.light-theme["fgd-4"]');
}
[data-theme='dark'] {
[data-theme='Dark'] {
--primary: theme('colors.dark-theme.orange');
--red: theme('colors.dark-theme.red');
--green: theme('colors.dark-theme.green');
@ -28,7 +28,7 @@
--fgd-4: theme('colors.dark-theme["fgd-4"]');
}
[data-theme='mango'] {
[data-theme='Mango'] {
--primary: theme('colors.mango-theme.yellow');
--red: theme('colors.mango-theme.red');
--green: theme('colors.mango-theme.green');

28
tailwind.config.js
View File

@ -47,28 +47,28 @@ module.exports = {
darkest: '#061f23',
},
'light-theme': {
orange: '#DFAB01',
red: '#E54033',
green: '#AFD803',
'bkg-1': '#F7F7F7',
orange: '#FF9C24',
red: '#CC2929',
green: '#5EBF4D',
'bkg-1': '#f7f7f7',
'bkg-2': '#FFFFFF',
'bkg-3': '#E7E7E7',
'bkg-3': '#EDEDED',
'fgd-1': '#061f23',
'fgd-2': '#0C3F45',
'fgd-3': '#446065',
'fgd-4': '#A0AFB1',
'fgd-4': '#B0B0B0',
},
'dark-theme': {
orange: '#DFAB01',
red: '#E54033',
green: '#AFD803',
'bkg-1': '#061f23',
'bkg-2': '#0F282D',
'bkg-3': '#0F3339',
orange: '#F2C94C',
red: '#CC2929',
green: '#5EBF4D',
'bkg-1': '#1C1C1C',
'bkg-2': '#2B2B2B',
'bkg-3': '#424242',
'fgd-1': '#FFFFFF',
'fgd-2': '#F7F7F7',
'fgd-3': '#E7E7E7',
'fgd-4': '#A0AFB1',
'fgd-4': '#878787',
},
'mango-theme': {
yellow: '#F2C94C',
@ -76,7 +76,7 @@ module.exports = {
green: '#AFD803',
'bkg-1': '#141026',
'bkg-2': '#1D1832',
'bkg-3': '#262337',
'bkg-3': '#322E47',
'fgd-1': '#F0EDFF',
'fgd-2': '#FCFCFF',
'fgd-3': '#B9B5CE',