Improve font sizes

celo-org · Jan 27, 2024 · db7893d · db7893d
1 parent 1613ce8
commit db7893d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import Image from 'next/image';
 import { useState } from 'react';
 import { SolidButton } from 'src/components/buttons/SolidButton';
@@ -39,12 +40,12 @@ export default function Page() {
   const totalBalance = (walletBalance || 0n) + getTotalLockedCelo(lockedBalances);
 
   return (
-    <Section className="mt-6" containerClassName="space-y-6 md:space-y-8 px-4">
+    <Section className="mt-6" containerClassName="space-y-6 px-4">
       <h1 className="hidden font-serif text-3xl sm:block">Dashboard</h1>
-      <div className="flex items-center justify-between md:gap-x-20">
+      <div className="flex items-center justify-between md:gap-x-40">
         <div>
           <h2>Total Balance</h2>
-          <Amount valueWei={totalBalance} className="mt-1 text-4xl md:text-5xl" />
+          <Amount valueWei={totalBalance} className="-mt-1 text-3xl md:text-4xl" />
         </div>
         <LockButtons className="hidden md:flex" />
       </div>
@@ -127,6 +128,7 @@ function AccountStats({
         valueWei={stakeBalances?.total}
         subtitle="Rewards"
         subValueWei={totalRewards}
+        subValueClassName={clsx(!!totalRewards && totalRewards > 0n && 'all:text-green-600')}
       />
     </div>
   );
@@ -137,17 +139,19 @@ function AccountStat({
   valueWei,
   subtitle,
   subValueWei,
+  subValueClassName,
 }: {
   title: string;
   valueWei?: bigint;
   subtitle: string;
   subValueWei?: bigint;
+  subValueClassName?: string;
 }) {
   return (
     <div className="">
       <h3 className="text-sm">{title}</h3>
-      <Amount valueWei={valueWei} className="text-2xl md:text-3xl" />
-      <div className="flex items-center text-sm text-taupe-600">
+      <Amount valueWei={valueWei} className="-my-0.5 text-2xl md:text-3xl" />
+      <div className={`flex items-center text-sm text-taupe-600 ${subValueClassName}`}>
         <span>{`${subtitle}: ${formatNumberString(subValueWei, 2, true)}`}</span>
       </div>
     </div>
@@ -166,7 +170,7 @@ function TableTabs({
   const [tab, setTab] = useState<'stakes' | 'rewards' | 'delegations'>('stakes');
 
   return (
-    <div>
+    <div className="pt-2">
       <div className="flex space-x-10 border-b border-taupe-300 pb-2">
         <TabHeaderButton isActive={tab === 'stakes'} onClick={() => setTab('stakes')}>
           <span className="text-sm">Stakes</span>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -34,7 +34,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren<any>) {
   return (
     <html lang="en" data-theme="light">
-      <body className={`${inter.variable} font-sans`}>
+      <body className={`${inter.variable} font-sans text-base`}>
         <App>{children}</App>
       </body>
     </html>

diff --git a/src/app/staking/[address]/page.tsx b/src/app/staking/[address]/page.tsx
@@ -172,7 +172,7 @@ function StatSection({ group }: { group?: ValidatorGroup }) {
   const heatmapStartDate = new Date(Date.now() - EPOCH_DURATION_MS * HEATMAP_SIZE);
 
   return (
-    <div className="flex w-full flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-5">
+    <div className="flex w-full flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-8">
       <StatBox header="Total staked" valueWei={group?.votes}>
         <div className="relative h-2 w-full border border-taupe-300 bg-taupe-100">
           <div

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -26,6 +26,7 @@ module.exports = {
       green: {
         200: '#BEEAA9',
         500: '#56DF7C', // Jade
+        600: '#20A144',
         700: '#476520', // Forest
       },
       taupe: {
@@ -40,6 +41,19 @@ module.exports = {
       serif: ['Garamond', 'serif'],
       mono: ['Courier New', 'monospace'],
     },
+    fontSize: {
+      xs: '0.725rem',
+      sm: '0.85rem',
+      base: '0.95rem',
+      lg: '1.1rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '2.75rem',
+      '6xl': '3.25rem',
+      '7xl': '3.75rem',
+    },
     extend: {
       screens: {
         all: '1px',