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

add bonk theme

This commit is contained in:
saml33 2023-05-31 13:03:53 +10:00
parent 6bf3714e80
commit eefc1f374d
13 changed files with 113 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/SideNav.tsx
View File

@ -37,6 +37,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
const { mangoAccount } = useMangoAccount()
const router = useRouter()
const { pathname } = router
const { theme } = useTheme()
return (
<div
@ -53,11 +54,19 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
} pb-1 pt-2 pl-4`}
>
<div className={`flex flex-shrink-0 cursor-pointer items-center`}>
<img
className={`h-8 w-8 flex-shrink-0`}
src="/logos/logo-mark.svg"
alt="next"
/>
{theme !== 'Bonk' ? (
<img
className={`h-8 w-8 flex-shrink-0`}
src="/logos/logo-mark.svg"
alt="next"
/>
) : (
<img
className={`h-9 w-9 flex-shrink-0`}
src="/images/bonk-logo.png"
alt="next"
/>
)}
<Transition
show={!collapsed}
as={Fragment}

20
components/TopBar.tsx
View File

@ -30,6 +30,7 @@ import useUnownedAccount from 'hooks/useUnownedAccount'
import NotificationsButton from './notifications/NotificationsButton'
import Tooltip from './shared/Tooltip'
import { copyToClipboard } from 'utils'
import { useTheme } from 'next-themes'
const TopBar = () => {
const { t } = useTranslation('common')
@ -48,6 +49,7 @@ const TopBar = () => {
const { width } = useViewport()
const isMobile = width ? width < breakpoints.sm : false
const { isUnownedAccount } = useUnownedAccount()
const { theme } = useTheme()
const handleCloseSetup = useCallback(() => {
setShowUserSetup(false)
@ -97,11 +99,19 @@ const TopBar = () => {
<SolanaTps />
</div>
) : null}
<img
className="mr-4 h-8 w-8 flex-shrink-0 md:hidden"
src="/logos/logo-mark.svg"
alt="next"
/>
{theme !== 'Bonk' ? (
<img
className="mr-4 h-8 w-8 flex-shrink-0 md:hidden"
src="/logos/logo-mark.svg"
alt="next"
/>
) : (
<img
className="mr-4 h-8 w-8 flex-shrink-0 md:hidden"
src="/images/bonk-logo.png"
alt="next"
/>
)}
{!connected ? (
mangoAccount ? (
<span className="hidden items-center md:flex">

1
components/settings/DisplaySettings.tsx
View File

@ -46,6 +46,7 @@ const LANGS = [
]
export const THEMES = [
'bonk',
'light',
'medium',
'dark',

5
components/trade/TradingViewChart.tsx
View File

@ -575,7 +575,10 @@ const TradingViewChart = () => {
autosize: defaultProps.autosize,
studies_overrides: defaultProps.studiesOverrides,
theme:
theme === 'Light' || theme === 'Banana' || theme === 'Lychee'
theme === 'Light' ||
theme === 'Banana' ||
theme === 'Lychee' ||
theme === 'Bonk'
? 'Light'
: 'Dark',
custom_css_url: '/styles/tradingview.css',

BIN
public/images/bonk-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

1
public/locales/en/settings.json
View File

@ -3,6 +3,7 @@
"avocado": "Avocado",
"banana": "Banana",
"blueberry": "Blueberry",
"bonk": "Bonk",
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",

1
public/locales/es/settings.json
View File

@ -3,6 +3,7 @@
"avocado": "Avocado",
"banana": "Banana",
"blueberry": "Blueberry",
"bonk": "Bonk",
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",

1
public/locales/ru/settings.json
View File

@ -3,6 +3,7 @@
"avocado": "Avocado",
"banana": "Banana",
"blueberry": "Blueberry",
"bonk": "Bonk",
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",

1
public/locales/zh/settings.json
View File

@ -3,6 +3,7 @@
"avocado": "酪梨",
"banana": "香蕉",
"blueberry": "蓝莓",
"bonk": "Bonk",
"bottom-left": "左下",
"bottom-right": "右下",
"buttons": "按钮",

1
public/locales/zh_tw/settings.json
View File

@ -3,6 +3,7 @@
"avocado": "酪梨",
"banana": "香蕉",
"blueberry": "藍莓",
"bonk": "Bonk",
"bottom-left": "左下",
"bottom-right": "右下",
"buttons": "按鈕",

8
styles/colors.ts
View File

@ -10,6 +10,7 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#fcf9cf',
Lychee: '#faebec',
Olive: '#383629',
Bonk: '#EE7C2F',
},
BKG2: {
'Mango Classic': '#282433',
@ -22,6 +23,7 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#f7f2ba',
Lychee: '#f4d7d9',
Olive: '#474433',
Bonk: '#DD7813',
},
BKG3: {
'Mango Classic': '#332e42',
@ -34,6 +36,7 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#f0eaa8',
Lychee: '#efc3c6',
Olive: '#56523e',
Bonk: '#E5B55D',
},
BKG4: {
'Mango Classic': '#3f3851',
@ -46,6 +49,7 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#e6df99',
Lychee: '#eaaeb2',
Olive: '#656049',
Bonk: '#916618',
},
FGD4: {
'Mango Classic': '#9189ae',
@ -58,6 +62,7 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#7b7b65',
Lychee: '#b7343a',
Olive: '#acaa8b',
Bonk: '#F3E9AA',
},
UP: {
'Mango Classic': '#89B92A',
@ -70,6 +75,7 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#86AE7E',
Lychee: '#2d805e',
Olive: '#4eaa27',
Bonk: '#FAE34C',
},
ACTIVE: {
'Mango Classic': '#f1c84b',
@ -82,6 +88,7 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#606afb',
Lychee: '#040e9f',
Olive: '#e7dc83',
Bonk: '#332910',
},
DOWN: {
'Mango Classic': '#F84638',
@ -94,5 +101,6 @@ export const COLORS: Record<string, Record<string, string>> = {
Banana: '#BE6A6A',
Lychee: '#c5303a',
Olive: '#ee392f',
Bonk: '#C22E30',
},
}

29
styles/globals.css
View File

@ -392,6 +392,35 @@ th {
--warning: theme('colors.avocado-theme.warning');
}
[data-theme='Bonk'] {
--active: theme('colors.bonk-theme.active.DEFAULT');
--active-dark: theme('colors.bonk-theme.active.dark');
--down: theme('colors.bonk-theme.down.DEFAULT');
--down-dark: theme('colors.bonk-theme.down.dark');
--down-muted: theme('colors.bonk-theme.down.muted');
--up: theme('colors.bonk-theme.up.DEFAULT');
--up-dark: theme('colors.bonk-theme.up.dark');
--up-muted: theme('colors.bonk-theme.up.muted');
--link: theme('colors.bonk-theme.link.DEFAULT');
--link-hover: theme('colors.bonk-theme.link.hover');
--bkg-1: theme('colors.bonk-theme.bkg-1');
--bkg-2: theme('colors.bonk-theme.bkg-2');
--bkg-3: theme('colors.bonk-theme.bkg-3');
--bkg-4: theme('colors.bonk-theme.bkg-4');
--fgd-1: theme('colors.bonk-theme.fgd-1');
--fgd-2: theme('colors.bonk-theme.fgd-2');
--fgd-3: theme('colors.bonk-theme.fgd-3');
--fgd-4: theme('colors.bonk-theme.fgd-4');
--button: theme('colors.bonk-theme.button.DEFAULT');
--button-hover: theme('colors.bonk-theme.button.hover');
--input-bkg: theme('colors.bonk-theme.input.bkg');
--input-border: theme('colors.bonk-theme.input.border');
--input-border-hover: theme('colors.bonk-theme.input.borderDark');
--error: theme('colors.bonk-theme.error');
--success: theme('colors.bonk-theme.success');
--warning: theme('colors.bonk-theme.warning');
}
/* Base */
body {

37
tailwind.config.js
View File

@ -392,6 +392,43 @@ module.exports = {
'fgd-3': 'hsl(357, 46%, 41%)',
'fgd-4': 'hsl(357, 41%, 51%)',
},
'bonk-theme': {
active: {
DEFAULT: 'hsl(43, 53%, 13%)',
dark: 'hsl(43, 53%, 8%)',
},
button: {
DEFAULT: 'hsl(12, 50%, 45%)',
hover: 'hsl(12, 50%, 40%)',
},
input: {
bkg: 'hsl(30, 84%, 47%)',
border: 'hsl(30, 84%, 33%)',
borderDark: 'hsl(30, 84%, 28%)',
},
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: {
DEFAULT: 'hsl(359, 62%, 47%)',
dark: 'hsl(359, 62%, 42%)',
muted: 'hsl(359, 22%, 42%)',
},
up: {
DEFAULT: 'hsl(52, 95%, 64%)',
dark: 'hsl(52, 95%, 59%)',
muted: 'hsl(52, 55%, 59%)',
},
error: 'hsl(359, 62%, 47%)',
success: 'hsl(52, 95%, 64%)',
warning: 'hsl(359, 62%, 67%)',
'bkg-1': 'hsl(24, 85%, 56%)',
'bkg-2': 'hsl(30, 84%, 47%)',
'bkg-3': 'hsl(39, 72%, 63%)',
'bkg-4': 'hsl(39, 72%, 33%)',
'fgd-1': 'hsl(52, 93%, 99%)',
'fgd-2': 'hsl(52, 85%, 93%)',
'fgd-3': 'hsl(52, 80%, 87%)',
'fgd-4': 'hsl(52, 75%, 81%)',
},
'th-bkg-1': 'var(--bkg-1)',
'th-bkg-2': 'var(--bkg-2)',
'th-bkg-3': 'var(--bkg-3)',