Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change typography #1045

Merged
merged 3 commits into from
Dec 19, 2024
Merged

Change typography #1045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be81e53
add typography tailwind config
marc-aurele-besner Dec 19, 2024
01f47a6
import font the next way
marc-aurele-besner Dec 19, 2024
9cb9572
remove hardcoded font class
marc-aurele-besner Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion explorer/src/app/[chain]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,25 @@ import { GoogleAnalytics } from '@next/third-parties/google'
import { indexers, networks } from 'constants/indexers'
import { lang, metadata } from 'constants/metadata'
import { Metadata, Viewport } from 'next'
import { Libre_Franklin as LibreFranklin, Roboto_Serif as RobotoSerif } from 'next/font/google'
import { headers } from 'next/headers'
import { Provider } from 'providers'
import { Toaster } from 'react-hot-toast'
import type { ChainPageProps } from 'types/app'
import '../../styles/index.css'

const robotoSerif = RobotoSerif({
subsets: ['latin'],
weight: ['300'],
variable: '--font-roboto-serif',
})

const libreFranklin = LibreFranklin({
subsets: ['latin'],
weight: ['400', '500', '600'],
variable: '--font-libre-franklin',
})

export async function generateStaticParams() {
return Array.from(networks).map((chain) => ({ chain }))
}
Expand All @@ -16,7 +29,7 @@ export default async function RootLayout({
children,
}: ChainPageProps & { children: React.ReactNode }) {
return (
<html lang={lang}>
<html lang={lang} className={`${robotoSerif.variable} ${libreFranklin.variable}`}>
{process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID && (
<GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID} />
)}
Expand Down
4 changes: 1 addition & 3 deletions explorer/src/components/Consensus/Home/HomeInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,7 @@ export const HomeInfoCard: FC<Props> = ({
[value],
)
return (
<div
className={`h-[216px] w-1/5 min-w-[200px] grow font-['Montserrat'] md:min-w-[228px] ${additionalClass}`}
>
<div className={`h-[216px] w-1/5 min-w-[200px] grow md:min-w-[228px] ${additionalClass}`}>
<div className={`flex h-full flex-col justify-center rounded-[20px] bg-white ${darkBgClass}`}>
<div className='mb-6 flex w-full items-center justify-center align-middle'>{icon}</div>
<div className='flex w-full flex-col items-center justify-center align-middle'>
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/Staking/RegisterOperators.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export const RegisterOperators = () => {
return (
<div className='flex w-full flex-col align-middle'>
<div className='mt-5 flex w-full flex-col pt-20 sm:mt-0'>
<div className="dark:bg-boxDark w-full rounded-[20px] bg-white font-['Montserrat'] dark:border-none">
<div className='dark:bg-boxDark w-full rounded-[20px] bg-white dark:border-none'>
<div className='m-10'>
<div className='flex items-center'>
<WalletIcon width='44' height='48' />
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/common/DesktopTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface TableProps<T extends object> {

export const DesktopTable = <T extends object>({ table, emptyMessage }: TableProps<T>) => (
<div className='overflow-x-auto'>
<table className="dark:bg-boxDark w-full min-w-max table-auto rounded-[20px] bg-white font-['Montserrat'] dark:border-none">
<table className='dark:bg-boxDark w-full min-w-max table-auto rounded-[20px] bg-white dark:border-none'>
<thead className='text-blueShade border-b border-gray-200 text-sm dark:text-white/75'>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
Expand Down
4 changes: 2 additions & 2 deletions explorer/src/components/common/ListCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const ListCard = <T extends object>({ table, emptyMessage }: ListCardProp
table.getRowModel().rows.map((row, index) => (
<div
key={`row-${index}`}
className="dark:bg-boxDark mb-4 w-full rounded-lg bg-white px-4 py-2 font-['Montserrat']"
className='dark:bg-boxDark mb-4 w-full rounded-lg bg-white px-4 py-2'
>
{row.getVisibleCells().map((cell, index) => {
const header = table.getHeaderGroups()[0].headers[index]
Expand All @@ -32,7 +32,7 @@ export const ListCard = <T extends object>({ table, emptyMessage }: ListCardProp
</div>
))
) : (
<div className="dark:bg-boxDark w-full rounded-lg bg-white px-4 py-4 font-['Montserrat']">
<div className='dark:bg-boxDark w-full rounded-lg bg-white px-4 py-4'>
<div className='flex w-full justify-center'>
<div className='text-blueShade text-sm dark:text-white/75'>
{emptyMessage || 'No entries to show'}
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/common/MobileCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ type Row = {

export const MobileCard: FC<Props> = ({ header, body, id, children }) => {
return (
<div className="dark:bg-boxDark mb-6 w-full rounded-lg bg-white px-4 py-7 font-['Montserrat'] dark:to-gradientTo">
<div className='dark:bg-boxDark mb-6 w-full rounded-lg bg-white px-4 py-7 dark:to-gradientTo'>
<div className='mb-2 flex items-center gap-2'>{header}</div>
<div className='w-full divide-y divide-gray-200 dark:divide-white/20'>
{body.map(({ name, value }, index) => (
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/common/OutOfSyncBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const POLL_INTERVAL = 12000
const OutOfSyncBanner: FC = () => {
const { network } = useIndexers()
return (
<div className="container mx-auto mb-4 flex grow justify-center px-5 font-['Montserrat'] md:px-[25px] 2xl:px-0">
<div className='container mx-auto mb-4 flex grow justify-center px-5 md:px-[25px] 2xl:px-0'>
<div className='sticky top-0 z-50 w-full'>
<div className='dark:bg-boxDark w-full rounded-[20px] bg-[#DDEFF1] p-5 shadow dark:border-none'>
<div className='flex flex-col gap-4'>
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/ConsensusHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const ConsensusHeader: FC = () => {
const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.consensus), [network])

return (
<header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
<header className='body-font z-9 py-[30px] text-gray-600'>
{isDesktop ? (
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
<Link
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ type Props = {

export const Container: FC<Props> = ({ children }) => {
return (
<div className="container mx-auto mb-20 flex grow justify-center px-5 font-['Montserrat'] md:px-[25px] 2xl:px-0">
<div className='container mx-auto mb-20 flex grow justify-center px-5 md:px-[25px] 2xl:px-0'>
{children}
</div>
)
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/DomainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const DomainHeader = () => {
)

return (
<header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
<header className='body-font z-9 py-[30px] text-gray-600'>
{isDesktop ? (
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
<Link
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/EmptyHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const EmptyHeader = () => {
const { network } = useIndexers()

return (
<header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
<header className='body-font z-9 py-[30px] text-gray-600'>
{isDesktop ? (
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
<Link
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/FarmingHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const FarmingHeader = () => {
)

return (
<header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
<header className='body-font z-9 py-[30px] text-gray-600'>
{isDesktop ? (
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
<Link
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { currentYear } from 'utils/time'

const Footer: FC = () => {
return (
<footer className="container mb-[50px] px-4 font-['Montserrat'] sm:mx-auto xl:px-0">
<footer className='container mb-[50px] px-4 sm:mx-auto xl:px-0'>
<div className='body-font bg-footerLight dark:bg-footerDark rounded-xl p-10 text-white'>
<div className='md:grid md:grid-cols-2'>
<div className='mb-20 flex justify-center md:mb-0 md:justify-start'>
Expand Down
4 changes: 2 additions & 2 deletions explorer/src/components/layout/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ export const MainLayout: FC<Props> = ({ children, subHeader }) => {
}, [pathname])

return (
<div className="from-backgroundLight to-backgroundDark dark:from-backgroundDarker dark:to-backgroundDarkest dark:bg-boxDark relative flex min-h-screen w-full flex-col bg-gradient-to-b font-['Montserrat']">
<div className="relative flex min-h-screen w-full flex-col font-['Montserrat']">
<div className='from-backgroundLight to-backgroundDark dark:from-backgroundDarker dark:to-backgroundDarkest dark:bg-boxDark relative flex min-h-screen w-full flex-col bg-gradient-to-b'>
<div className='relative flex min-h-screen w-full flex-col'>
{outOfSync}
<SectionHeader />
{subHeader}
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/LeaderboardHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const LeaderboardHeader: FC = () => {
const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.leaderboard), [network])

return (
<header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
<header className='body-font z-9 py-[30px] text-gray-600'>
{isDesktop ? (
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
<Link
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/StakingHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const StakingHeader = () => {
const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.staking), [network])

return (
<header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
<header className='body-font z-9 py-[30px] text-gray-600'>
{isDesktop ? (
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
<Link
Expand Down
2 changes: 1 addition & 1 deletion explorer/src/components/layout/StorageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const StorageHeader: FC = () => {
const menuList = useMemo(() => getSupportedHeaderLinks(network, Routes.storage), [network])

return (
<header className="body-font z-9 py-[30px] font-['Montserrat'] text-gray-600">
<header className='body-font z-9 py-[30px] text-gray-600'>
{isDesktop ? (
<div className='container mx-auto flex flex-col flex-wrap items-center justify-between py-5 md:flex-row md:px-[25px] 2xl:px-0'>
<Link
Expand Down
Loading
Loading