add the remaining theme elements

components/SideNav.tsx

@@ -94,8 +94,12 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
     <div
       className={`transition-all duration-${sideBarAnimationDuration} ${
         collapsed ? 'w-[64px]' : 'w-[200px]'
-      } border-r border-th-bkg-3 bg-th-bkg-1 bg-repeat`}
+      } border-r border-th-bkg-3 bg-th-bkg-1 bg-contain`}
-      style={{ backgroundImage: `url(${themeData.sideTilePath})` }}
+      style={
+        collapsed
+          ? { backgroundImage: `url(${themeData.sideTilePath})` }
+          : { backgroundImage: `url(${themeData.sideTilePathExpanded})` }
+      }
     >
       {sidebarImageUrl && !collapsed ? (
         <img

components/TopBar.tsx

@@ -90,7 +90,7 @@ const TopBar = () => {
 
   return (
     <div
-      className={`flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1`}
+      className={`flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 bg-contain`}
       style={{ backgroundImage: `url(${themeData.topTilePath})` }}
     >
       <div className="flex w-full items-center justify-between md:space-x-4">

components/rewards/PromoBanner.tsx

@@ -10,7 +10,7 @@ const PromoBanner = () => {
   return isWhiteListed && showBanner ? (
     <div className="relative">
       <div className="flex flex-wrap items-center justify-center bg-th-bkg-2 py-3 px-10">
-        <p className="mr-2  text-center text-th-fgd-1 text-th-fgd-1 lg:text-base">
+        <p className="mr-2  text-center text-th-fgd-1 lg:text-base">
           Season 1 of Mango Mints is starting soon.
         </p>
         <Link

components/settings/DisplaySettings.tsx

@@ -50,7 +50,6 @@ const LANGS = [
 ]
 
 const DEFAULT_THEMES = [
-  'pepe',
   'light',
   'medium',
   'dark',

components/trade/AdvancedTradeForm.tsx

@@ -753,10 +753,10 @@ const AdvancedTradeForm = () => {
                             ? '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'
-                            ? ''
+                            ? 'raised-sell-button'
-                            : 'md:hover:bg-th-down-dark md:hover:brightness-90'
+                            : 'text-white md:hover:brightness-90'
                         }`
                   }`}
                   disabled={disabled}

styles/colors.ts

@@ -11,7 +11,7 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#faebec',
     Olive: '#383629',
     Bonk: '#EE7C2F',
-    Pepe: '#EE7C2F',
+    Pepe: '#2B4521',
   },
   BKG2: {
     'Mango Classic': '#282433',
@@ -25,7 +25,7 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#f4d7d9',
     Olive: '#474433',
     Bonk: '#DD7813',
-    Pepe: '#DD7813',
+    Pepe: '#375A2B',
   },
   BKG3: {
     'Mango Classic': '#332e42',
@@ -39,7 +39,7 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#efc3c6',
     Olive: '#56523e',
     Bonk: '#E5B55D',
-    Pepe: '#E5B55D',
+    Pepe: '#446E35',
   },
   BKG4: {
     'Mango Classic': '#3f3851',
@@ -53,7 +53,7 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#eaaeb2',
     Olive: '#656049',
     Bonk: '#DDA131',
-    Pepe: '#DDA131',
+    Pepe: '#51833F',
   },
   FGD4: {
     'Mango Classic': '#9189ae',
@@ -67,7 +67,7 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#b7343a',
     Olive: '#acaa8b',
     Bonk: '#F3E9AA',
-    Pepe: '#F3E9AA',
+    Pepe: '#88BD75',
   },
   UP: {
     'Mango Classic': '#89B92A',
@@ -81,7 +81,7 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#2d805e',
     Olive: '#4eaa27',
     Bonk: '#FAE34C',
-    Pepe: '#FAE34C',
+    Pepe: '#50C11F',
   },
   ACTIVE: {
     'Mango Classic': '#f1c84b',
@@ -95,7 +95,7 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#040e9f',
     Olive: '#e7dc83',
     Bonk: '#332910',
-    Pepe: '#332910',
+    Pepe: '#FAE34C',
   },
   DOWN: {
     'Mango Classic': '#F84638',
@@ -109,6 +109,6 @@ export const COLORS: Record<string, Record<string, string>> = {
     Lychee: '#c5303a',
     Olive: '#ee392f',
     Bonk: '#C22E30',
-    Pepe: '#C22E30',
+    Pepe: '#DD6040',
   },
 }

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;

tailwind.config.js

@@ -435,8 +435,8 @@ module.exports = {
             dark: 'hsl(52, 95%, 54%)',
           },
           button: {
-            DEFAULT: 'hsl(282, 88%, 30%)',
+            DEFAULT: 'hsl(104, 72%, 30%)',
-            hover: 'hsl(282, 88%, 24%)',
+            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%)',
+            dark: 'hsl(12, 70%, 46%)',
-            muted: 'hsl(359, 40%, 46%)',
+            muted: 'hsl(12, 40%, 46%)',
           },
           up: {
             DEFAULT: 'hsl(102, 72%, 44%)',

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

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

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: '',
+    rainAnimationImagePath: '/images/themes/pepe/pepe-logo.png',
-    sideImagePath: '',
+    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',
 }