use expanded font for large numbers
This commit is contained in:
parent
ece65c9b7d
commit
e2e08fe829
|
@ -11,9 +11,6 @@
|
|||
public/charting_library
|
||||
public/datafeeds
|
||||
|
||||
# Fonts
|
||||
public/fonts
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 +
|
||||
|
|
|
@ -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']
|
||||
|
|
|
@ -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.
|
@ -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';
|
||||
|
|
|
@ -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'],
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue