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

adding additional theme classes

This commit is contained in:
Tyler Shipe 2021-04-12 12:20:17 -04:00
parent 70d4240b74
commit 3dfea56831
5 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/MarketSelect.jsx
View File

@ -6,10 +6,6 @@ import useMarketList from '../hooks/useMarketList'
// import useMarket from '../hooks/useMarket'
import useMangoStore from '../stores/useMangoStore'
const StyledDiv = styled.div`
cursor: pointer;
`
const MarketSelect = () => {
const { spotMarkets } = useMarketList()
const selectedMarket = useMangoStore((s) => s.selectedMarket)
@ -22,23 +18,26 @@ const MarketSelect = () => {
}
return (
<div
css={xw`relative flex items-center py-2 px-3 sm:px-6 divide-x divide-th-fgd-4 bg-th-bkg-3`}
>
<div css={xw`bg-th-bkg-3`}>
{/*<div css={xw`opacity-50 p-2`}>Markets</div>*/}
{Object.entries(spotMarkets).map(([name, address]) => (
<StyledDiv
css={
selectedMarket.name === name
? xw`px-3 py-1 text-th-primary text-xs font-normal`
: xw`px-3 py-1 text-th-fgd-3 hover:text-th-fgd-1 text-xs font-normal`
}
onClick={() => handleChange(name)}
key={address}
>
{name}
</StyledDiv>
))}
<div
css={xw`flex items-center py-2 px-3 sm:px-8 divide-x divide-th-fgd-4 `}
>
{Object.entries(spotMarkets).map(([name, address]) => (
<div
css={[
xw`cursor-pointer`,
selectedMarket.name === name
? xw`px-3 py-1 text-th-primary text-xs font-normal`
: xw`px-3 py-1 text-th-fgd-3 hover:text-th-fgd-1 text-xs font-normal`,
]}
onClick={() => handleChange(name)}
key={address}
>
{name}
</div>
))}
</div>
{/*<Listbox value={selectedMarket.name} onChange={handleChange}>
{({ open }) => (
<>

3
components/MenuItem.tsx
View File

@ -9,7 +9,8 @@ const MenuItem = ({ href, children }) => {
<Link href={href} passHref>
<a
css={[
xw`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:pt-1 sm:pb-0 border-l-4 sm:border-l-0 sm:border-b-2 text-base`,
xw`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`,
asPath === href
? xw`border-th-primary`
: xw`border-transparent hover:border-th-primary`,

2
components/RecentMarketTrades.tsx
View File

@ -26,7 +26,7 @@ export default function PublicTrades() {
return (
<FloatingElement>
<ElementTitle>Recent Market Trades</ElementTitle>
<div css={xw`grid grid-cols-3 text-gray-500 mb-2`}>
<div css={xw`grid grid-cols-3 text-th-fgd-4 mb-2`}>
<div>Price ({quoteCurrency}) </div>
<div css={xw`text-right`}>Size ({baseCurrency})</div>
<div css={xw`text-right`}>Time</div>

12
components/ThemeSwitch.tsx
View File

@ -2,7 +2,11 @@ import { useEffect, useState } from 'react'
import xw from 'xwind'
import { useTheme } from 'next-themes'
const themes = [{ name: 'light' }, { name: 'dark' }, { name: 'mango' }]
const THEMES = [
{ name: 'light', display: 'Light' },
{ name: 'dark', display: 'Dark' },
{ name: 'mango', display: 'Mango' },
]
const ThemeChanger = () => {
const [mounted, setMounted] = useState(false)
@ -17,14 +21,14 @@ const ThemeChanger = () => {
<select
name="theme"
id="theme-select"
css={xw`px-3 py-1 text-sm bg-th-bkg-1 border border-th-fgd-4 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-md`}
css={xw`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) => (
{THEMES.map((t) => (
<option key={t.name.toLowerCase()} value={t.name.toLowerCase()}>
{t.name}
{t.display}
</option>
))}
</select>

14
components/TopBar.tsx
View File

@ -1,8 +1,7 @@
import { useState } from 'react'
import xw from 'xwind'
import styled from '@emotion/styled'
// import { useTheme } from 'next-themes'
import { SunIcon, MoonIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
import { MenuIcon, XIcon } from '@heroicons/react/outline'
import MenuItem from './MenuItem'
import useWallet from '../hooks/useWallet'
import ThemeSwitch from './ThemeSwitch'
@ -16,7 +15,6 @@ const Code = styled.code`
const TopBar = () => {
const { connected, wallet } = useWallet()
const [showMenu, setShowMenu] = useState(false)
// const { theme, setTheme } = useTheme()
const handleConnectDisconnect = () => {
connected ? wallet.disconnect() : wallet.connect()
@ -27,14 +25,14 @@ const TopBar = () => {
<div css={xw`px-4 sm:px-6 lg:px-8`}>
<div css={xw`flex justify-between h-16`}>
<div css={xw`flex`}>
<div css={xw`flex-shrink-0 flex items-center`}>
<div css={xw`flex-shrink-0 flex items-center ml-2`}>
<img
css={xw`h-8 w-auto`}
src="/assets/icons/logo.svg"
alt="next"
/>
</div>
<div css={xw`hidden sm:flex sm:space-x-8 sm:ml-4`}>
<div css={xw`hidden sm:flex sm:space-x-8 sm:ml-4 py-2`}>
<MenuItem href="/">Trade</MenuItem>
<MenuItem href="/stats">Stats</MenuItem>
<MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
@ -88,9 +86,9 @@ const TopBar = () => {
>
<span css={xw`sr-only`}>Open main menu</span>
{showMenu ? (
<XIcon css={xw`h-5 w-5`} />
<XIcon css={xw`h-5 w-5 text-th-primary`} />
) : (
<MenuIcon css={xw`h-5 w-5`} />
<MenuIcon css={xw`h-5 w-5 text-th-primary`} />
)}
</button>
</div>
@ -101,7 +99,7 @@ const TopBar = () => {
css={[showMenu ? xw`visible` : xw`hidden`, xw`sm:hidden`]}
id="mobile-menu"
>
<div css={xw`bg-mango-grey-dark pt-2 pb-3 space-y-1`}>
<div css={xw`bg-th-bkg-3 pt-2 pb-3 space-y-1 border-b border-th-fgd-4`}>
<MenuItem href="/">Trade</MenuItem>
<MenuItem href="/stats">Stats</MenuItem>
<MenuItem href="https://docs.mango.markets/">Learn</MenuItem>