-
+
Season 1 of Mango Mints is starting soon.
{
? 'raised-buy-button'
: 'text-white md:hover:brightness-90'
}`
- : `bg-th-down-dark text-white ${
+ : `bg-th-down-dark md:hover:bg-th-down-dark ${
themeData.buttonStyle === 'raised'
- ? ''
- : 'md:hover:bg-th-down-dark md:hover:brightness-90'
+ ? 'raised-sell-button'
+ : 'text-white md:hover:brightness-90'
}`
}`}
disabled={disabled}
diff --git a/public/images/themes/bonk/bonk-tile-expanded.png b/public/images/themes/bonk/bonk-tile-expanded.png
new file mode 100644
index 00000000..1fdbd5d4
Binary files /dev/null and b/public/images/themes/bonk/bonk-tile-expanded.png differ
diff --git a/public/images/themes/bonk/bonk-tile.png b/public/images/themes/bonk/bonk-tile.png
index 276732c2..8f0a410c 100644
Binary files a/public/images/themes/bonk/bonk-tile.png and b/public/images/themes/bonk/bonk-tile.png differ
diff --git a/public/images/themes/pepe/pepe-hori-tile.png b/public/images/themes/pepe/pepe-hori-tile.png
index 195a2187..f72bd432 100644
Binary files a/public/images/themes/pepe/pepe-hori-tile.png and b/public/images/themes/pepe/pepe-hori-tile.png differ
diff --git a/public/images/themes/pepe/pepe-vert-tile-expanded.png b/public/images/themes/pepe/pepe-vert-tile-expanded.png
new file mode 100644
index 00000000..bf97e7d0
Binary files /dev/null and b/public/images/themes/pepe/pepe-vert-tile-expanded.png differ
diff --git a/public/images/themes/pepe/pepe-vert-tile.png b/public/images/themes/pepe/pepe-vert-tile.png
index 6f53e52b..9812e8c0 100644
Binary files a/public/images/themes/pepe/pepe-vert-tile.png and b/public/images/themes/pepe/pepe-vert-tile.png differ
diff --git a/public/images/themes/pepe/sidenav-image.png b/public/images/themes/pepe/sidenav-image.png
new file mode 100644
index 00000000..4e977e1c
Binary files /dev/null and b/public/images/themes/pepe/sidenav-image.png differ
diff --git a/styles/colors.ts b/styles/colors.ts
index 30c0c7c1..584de6da 100644
--- a/styles/colors.ts
+++ b/styles/colors.ts
@@ -11,7 +11,7 @@ export const COLORS: Record
> = {
Lychee: '#faebec',
Olive: '#383629',
Bonk: '#EE7C2F',
- Pepe: '#EE7C2F',
+ Pepe: '#2B4521',
},
BKG2: {
'Mango Classic': '#282433',
@@ -25,7 +25,7 @@ export const COLORS: Record> = {
Lychee: '#f4d7d9',
Olive: '#474433',
Bonk: '#DD7813',
- Pepe: '#DD7813',
+ Pepe: '#375A2B',
},
BKG3: {
'Mango Classic': '#332e42',
@@ -39,7 +39,7 @@ export const COLORS: Record> = {
Lychee: '#efc3c6',
Olive: '#56523e',
Bonk: '#E5B55D',
- Pepe: '#E5B55D',
+ Pepe: '#446E35',
},
BKG4: {
'Mango Classic': '#3f3851',
@@ -53,7 +53,7 @@ export const COLORS: Record> = {
Lychee: '#eaaeb2',
Olive: '#656049',
Bonk: '#DDA131',
- Pepe: '#DDA131',
+ Pepe: '#51833F',
},
FGD4: {
'Mango Classic': '#9189ae',
@@ -67,7 +67,7 @@ export const COLORS: Record> = {
Lychee: '#b7343a',
Olive: '#acaa8b',
Bonk: '#F3E9AA',
- Pepe: '#F3E9AA',
+ Pepe: '#88BD75',
},
UP: {
'Mango Classic': '#89B92A',
@@ -81,7 +81,7 @@ export const COLORS: Record> = {
Lychee: '#2d805e',
Olive: '#4eaa27',
Bonk: '#FAE34C',
- Pepe: '#FAE34C',
+ Pepe: '#50C11F',
},
ACTIVE: {
'Mango Classic': '#f1c84b',
@@ -95,7 +95,7 @@ export const COLORS: Record> = {
Lychee: '#040e9f',
Olive: '#e7dc83',
Bonk: '#332910',
- Pepe: '#332910',
+ Pepe: '#FAE34C',
},
DOWN: {
'Mango Classic': '#F84638',
@@ -109,6 +109,6 @@ export const COLORS: Record> = {
Lychee: '#c5303a',
Olive: '#ee392f',
Bonk: '#C22E30',
- Pepe: '#C22E30',
+ Pepe: '#DD6040',
},
}
diff --git a/styles/globals.css b/styles/globals.css
index 6f80c431..dafcee81 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -705,7 +705,7 @@ input[type='range']::-webkit-slider-runnable-track {
/* raised buy button */
.raised-buy-button {
- @apply relative flex items-center justify-center bg-th-up text-th-active transition-none;
+ @apply relative flex items-center justify-center bg-th-up text-black transition-none;
box-shadow: 0 6px var(--up-dark);
}
@@ -720,6 +720,24 @@ input[type='range']::-webkit-slider-runnable-track {
top: 6px;
}
+/* raised sell button */
+
+.raised-sell-button {
+ @apply relative flex items-center justify-center bg-th-down text-white transition-none;
+ box-shadow: 0 6px var(--down-dark);
+}
+
+.raised-sell-button:hover {
+ background-color: var(--down) !important;
+ box-shadow: 0 4px var(--down-dark);
+ top: 2px;
+}
+
+.raised-sell-button:active {
+ box-shadow: 0 0 var(--down-dark);
+ top: 6px;
+}
+
.pagination {
margin-top: 15px;
margin-bottom: 15px;
diff --git a/tailwind.config.js b/tailwind.config.js
index a715ffdf..5a23e293 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -435,8 +435,8 @@ module.exports = {
dark: 'hsl(52, 95%, 54%)',
},
button: {
- DEFAULT: 'hsl(282, 88%, 30%)',
- hover: 'hsl(282, 88%, 24%)',
+ DEFAULT: 'hsl(104, 72%, 30%)',
+ hover: 'hsl(104, 72%, 24%)',
},
input: {
bkg: 'hsl(104, 31%, 15%)',
@@ -446,8 +446,8 @@ module.exports = {
link: { DEFAULT: 'hsl(45, 86%, 62%)', hover: 'hsl(45, 86%, 57%)' },
down: {
DEFAULT: 'hsl(12, 70%, 56%)',
- dark: 'hsl(359, 70%, 46%)',
- muted: 'hsl(359, 40%, 46%)',
+ dark: 'hsl(12, 70%, 46%)',
+ muted: 'hsl(12, 40%, 46%)',
},
up: {
DEFAULT: 'hsl(102, 72%, 44%)',
diff --git a/types/index.ts b/types/index.ts
index ebdd6860..d611b8ea 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -404,6 +404,7 @@ export interface ThemeData {
rainAnimationImagePath: string
sideImagePath: string
sideTilePath: string
+ sideTilePathExpanded: string
topTilePath: string
tvChartTheme: 'Light' | 'Dark'
tvImagePath: string
diff --git a/utils/fonts.ts b/utils/fonts.ts
index c8eb83da..63a2faa7 100644
--- a/utils/fonts.ts
+++ b/utils/fonts.ts
@@ -1,5 +1,5 @@
import localFont from 'next/font/local'
-import { Nunito } from 'next/font/google'
+import { Nunito, Short_Stack } from 'next/font/google'
// this font should be used as the mono variant for all themes
@@ -46,3 +46,17 @@ export const nunitoBody = Nunito({
subsets: ['latin'],
variable: '--font-body',
})
+
+// pepe theme
+
+export const gloriaDisplay = Short_Stack({
+ weight: '400',
+ subsets: ['latin'],
+ variable: '--font-display',
+})
+
+export const gloriaBody = Short_Stack({
+ weight: '400',
+ subsets: ['latin'],
+ variable: '--font-body',
+})
diff --git a/utils/theme.ts b/utils/theme.ts
index 5add9009..208aa097 100644
--- a/utils/theme.ts
+++ b/utils/theme.ts
@@ -1,5 +1,7 @@
import { ThemeData } from 'types'
import {
+ gloriaBody,
+ gloriaDisplay,
nunitoBody,
nunitoDisplay,
ttCommons,
@@ -40,6 +42,7 @@ export const nftThemeMeta: NftThemeMeta = {
rainAnimationImagePath: '',
sideImagePath: '',
sideTilePath: '',
+ sideTilePathExpanded: '',
topTilePath: '',
tvChartTheme: 'Dark',
tvImagePath: '',
@@ -53,6 +56,7 @@ export const nftThemeMeta: NftThemeMeta = {
rainAnimationImagePath: '/images/themes/bonk/bonk-animation-logo.png',
sideImagePath: '/images/themes/bonk/sidenav-image.png',
sideTilePath: '/images/themes/bonk/bonk-tile.png',
+ sideTilePathExpanded: '/images/themes/bonk/bonk-tile-expanded.png',
topTilePath: '/images/themes/bonk/bonk-tile.png',
tvChartTheme: 'Light',
tvImagePath: '/images/themes/bonk/tv-chart-image.png',
@@ -60,12 +64,13 @@ export const nftThemeMeta: NftThemeMeta = {
},
Pepe: {
buttonStyle: 'raised',
- fonts: { body: ttCommons, display: ttCommonsExpanded, mono: ttCommonsMono },
+ fonts: { body: gloriaBody, display: gloriaDisplay, mono: ttCommonsMono },
logoPath: '/images/themes/pepe/pepe-logo.png',
platformName: 'Pepe',
- rainAnimationImagePath: '',
- sideImagePath: '',
+ rainAnimationImagePath: '/images/themes/pepe/pepe-logo.png',
+ sideImagePath: '/images/themes/pepe/sidenav-image.png',
sideTilePath: '/images/themes/pepe/pepe-vert-tile.png',
+ sideTilePathExpanded: '/images/themes/pepe/pepe-vert-tile-expanded.png',
topTilePath: '/images/themes/pepe/pepe-hori-tile.png',
tvChartTheme: 'Dark',
tvImagePath: '/images/themes/pepe/tv-chart-image.png',
@@ -75,4 +80,5 @@ export const nftThemeMeta: NftThemeMeta = {
export const CUSTOM_SKINS: { [key: string]: string } = {
bonk: '6FUYsgvSPiLsMpKZqLWswkw7j4juudZyVopU6RYKLkQ3',
+ pepe: '6FUYsgvSPiLsMpKZqLWswkw7j4juudZyVopU6RYKLkQ3',
}