Merge pull request #1045 from autonomys/feat/change-typography

Change typography
autonomys · Dec 19, 2024 · 6792e08 · 6792e08
2 parents 091ca58 + 9cb9572
commit 6792e08
Show file tree

Hide file tree

Showing 18 changed files with 228 additions and 31 deletions.
diff --git a/explorer/src/app/[chain]/layout.tsx b/explorer/src/app/[chain]/layout.tsx
@@ -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 }))
 }
@@ -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} />
       )}

diff --git a/explorer/src/components/Consensus/Home/HomeInfoCard.tsx b/explorer/src/components/Consensus/Home/HomeInfoCard.tsx
@@ -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'>

diff --git a/explorer/src/components/Staking/RegisterOperators.tsx b/explorer/src/components/Staking/RegisterOperators.tsx
@@ -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' />

diff --git a/explorer/src/components/common/DesktopTable.tsx b/explorer/src/components/common/DesktopTable.tsx
@@ -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}>

diff --git a/explorer/src/components/common/ListCard.tsx b/explorer/src/components/common/ListCard.tsx
@@ -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]
@@ -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'}

diff --git a/explorer/src/components/common/MobileCard.tsx b/explorer/src/components/common/MobileCard.tsx
@@ -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) => (

diff --git a/explorer/src/components/common/OutOfSyncBanner.tsx b/explorer/src/components/common/OutOfSyncBanner.tsx
@@ -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'>

diff --git a/explorer/src/components/layout/ConsensusHeader.tsx b/explorer/src/components/layout/ConsensusHeader.tsx
@@ -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

diff --git a/explorer/src/components/layout/Container.tsx b/explorer/src/components/layout/Container.tsx
@@ -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>
   )

diff --git a/explorer/src/components/layout/DomainHeader.tsx b/explorer/src/components/layout/DomainHeader.tsx
@@ -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

diff --git a/explorer/src/components/layout/EmptyHeader.tsx b/explorer/src/components/layout/EmptyHeader.tsx
@@ -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

diff --git a/explorer/src/components/layout/FarmingHeader.tsx b/explorer/src/components/layout/FarmingHeader.tsx
@@ -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

diff --git a/explorer/src/components/layout/Footer.tsx b/explorer/src/components/layout/Footer.tsx
@@ -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'>

diff --git a/explorer/src/components/layout/Layout.tsx b/explorer/src/components/layout/Layout.tsx
@@ -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}

diff --git a/explorer/src/components/layout/LeaderboardHeader.tsx b/explorer/src/components/layout/LeaderboardHeader.tsx
@@ -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

diff --git a/explorer/src/components/layout/StakingHeader.tsx b/explorer/src/components/layout/StakingHeader.tsx
@@ -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

diff --git a/explorer/src/components/layout/StorageHeader.tsx b/explorer/src/components/layout/StorageHeader.tsx
@@ -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