try new font (public sans)

blockworks-foundation · Sep 19, 2023 · 94f313b · 94f313b
1 parent 40ea600
commit 94f313b
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 67 deletions.
diff --git a/components/StakeForm.tsx b/components/StakeForm.tsx
@@ -328,7 +328,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                   <div className="flex justify-between">
                     <p>SOL Borrowed</p>
                     {solBank ? (
-                      <span className="text-th-fgd-1">
+                      <span className="font-mono text-th-fgd-1">
                         <FormatNumericValue
                           value={solAmountToBorrow}
                           decimals={3}
@@ -340,7 +340,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                 <div className="space-y-1.5 border-t border-th-bkg-3 px-2 pt-4">
                   <div className="flex justify-between">
                     <p>{formatTokenSymbol(selectedToken)} Leveraged APY</p>
-                    <span className="text-th-fgd-1">
+                    <span className="font-mono text-th-fgd-1">
                       <FormatNumericValue
                         value={7.28 * leverage}
                         decimals={2}
@@ -350,7 +350,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                   </div>
                   <div className="flex justify-between">
                     <p>{formatTokenSymbol(selectedToken)} Deposit Rate</p>
-                    <span className="text-th-fgd-1">
+                    <span className="font-mono text-th-fgd-1">
                       <FormatNumericValue
                         value={stakeBank.getDepositRateUi()}
                         decimals={2}
@@ -360,7 +360,7 @@ function DepositForm({ onSuccess, token: selectedToken }: DepositFormProps) {
                   </div>
                   <div className="flex justify-between">
                     <p>SOL Borrow Rate</p>
-                    <span className="text-th-fgd-1">
+                    <span className="font-mono text-th-fgd-1">
                       <FormatNumericValue
                         value={
                           solBank.getDepositRateUi() * Math.min(leverage - 1, 1)

diff --git a/components/TokenButton.tsx b/components/TokenButton.tsx
@@ -37,7 +37,7 @@ const TokenButton = ({
         <span className="mt-2 text-lg font-bold text-th-fgd-1">
           {formatTokenSymbol(tokenName)}
         </span>
-        <span>
+        <span className="font-mono">
           {loadingRates ? (
             <SheenLoader className="mt-0.5">
               <div className="h-5 w-10 bg-th-bkg-3" />

diff --git a/components/forms/Label.tsx b/components/forms/Label.tsx
@@ -8,7 +8,7 @@ const Label = ({
   className?: string
 }) => (
   <p
-    className={`mb-2 text-left text-base font-bold text-th-fgd-2 ${className}`}
+    className={`mb-2 text-left text-base font-medium text-th-fgd-1 ${className}`}
   >
     {text}{' '}
     {optional ? (

diff --git a/fonts/PublicSans-Bold.woff2 b/fonts/PublicSans-Bold.woff2
diff --git a/fonts/PublicSans-Medium.woff2 b/fonts/PublicSans-Medium.woff2
diff --git a/fonts/PublicSans-Regular.woff2 b/fonts/PublicSans-Regular.woff2
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -64,7 +64,7 @@ const Index: NextPage = () => {
           }`}
           onClick={() => setActiveTab('History')}
         >
-          Transaction History
+          History
         </button>
       </div>
       <TabContent activeTab={activeTab} setActiveTab={setActiveTab} />

diff --git a/styles/globals.css b/styles/globals.css
@@ -425,7 +425,7 @@ th {
 /* Base */
 
 body {
-  @apply font-body text-base font-medium leading-tight tracking-wider;
+  @apply font-body text-base font-normal leading-tight tracking-wider;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

diff --git a/utils/fonts.ts b/utils/fonts.ts
@@ -1,5 +1,4 @@
 import localFont from 'next/font/local'
-import { Nunito, Short_Stack } from 'next/font/google'
 
 // this font should be used as the mono variant for all themes
 
@@ -34,29 +33,33 @@ export const ttCommonsExpanded = localFont({
   variable: '--font-display',
 })
 
-// bonk skin
-
-export const nunitoDisplay = Nunito({
-  weight: '900',
-  subsets: ['latin'],
-  variable: '--font-display',
-})
-
-export const nunitoBody = Nunito({
-  subsets: ['latin'],
+export const publicSans = localFont({
+  src: [
+    {
+      path: '../fonts/PublicSans-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/PublicSans-Medium.woff2',
+      weight: '500',
+      style: 'medium',
+    },
+    {
+      path: '../fonts/PublicSans-Bold.woff2',
+      weight: '700',
+      style: 'bold',
+    },
+  ],
   variable: '--font-body',
 })
 
-// pepe theme
-
-export const shortStackDisplay = Short_Stack({
-  weight: '400',
-  subsets: ['latin'],
+export const publicSansDisplay = localFont({
+  src: '../fonts/PublicSans-Bold.woff2',
   variable: '--font-display',
 })
 
-export const shortStackBody = Short_Stack({
-  weight: '400',
-  subsets: ['latin'],
-  variable: '--font-body',
+export const publicSansMono = localFont({
+  src: '../fonts/PublicSans-Regular.woff2',
+  variable: '--font-mono',
 })
diff --git a/utils/theme.ts b/utils/theme.ts
@@ -1,11 +1,10 @@
 import { ThemeData } from 'types'
 import {
-  nunitoBody,
-  nunitoDisplay,
-  shortStackBody,
-  shortStackDisplay,
-  ttCommons,
-  ttCommonsExpanded,
+  publicSans,
+  publicSansDisplay,
+  // publicSansMono,
+  // ttCommons,
+  // ttCommonsExpanded,
   ttCommonsMono,
 } from './fonts'
 
@@ -36,7 +35,11 @@ type NftThemeMeta = {
 export const nftThemeMeta: NftThemeMeta = {
   default: {
     buttonStyle: 'flat',
-    fonts: { body: ttCommons, display: ttCommonsExpanded, mono: ttCommonsMono },
+    fonts: {
+      body: publicSans,
+      display: publicSansDisplay,
+      mono: ttCommonsMono,
+    },
     logoPath: '/logos/logo-mark.svg',
     platformName: 'Mango',
     rainAnimationImagePath: '',
@@ -48,38 +51,6 @@ export const nftThemeMeta: NftThemeMeta = {
     tvImagePath: '',
     useGradientBg: false,
   },
-  Bonk: {
-    buttonStyle: 'raised',
-    fonts: { body: nunitoBody, display: nunitoDisplay, mono: ttCommonsMono },
-    logoPath: '/images/themes/bonk/bonk-logo.png',
-    platformName: 'Bongo',
-    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',
-    useGradientBg: true,
-  },
-  Pepe: {
-    buttonStyle: 'raised',
-    fonts: {
-      body: shortStackBody,
-      display: shortStackDisplay,
-      mono: ttCommonsMono,
-    },
-    logoPath: '/images/themes/pepe/pepe-logo.png',
-    platformName: 'Pepe',
-    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',
-    useGradientBg: false,
-  },
 }
 
 export const CUSTOM_SKINS: { [key: string]: string } = {