blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

2
components/SideNav.tsx
View File

@ -62,7 +62,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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 Mango
</span> </span>
</Transition> </Transition>

12
components/UserSetup.tsx
View File

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

6
components/account/AccountPage.tsx
View File

@ -234,12 +234,12 @@ const AccountPage = () => {
{t('account-value')} {t('account-value')}
</p> </p>
</Tooltip> </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'] ? ( {animationSettings['number-scroll'] ? (
group && mangoAccount ? ( group && mangoAccount ? (
<FlipNumbers <FlipNumbers
height={48} height={48}
width={32} width={36}
play play
delay={0.05} delay={0.05}
duration={1} duration={1}
@ -248,7 +248,7 @@ const AccountPage = () => {
) : ( ) : (
<FlipNumbers <FlipNumbers
height={48} height={48}
width={32} width={36}
play play
delay={0.05} delay={0.05}
duration={1} duration={1}

8
components/shared/DetailedAreaChart.tsx
View File

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

8
components/swap/SwapTokenChart.tsx
View File

@ -182,11 +182,11 @@ const SwapTokenChart = () => {
) : null} ) : null}
{mouseData ? ( {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'] ? ( {animationSettings['number-scroll'] ? (
<FlipNumbers <FlipNumbers
height={48} height={48}
width={32} width={36}
play play
numbers={formatFixedDecimals(mouseData['price'])} 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'] ? ( {animationSettings['number-scroll'] ? (
<FlipNumbers <FlipNumbers
height={48} height={48}
width={32} width={36}
play play
numbers={formatFixedDecimals( numbers={formatFixedDecimals(
chartData[chartData.length - 1]['price'] chartData[chartData.length - 1]['price']

4
components/token/TokenPage.tsx
View File

@ -116,11 +116,11 @@ const TokenPage = () => {
<h1 className="text-base font-normal">{bank.name}</h1> <h1 className="text-base font-normal">{bank.name}</h1>
)} )}
</div> </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'] ? ( {animationSettings['number-scroll'] ? (
<FlipNumbers <FlipNumbers
height={48} height={48}
width={32} width={36}
play play
delay={0.05} delay={0.05}
duration={1} duration={1}

BIN
public/fonts/TT_Commons_Pro_Expanded_DemiBold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/TT_Commons_Pro_Mono_DemiBold.woff2 Normal file
View File

Binary file not shown.

8
styles/globals.css
View File

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

2
tailwind.config.js
View File

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