diff --git a/components/SideNav.tsx b/components/SideNav.tsx index 7b4ce4c1..827cb392 100644 --- a/components/SideNav.tsx +++ b/components/SideNav.tsx @@ -94,8 +94,12 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
{sidebarImageUrl && !collapsed ? ( { return (
diff --git a/components/rewards/PromoBanner.tsx b/components/rewards/PromoBanner.tsx index 80637a3a..527c44cd 100644 --- a/components/rewards/PromoBanner.tsx +++ b/components/rewards/PromoBanner.tsx @@ -10,7 +10,7 @@ const PromoBanner = () => { return isWhiteListed && showBanner ? (
-

+

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', }