use expanded font for large numbers

This commit is contained in:
saml33 2022-12-13 21:49:56 +11:00
parent ece65c9b7d
commit e2e08fe829
11 changed files with 25 additions and 28 deletions

3
.gitignore vendored
View File

@ -11,9 +11,6 @@
public/charting_library
public/datafeeds
# Fonts
public/fonts
# testing
/coverage

View File

@ -62,7 +62,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<span className="ml-3 text-lg font-bold text-th-fgd-1">
<span className="ml-3 font-display text-lg text-th-fgd-1">
Mango
</span>
</Transition>

View File

@ -244,7 +244,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
</div>
<div className="col-span-1 flex flex-col items-center justify-center p-6 pt-24">
<UserSetupTransition show={showSetupStep === 0}>
<h2 className="mb-4 text-5xl font-bold tracking-normal lg:text-6xl">
<h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
{t('onboarding:intro-heading')}
</h2>
<p className="mb-4 text-base">{t('onboarding:intro-desc')}</p>
@ -280,7 +280,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
<UserSetupTransition delay show={showSetupStep === 1}>
{showSetupStep === 1 ? (
<div>
<h2 className="mb-6 text-5xl font-bold tracking-normal lg:text-6xl">
<h2 className="mb-6 font-display text-5xl tracking-normal lg:text-6xl">
{t('onboarding:connect-wallet')}
</h2>
<p className="mb-2 text-base">{t('onboarding:choose-wallet')}</p>
@ -333,7 +333,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
{showSetupStep === 2 ? (
<div>
<div className="pb-6">
<h2 className="mb-4 text-5xl font-bold tracking-normal lg:text-6xl">
<h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
{t('onboarding:create-account')}
</h2>
<p className="text-base">
@ -386,7 +386,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
<UserSetupTransition delay show={showSetupStep === 3}>
{showSetupStep === 3 ? (
<div className="relative">
<h2 className="mb-6 text-5xl font-bold tracking-normal lg:text-6xl">
<h2 className="mb-6 font-display text-5xl tracking-normal lg:text-6xl">
{t('onboarding:fund-account')}
</h2>
<UserSetupTransition show={depositToken.length > 0}>
@ -542,7 +542,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
<UserSetupTransition delay show={showSetupStep === 4}>
{showSetupStep === 4 ? (
<div className="relative">
<h2 className="mb-4 text-5xl font-bold tracking-normal lg:text-6xl">
<h2 className="mb-4 font-display text-5xl tracking-normal lg:text-6xl">
{t('onboarding:your-profile')}
</h2>
<p className="text-base">{t('onboarding:profile-desc')}</p>
@ -595,7 +595,7 @@ const UserSetupTransition = ({
return (
<Transition
appear
className="h-full w-full max-w-md"
className="h-full w-full max-w-lg"
show={show}
enter={`transition ease-in duration-300 ${delay ? 'delay-300' : ''}`}
enterFrom="opacity-0"

View File

@ -234,12 +234,12 @@ const AccountPage = () => {
{t('account-value')}
</p>
</Tooltip>
<div className="mb-2 flex items-center text-5xl font-bold text-th-fgd-1">
<div className="mb-2 flex items-center font-display text-5xl text-th-fgd-1">
{animationSettings['number-scroll'] ? (
group && mangoAccount ? (
<FlipNumbers
height={48}
width={32}
width={36}
play
delay={0.05}
duration={1}
@ -248,7 +248,7 @@ const AccountPage = () => {
) : (
<FlipNumbers
height={48}
width={32}
width={36}
play
delay={0.05}
duration={1}

View File

@ -134,12 +134,12 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
small
? 'h-8 items-center text-2xl'
: 'mb-1 items-end text-4xl'
} font-bold text-th-fgd-1`}
} font-display text-th-fgd-1`}
>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={small ? 24 : 40}
width={small ? 15 : 26}
width={small ? 18 : 31}
play
numbers={
prefix +
@ -179,12 +179,12 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
small
? 'h-8 items-center text-2xl'
: 'mb-1 items-end text-4xl'
} font-bold text-th-fgd-1`}
} font-display text-th-fgd-1`}
>
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={small ? 24 : 40}
width={small ? 15 : 26}
width={small ? 18 : 31}
play
numbers={
prefix +

View File

@ -182,11 +182,11 @@ const SwapTokenChart = () => {
) : null}
{mouseData ? (
<>
<div className="mb-1 flex flex-col font-body text-5xl font-bold text-th-fgd-1 md:flex-row md:items-end">
<div className="mb-1 flex flex-col font-body font-display text-5xl text-th-fgd-1 md:flex-row md:items-end">
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
width={36}
play
numbers={formatFixedDecimals(mouseData['price'])}
/>
@ -205,11 +205,11 @@ const SwapTokenChart = () => {
</>
) : (
<>
<div className="mb-1 flex flex-col text-5xl font-bold text-th-fgd-1 md:flex-row md:items-end">
<div className="mb-1 flex flex-col font-display text-5xl text-th-fgd-1 md:flex-row md:items-end">
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
width={36}
play
numbers={formatFixedDecimals(
chartData[chartData.length - 1]['price']

View File

@ -116,11 +116,11 @@ const TokenPage = () => {
<h1 className="text-base font-normal">{bank.name}</h1>
)}
</div>
<div className="flex items-end space-x-3 text-5xl font-bold text-th-fgd-1">
<div className="flex items-end space-x-3 font-display text-5xl text-th-fgd-1">
{animationSettings['number-scroll'] ? (
<FlipNumbers
height={48}
width={32}
width={36}
play
delay={0.05}
duration={1}

Binary file not shown.

Binary file not shown.

View File

@ -7,10 +7,10 @@
src: url('/fonts/TT_Commons_Pro_Mono_Regular.woff2') format('woff2');
}
/* @font-face {
font-family: 'TT Expanded Bold';
src: url('/fonts/TT_Commons_Pro_Expanded_Bold.woff2') format('woff2');
} */
@font-face {
font-family: 'TT Commons Expanded';
src: url('/fonts/TT_Commons_Pro_Expanded_DemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'TT Commons';

View File

@ -5,7 +5,7 @@ module.exports = {
],
theme: {
fontFamily: {
// display: ['TT Expanded Bold, sans-serif'],
display: ['TT Commons Expanded, sans-serif'],
body: 'TT Commons, sans-serif',
mono: ['TT Mono, mono'],
},