semantic headings and styles

2022-02-21 14:55:13 +11:00 · 2022-02-21 14:55:13 +11:00 · 2ae323ee1c
parent b65b6cf4ba
commit 2ae323ee1c
37 changed files with 134 additions and 172 deletions
--- a/components/AccountNameModal.tsx
+++ b/components/AccountNameModal.tsx
@ -78,16 +78,14 @@ const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
  return (
    <Modal onClose={onClose} isOpen={isOpen}>
      <Modal.Header>
-        <div className="flex items-center">
-          <ElementTitle noMarginBottom>{t('name-your-account')}</ElementTitle>
-        </div>
+        <ElementTitle noMarginBottom>{t('name-your-account')}</ElementTitle>
+        <p className="flex items-center justify-center">
+          {t('edit-nickname')}
+          <Tooltip content={t('tooltip-name-onchain')}>
+            <InformationCircleIcon className="h-5 w-5 ml-2 text-th-primary" />
+          </Tooltip>
+        </p>
      </Modal.Header>
-      <div className="flex items-center justify-center text-th-fgd-3 pb-4">
-        {t('edit-nickname')}
-        <Tooltip content={t('tooltip-name-onchain')}>
-          <InformationCircleIcon className="h-5 w-5 ml-2 text-th-primary" />
-        </Tooltip>
-      </div>
      <div className="pb-2 text-th-fgd-1">{t('account-name')}</div>
      <Input
        type="text"
@ -106,7 +104,7 @@ const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
      <Button
        onClick={() => submitName()}
        disabled={name.length >= 33}
-        className="mt-4 w-full"
+        className="mt-6 w-full"
      >
        {t('save-name')}
      </Button>
--- a/components/AccountSelect.tsx
+++ b/components/AccountSelect.tsx
@ -6,6 +6,7 @@ import useMangoStore, { WalletToken } from '../stores/useMangoStore'
 import { RefreshClockwiseIcon } from './icons'
 import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
 import { useTranslation } from 'next-i18next'
+import { LinkButton } from './Button'

 type AccountSelectProps = {
  accounts: WalletToken[]
@ -52,17 +53,14 @@ const AccountSelect = ({
      <div className="flex justify-between pb-2">
        <div className="text-th-fgd-1">{t('asset')}</div>
        {missingTokenSymbols.length > 0 ? (
-          <button
-            className="ml-2 text-th-fgd-1 hover:text-th-primary outline-none focus:outline-none"
-            onClick={handleRefreshBalances}
-          >
-            <div className="flex items-center text-th-fgd-1 font-normal underline cursor-pointer hover:text-th-primary hover:no-underline">
+          <LinkButton className="ml-2" onClick={handleRefreshBalances}>
+            <div className="flex items-center">
              <RefreshClockwiseIcon
                className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`}
              />
              {t('refresh')}
            </div>
-          </button>
+          </LinkButton>
        ) : null}
      </div>
      <Listbox
--- a/components/AccountsModal.tsx
+++ b/components/AccountsModal.tsx
@ -167,7 +167,7 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
          <>
            <NewAccount onAccountCreation={handleNewAccountCreation} />
            <LinkButton
-              className="flex justify-center mt-4 text-th-fgd-3 w-full"
+              className="flex justify-center mt-4 w-full"
              onClick={() => setShowNewAccountForm(false)}
            >
              {t('cancel')}
--- a/components/BalancesTable.tsx
+++ b/components/BalancesTable.tsx
@ -145,9 +145,9 @@ const BalancesTable = ({
      {unsettledBalances.length > 0 ? (
        <div className="border border-th-bkg-4 rounded-lg mb-6 p-4 sm:p-6">
          <div className="flex items-center justify-between pb-4">
-            <div className="flex items-center sm:text-lg">
+            <div className="flex items-center">
              <ExclamationIcon className="flex-shrink-0 h-5 mr-1.5 mt-0.5 text-th-primary w-5" />
-              {t('unsettled-balances')}
+              <h3>{t('unsettled-balances')}</h3>
            </div>
            <Button
              className="text-xs pt-0 pb-0 h-8 pl-3 pr-3 whitespace-nowrap"
--- a/components/Button.tsx
+++ b/components/Button.tsx
@ -4,6 +4,7 @@ interface ButtonProps {
  onClick?: (x?) => void
  disabled?: boolean
  className?: string
+  primary?: boolean
 }

 const Button: FunctionComponent<ButtonProps> = ({
@ -19,7 +20,7 @@ const Button: FunctionComponent<ButtonProps> = ({
      disabled={disabled}
      className={`font-bold px-6 py-2 bg-th-bkg-button rounded-full text-th-fgd-1
      hover:brightness-[1.1] focus:outline-none disabled:bg-th-bkg-4 
-      disabled:text-th-fgd-3 disabled:cursor-not-allowed disabled:hover:brightness-100 ${className}`}
+      disabled:text-th-fgd-4 disabled:cursor-not-allowed disabled:hover:brightness-100 ${className}`}
      {...props}
    >
      {children}
@ -34,13 +35,16 @@ export const LinkButton: FunctionComponent<ButtonProps> = ({
  onClick,
  disabled = false,
  className,
+  primary,
  ...props
 }) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
-      className={`${className} border-0 underline hover:no-underline hover:opacity-60 focus:outline-none`}
+      className={`border-0 font-bold ${
+        primary ? 'text-th-primary' : 'text-th-fgd-2'
+      } underline hover:no-underline hover:opacity-60 focus:outline-none ${className}`}
      {...props}
    >
      {children}
--- a/components/ButtonGroup.tsx
+++ b/components/ButtonGroup.tsx
@ -37,7 +37,7 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
              ${
                v === activeValue
                  ? `text-th-primary`
-                  : `text-th-fgd-1 opacity-70 hover:opacity-100`
+                  : `text-th-fgd-2 hover:text-th-primary`
              }
            `}
            key={`${v}${i}`}
--- a/components/CloseAccountModal.tsx
+++ b/components/CloseAccountModal.tsx
@ -137,12 +137,14 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({

  return (
    <Modal onClose={onClose} isOpen={isOpen && mangoAccount !== undefined}>
-      <ElementTitle noMarginBottom>
-        {t('close-account:are-you-sure')}
-      </ElementTitle>
-      <p className="text-center mt-1">
-        {t('close-account:closing-account-will')}
-      </p>
+      <Modal.Header>
+        <ElementTitle noMarginBottom>
+          {t('close-account:are-you-sure')}
+        </ElementTitle>
+        <p className="mt-1 text-center">
+          {t('close-account:closing-account-will')}
+        </p>
+      </Modal.Header>
      <div className="bg-th-bkg-4 overflow-wrap p-2 sm:p-4 rounded-md space-y-2">
        <div className="flex items-center text-th-fgd-2">
          <CheckCircleIcon className="h-4 w-4 mr-1.5 text-th-green" />
--- a/components/CreateAlertModal.tsx
+++ b/components/CreateAlertModal.tsx
@ -100,8 +100,8 @@ const CreateAlertModal: FunctionComponent<CreateAlertModalProps> = ({
                    {t('active-alerts')}
                  </ElementTitle>
                  <Button
-                    className="col-span-1 flex items-center justify-center pt-0 pb-0 h-8 text-xs w-20"
-                    disabled={activeAlerts.length >= 3}
+                    className="flex items-center justify-center pt-0 pb-0 h-8 text-xs w-20"
+                    disabled={activeAlerts.length >= 5}
                    onClick={() => setShowAlertForm(true)}
                  >
                    <div className="flex items-center">
@ -111,7 +111,7 @@ const CreateAlertModal: FunctionComponent<CreateAlertModalProps> = ({
                  </Button>
                </div>
              </Modal.Header>
-              <div className="border-b border-th-fgd-4">
+              <div className="border-b border-th-fgd-4 mt-2">
                {activeAlerts.map((alert, index) => (
                  <div
                    className="border-t border-th-fgd-4 flex items-center justify-between p-4"
@ -135,12 +135,10 @@ const CreateAlertModal: FunctionComponent<CreateAlertModalProps> = ({
            </>
          ) : showAlertForm ? (
            <>
-              <div>
+              <Modal.Header>
                <ElementTitle noMarginBottom>{t('create-alert')}</ElementTitle>
-                <p className="mt-1 text-center text-th-fgd-4">
-                  {t('alerts-disclaimer')}
-                </p>
-              </div>
+                <p className="mt-1 text-center">{t('alerts-disclaimer')}</p>
+              </Modal.Header>
              {error ? (
                <div className="my-4">
                  <InlineNotification title={error} type="error" />
@ -159,7 +157,6 @@ const CreateAlertModal: FunctionComponent<CreateAlertModalProps> = ({
                  <div className="flex justify-between mb-1.5">
                    <div className="text-th-fgd-1">{t('alert-health')}</div>
                    <LinkButton
-                      className="font-normal text-th-fgd-3 text-xs"
                      onClick={() =>
                        setShowCustomHealthForm(!showCustomHealthForm)
                      }
@ -190,17 +187,15 @@ const CreateAlertModal: FunctionComponent<CreateAlertModalProps> = ({
                  )}
                </div>
              </div>
-              <div className="flex items-center mt-6">
-                <Button onClick={() => onCreateAlert()}>
-                  {t('create-alert')}
-                </Button>
-                <LinkButton
-                  className="ml-4 text-th-fgd-3 hover:text-th-fgd-1"
-                  onClick={handleCancelCreateAlert}
-                >
-                  {t('cancel')}
-                </LinkButton>
-              </div>
+              <Button className="mt-6 w-full" onClick={() => onCreateAlert()}>
+                {t('create-alert')}
+              </Button>
+              <LinkButton
+                className="mt-4 text-center w-full"
+                onClick={handleCancelCreateAlert}
+              >
+                {t('cancel')}
+              </LinkButton>
            </>
          ) : error ? (
            <div>
@ -216,8 +211,8 @@ const CreateAlertModal: FunctionComponent<CreateAlertModalProps> = ({
            <div>
              <Modal.Header>
                <ElementTitle noMarginBottom>{t('no-alerts')}</ElementTitle>
+                <p className="mt-1 text-center">{t('no-alerts-desc')}</p>
              </Modal.Header>
-              <p className="mb-4 text-center">{t('no-alerts-desc')}</p>
              <Button
                className="flex justify-center m-auto"
                onClick={() => setShowAlertForm(true)}
--- a/components/DelegateModal.tsx
+++ b/components/DelegateModal.tsx
@ -79,15 +79,11 @@ const DelegateModal: FunctionComponent<DelegateModalProps> = ({
  return (
    <Modal onClose={onClose} isOpen={isOpen}>
      <Modal.Header>
-        <div className="flex items-center">
-          <ElementTitle noMarginBottom>
-            {t('delegate:delegate-your-account')}
-          </ElementTitle>
-        </div>
+        <ElementTitle noMarginBottom>
+          {t('delegate:delegate-your-account')}
+        </ElementTitle>
+        <p className="mt-1 text-center">{t('delegate:info')}</p>
      </Modal.Header>
-      <div className="flex items-center justify-center text-th-fgd-3 pb-4">
-        <p className="text-center">{t('delegate:info')}</p>
-      </div>
      <div className="pb-2 text-th-fgd-1">{t('delegate:public-key')}</div>
      <Input
        type="text"
@ -105,7 +101,7 @@ const DelegateModal: FunctionComponent<DelegateModalProps> = ({
      <Button
        onClick={() => setDelegate()}
        disabled={keyBase58.length != 44 && keyBase58.length != 0}
-        className="mt-4 w-full"
+        className="mt-6 w-full"
      >
        {t('delegate:set-delegate')}
      </Button>
--- a/components/DepositModal.tsx
+++ b/components/DepositModal.tsx
@ -153,7 +153,9 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({

  return (
    <Modal isOpen={isOpen} onClose={onClose}>
-      <ElementTitle noMarginBottom>{t('deposit-funds')}</ElementTitle>
+      <Modal.Header>
+        <ElementTitle noMarginBottom>{t('deposit-funds')}</ElementTitle>
+      </Modal.Header>
      {!mangoAccount ? (
        <div className="mb-4 mt-2 text-center text-th-fgd-3 text-xs">
          {t('first-deposit-desc')}
--- a/components/EmptyState.tsx
+++ b/components/EmptyState.tsx
@ -23,7 +23,7 @@ const EmptyState: FunctionComponent<EmptyStateProps> = ({
  return (
    <div className="flex flex-col items-center text-th-fgd-1 px-4 pb-2 rounded-lg">
      <div className="w-6 h-6 mb-1 text-th-primary">{icon}</div>
-      <div className="font-bold text-base pb-1">{title}</div>
+      <h2 className="text-base mb-1">{title}</h2>
      {desc ? (
        <p
          className={`text-center ${
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@ -62,9 +62,7 @@ const Modal = ({
 }

 const Header = ({ children }) => {
-  return (
-    <div className={`flex justify-center bg-th-bkg-2 pb-4`}>{children}</div>
-  )
+  return <div className={`flex flex-col items-center pb-2`}>{children}</div>
 }

 Modal.Header = Header
--- a/components/NewAccount.tsx
+++ b/components/NewAccount.tsx
@ -20,6 +20,7 @@ import { deposit } from '../utils/mango'
 import { useTranslation } from 'next-i18next'
 import ButtonGroup from './ButtonGroup'
 import InlineNotification from './InlineNotification'
+import Modal from './Modal'

 interface NewAccountProps {
  onAccountCreation?: (x?) => void
@ -130,10 +131,10 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({

  return (
    <>
-      <ElementTitle>{t('create-account')}</ElementTitle>
-      <div className="mx-auto pb-4 text-center text-th-fgd-3 text-xs">
-        {t('insufficient-sol')}
-      </div>
+      <Modal.Header>
+        <ElementTitle noMarginBottom>{t('create-account')}</ElementTitle>
+        <p className="mt-1 text-center">{t('insufficient-sol')}</p>
+      </Modal.Header>
      <div className="border-b border-th-bkg-4 mb-4 pb-6">
        <div className="flex items-center pb-2 text-th-fgd-1">
          {t('account-name')}{' '}
@ -157,9 +158,7 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
          </div>
        ) : null}
      </div>
-      <div className="font-bold pb-2 text-center text-th-fgd-2">
-        {t('initial-deposit')}
-      </div>
+      <h3 className="mb-2 text-center">{t('initial-deposit')}</h3>
      <AccountSelect
        accounts={walletTokens}
        selectedAccount={selectedAccount}
--- a/components/PerpPositionsTable.tsx
+++ b/components/PerpPositionsTable.tsx
@ -67,9 +67,9 @@ const PositionsTable = () => {
      {unsettledPositions.length > 0 ? (
        <div className="border border-th-bkg-4 rounded-lg mb-6 p-4 sm:p-6">
          <div className="flex items-center justify-between">
-            <div className="flex items-center sm:text-lg">
+            <div className="flex items-center">
              <ExclamationIcon className="flex-shrink-0 h-5 mr-1.5 mt-0.5 text-th-primary w-5" />
-              {t('unsettled-positions')}
+              <h3>{t('unsettled-positions')}</h3>
            </div>
            <Button
              className="text-xs pt-0 pb-0 h-8 pl-3 pr-3 whitespace-nowrap"
--- a/components/Select.tsx
+++ b/components/Select.tsx
@ -23,7 +23,7 @@ const Select = ({
              >
                {value ? value : placeholder}
                <ChevronDownIcon
-                  className={`default-transition h-5 w-5 mr-1 text-th-fgd-1 ${
+                  className={`default-transition h-6 w-6 mr-1 text-th-fgd-1 ${
                    open ? 'transform rotate-180' : 'transform rotate-360'
                  }`}
                />
--- a/components/Switch.tsx
+++ b/components/Switch.tsx
@ -21,7 +21,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
      <button
        type="button"
        className={`${
-          checked ? 'bg-th-primary' : 'bg-th-bkg-4'
+          checked ? 'bg-th-primary' : 'bg-th-bkg-button'
        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent 
        rounded-full cursor-pointer transition-colors ease-in-out duration-200 
        focus:outline-none`}
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@ -42,7 +42,7 @@ const Tabs: FunctionComponent<TabsProps> = ({
            <a
              key={tabName}
              onClick={() => onChange(tabName)}
-              className={`cursor-pointer default-transition flex justify-center pb-4 relative whitespace-nowrap hover:opacity-100
+              className={`cursor-pointer default-transition flex font-bold justify-center pb-4 relative whitespace-nowrap hover:opacity-100
                    ${
                      activeTab === tabName
                        ? `text-th-primary`
--- a/components/WithdrawModal.tsx
+++ b/components/WithdrawModal.tsx
@ -12,11 +12,7 @@ import {
  ExclamationCircleIcon,
  InformationCircleIcon,
 } from '@heroicons/react/outline'
-import {
-  ChevronLeftIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from '@heroicons/react/solid'
+import { ChevronDownIcon } from '@heroicons/react/solid'
 import { Disclosure } from '@headlessui/react'
 import Select from './Select'
 import { withdraw } from '../utils/mango'
@ -367,10 +363,7 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
            </div>
            <div className="flex justify-between pb-2 pt-4">
              <div className="text-th-fgd-1">{t('amount')}</div>
-              <LinkButton
-                className="text-th-primary text-xs"
-                onClick={() => setInputAmount(maxAmount.toString())}
-              >
+              <LinkButton onClick={() => setInputAmount(maxAmount.toString())}>
                {includeBorrow ? t('max-with-borrow') : t('max')}
              </LinkButton>
            </div>
@ -395,7 +388,7 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                  <span
                    className={`${getAccountStatusColor(
                      simulation.initHealthRatio
-                    )} bg-th-bkg-1 border flex font-semibold h-10 items-center justify-center ml-1 rounded text-th-fgd-1 w-14`}
+                    )} bg-th-bkg-1 border flex h-10 items-center justify-center ml-1 px-2 rounded`}
                  >
                    {simulation.leverage.toFixed(2)}x
                  </span>
@ -458,9 +451,9 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
              {({ open }) => (
                <>
                  <Disclosure.Button
-                    className={`border border-th-fgd-4 default-transition font-normal mt-4 pl-3 pr-2 py-2.5 ${
+                    className={`border border-th-bkg-4 default-transition font-normal mt-4 pl-3 pr-2 py-2.5 ${
                      open ? 'rounded-b-none' : 'rounded-md'
-                    } text-th-fgd-1 w-full hover:bg-th-bkg-3 focus:outline-none`}
+                    } text-th-fgd-1 w-full hover:border-th-fgd-4 focus:outline-none`}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex items-center">
@ -487,30 +480,26 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                          />
                        </Tooltip>
                      </div>
-                      {open ? (
-                        <ChevronUpIcon className="h-5 w-5 mr-1" />
-                      ) : (
-                        <ChevronDownIcon className="h-5 w-5 mr-1" />
-                      )}
+                      <ChevronDownIcon
+                        className={`default-transition h-5 w-5 mr-1 ${
+                          open ? 'transform rotate-180' : 'transform rotate-360'
+                        }`}
+                      />
                    </div>
                  </Disclosure.Button>
                  <Disclosure.Panel
-                    className={`border border-th-fgd-4 border-t-0 p-4 rounded-b-md`}
+                    className={`border border-th-bkg-4 border-t-0 p-4 rounded-b-md`}
                  >
                    {simulation ? (
                      <div>
                        <div className="flex justify-between pb-2">
-                          <div className="text-th-fgd-4">
-                            {t('account-value')}
-                          </div>
+                          <p className="mb-0">{t('account-value')}</p>
                          <div className="text-th-fgd-1">
                            ${simulation.equity.toFixed(2)}
                          </div>
                        </div>
                        <div className="flex justify-between pb-2">
-                          <div className="text-th-fgd-4">
-                            {t('account-risk')}
-                          </div>
+                          <p className="mb-0">{t('account-risk')}</p>
                          <div className="text-th-fgd-1">
                            {getAccountStatusColor(
                              simulation.initHealthRatio,
@ -519,16 +508,14 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                          </div>
                        </div>
                        <div className="flex justify-between pb-2">
-                          <div className="text-th-fgd-4">{t('leverage')}</div>
+                          <p className="mb-0">{t('leverage')}</p>
                          <div className="text-th-fgd-1">
                            {simulation.leverage.toFixed(2)}x
                          </div>
                        </div>

                        <div className="flex justify-between">
-                          <div className="text-th-fgd-4">
-                            {t('borrow-value')}
-                          </div>
+                          <p className="mb-0">{t('borrow-value')}</p>
                          <div className="text-th-fgd-1">
                            ${simulation.liabsVal.toFixed(2)}
                          </div>
@ -539,7 +526,7 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                </>
              )}
            </Disclosure>
-            <div className={`mt-5 flex justify-center`}>
+            <div className={`mt-6 flex flex-col items-center`}>
              <Button
                onClick={handleWithdraw}
                disabled={
@ -554,14 +541,13 @@ const WithdrawModal: FunctionComponent<WithdrawModalProps> = ({
                  {t('withdraw')}
                </div>
              </Button>
+              <LinkButton
+                className="mt-4"
+                onClick={() => setShowSimulation(false)}
+              >
+                {t('cancel')}
+              </LinkButton>
            </div>
-            <LinkButton
-              className="flex items-center mt-4 text-th-fgd-3"
-              onClick={() => setShowSimulation(false)}
-            >
-              <ChevronLeftIcon className="h-5 w-5 mr-1" />
-              {t('back')}
-            </LinkButton>
          </>
        ) : null}
      </>
--- a/components/account_page/AccountBorrows.tsx
+++ b/components/account_page/AccountBorrows.tsx
@ -66,7 +66,7 @@ export default function AccountBorrows() {

  return (
    <>
-      <div className="pb-2 text-th-fgd-1 text-lg">{t('your-borrows')}</div>
+      <h2 className="mb-2">{t('your-borrows')}</h2>
      {/* TODO: calculate LiabsVal without perp markets
        <div className="border border-th-red flex items-center justify-between p-2 rounded">
          <div className="pr-4 text-xs text-th-fgd-3">{t('total-borrow-value')}:</div>
@ -297,7 +297,7 @@ export default function AccountBorrows() {
          </div>
        </div>
      </div>
-      <div className="pb-2 pt-8 text-th-fgd-1 text-lg">{t('all-assets')}</div>
+      <h2 className="mb-2 mt-8">{t('all-assets')}</h2>
      <div className="flex flex-col pb-2 pt-4">
        <div className="overflow-x-auto sm:-mx-6 lg:-mx-8">
          <div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
--- a/components/account_page/AccountFunding.tsx
+++ b/components/account_page/AccountFunding.tsx
@ -201,7 +201,7 @@ const AccountFunding = () => {
  return (
    <>
      <div className="flex items-center justify-between pb-4">
-        <div className="text-th-fgd-1 text-lg">{t('total-funding')}</div>
+        <h2>{t('total-funding')}</h2>
        <div className="flex items-center">
          <Button
            className={`float-right text-xs h-8 pt-0 pb-0 pl-3 pr-3`}
--- a/components/account_page/AccountHistory.tsx
+++ b/components/account_page/AccountHistory.tsx
@ -118,7 +118,7 @@ export default function AccountHistory() {
      <div className="bg-th-bkg-3 flex mb-4 md:mb-6 md:-mt-6 md:-mx-6 px-3 md:px-4 py-2 rounded-md md:rounded-none md:rounded-t-md">
        {historyViews.map(({ label, key }, index) => (
          <div
-            className={`md:px-2 py-1 text-xs md:text-sm ${
+            className={`font-bold md:px-2 py-1 text-xs md:text-sm ${
              index > 0 ? 'ml-4 md:ml-2' : null
            } rounded-md cursor-pointer default-transition
                          ${
@ -136,9 +136,7 @@ export default function AccountHistory() {
      </div>
      <div className="flex flex-col pb-6 sm:flex-row sm:items-end sm:justify-between">
        <div className="pb-4 sm:pb-0">
-          <div className="mb-1 text-th-fgd-1 text-lg">
-            {t(`${view.toLowerCase()}-history`)}
-          </div>
+          <h2 className="mb-1">{t(`${view.toLowerCase()}-history`)}</h2>
          <div className="mr-4 text-xs text-th-fgd-3">
            {t('delay-displaying-recent')} {t('use-explorer-one')}
            <a
--- a/components/account_page/AccountInterest.tsx
+++ b/components/account_page/AccountInterest.tsx
@ -271,7 +271,7 @@ const AccountInterest = () => {
  return (
    <>
      <div className="flex items-center justify-between pb-4">
-        <div className="text-th-fgd-1 text-lg">{t('interest-earned')}</div>
+        <h2>{t('interest-earned')}</h2>
        <div className="flex items-center">
          <Button
            className={`float-right text-xs h-8 pt-0 pb-0 pl-3 pr-3`}
--- a/components/account_page/AccountOrders.tsx
+++ b/components/account_page/AccountOrders.tsx
@ -6,7 +6,7 @@ const AccountOrders = () => {

  return (
    <>
-      <div className="pb-3.5 text-th-fgd-1 text-lg">{t('open-orders')}</div>
+      <h2 className="mb-3.5">{t('open-orders')}</h2>
      <OpenOrdersTable />
    </>
  )
--- a/components/account_page/AccountOverview.tsx
+++ b/components/account_page/AccountOverview.tsx
@ -180,12 +180,10 @@ export default function AccountOverview() {
        </div>
      </div>
      <div className="pb-8">
-        <div className="text-th-fgd-1 text-lg pb-4">{t('perp-positions')}</div>
+        <h2 className="mb-4">{t('perp-positions')}</h2>
        <PositionsTable />
      </div>
-      <div className="pb-4 text-th-fgd-1 text-lg">
-        {t('assets-liabilities')}
-      </div>
+      <h2 className="mb-4">{t('assets-liabilities')}</h2>

      <div className="grid grid-flow-col grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 gap-2 sm:gap-4 pb-8">
        <div className="border border-th-bkg-4 p-3 sm:p-4 rounded-md sm:rounded-lg">
@ -214,7 +212,7 @@ export default function AccountOverview() {
        </div>
      </div>
      <div className="flex justify-between pb-4">
-        <div className="text-th-fgd-1 text-lg">Balances</div>
+        <h2>{t('balances')}</h2>
        <Switch
          checked={showZeroBalances}
          className="text-xs"
--- a/components/account_page/AccountPerformance.tsx
+++ b/components/account_page/AccountPerformance.tsx
@ -101,7 +101,7 @@ const AccountPerformance = () => {
  return (
    <>
      <div className="flex items-center justify-between pb-4">
-        <div className="text-th-fgd-1 text-lg">{t('account-performance')}</div>
+        <h2>{t('account-performance')}</h2>
        <div className="flex items-center">
          <Button
            className={`float-right text-xs h-8 pt-0 pb-0 pl-3 pr-3`}
--- a/components/stats_page/StatsAssets.tsx
+++ b/components/stats_page/StatsAssets.tsx
@ -34,7 +34,7 @@ export default function StatsAssets({ latestStats, stats }) {
        <div className="bg-th-bkg-3 hidden md:flex mb-4 md:mb-6 md:-mt-6 md:-mx-6 px-3 md:px-4 py-2 rounded-md md:rounded-none md:rounded-t-md">
          {latestStats.map((stat, index) => (
            <div
-              className={`md:px-2 py-1 text-xs md:text-sm ${
+              className={`font-bold md:px-2 py-1 text-xs md:text-sm ${
                index > 0 ? 'ml-4 md:ml-2' : null
              } rounded-md cursor-pointer default-transition
                          ${
@ -59,7 +59,7 @@ export default function StatsAssets({ latestStats, stats }) {
              .toLowerCase()}.svg`}
            className="mr-2.5"
          />
-          {selectedAsset}
+          <h2>{selectedAsset}</h2>
        </div>
      </div>
      <div className="grid grid-flow-col grid-cols-1 grid-rows-4 md:grid-cols-2 md:grid-rows-2 gap-2 sm:gap-4">
--- a/components/stats_page/StatsPerps.tsx
+++ b/components/stats_page/StatsPerps.tsx
@ -137,7 +137,7 @@ export default function StatsPerps({ perpStats }) {
        <div className="bg-th-bkg-3 hidden md:flex mb-4 md:mb-6 md:-mt-6 md:-mx-6 px-3 md:px-4 py-2 rounded-md md:rounded-none md:rounded-t-md">
          {marketConfigs.map((market, index) => (
            <div
-              className={`md:px-2 py-1 text-xs md:text-sm ${
+              className={`font-bold md:px-2 py-1 text-xs md:text-sm ${
                index > 0 ? 'ml-4 md:ml-2' : null
              } rounded-md cursor-pointer default-transition
                          ${
@ -162,7 +162,9 @@ export default function StatsPerps({ perpStats }) {
              .toLowerCase()}.svg`}
            className="mr-2.5"
          />
-          {selectedAsset.split(/-|\//)[0]} {t('perpetual-futures')}
+          <h2>
+            {selectedAsset.split(/-|\//)[0]} {t('perpetual-futures')}
+          </h2>
        </div>
      </div>
      <div className="grid grid-flow-row grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-2 gap-2 sm:gap-4">
@ -204,7 +206,7 @@ export default function StatsPerps({ perpStats }) {
          />
        </div>
        <div className="border border-th-bkg-3 relative p-4 rounded-md">
-          <div className="text-lg">{t('liquidity-mining')}</div>
+          <h2>{t('liquidity-mining')}</h2>
          <div className="flex justify-between mt-4">
            <div>{t('depth-rewarded')}</div>
            <div>
--- a/components/stats_page/StatsTotals.tsx
+++ b/components/stats_page/StatsTotals.tsx
@ -152,9 +152,7 @@ export default function StatsTotals({ latestStats, stats }) {
      {!isMobile ? (
        <>
          <div className="pb-8">
-            <div className="pb-4 text-th-fgd-1 text-lg">
-              {t('current-stats')}
-            </div>
+            <h2 className="mb-4">{t('current-stats')}</h2>
            {latestStats.length > 0 ? (
              <Table>
                <thead>
--- a/components/styles.tsx
+++ b/components/styles.tsx
@ -4,23 +4,16 @@ export const PageBodyWrapper = ({ children, className, ...props }) => (
  </div>
 )

-// export const PageBodyWrapper = styled.div`
-//   min-height: calc(100vh - 105px);
-//   @media screen and (min-width: 768px) {
-//     min-height: 100vh;
-//   }
-// `
-
 export const ElementTitle = ({
  children,
  noMarginBottom = false,
  className = '',
 }) => (
-  <div
+  <h2
    className={`flex justify-center ${
      noMarginBottom ? 'mb-0' : 'mb-2.5'
-    } -mt-1 text-base font-medium items-center text-th-fgd-1 ${className}`}
+    } -mt-1 items-center text-base ${className}`}
  >
    {children}
-  </div>
+  </h2>
 )
--- a/components/trade_form/AdvancedTradeForm.tsx
+++ b/components/trade_form/AdvancedTradeForm.tsx
@ -992,7 +992,7 @@ export default function AdvancedTradeForm({
              <button
                disabled={disabledTradeButton}
                onClick={onSubmit}
-                className={`flex-grow font-bold px-6 py-2 rounded-full text-white hover:brightness-[1.1] focus:outline-none disabled:bg-th-bkg-4 disabled:text-th-fgd-3 disabled:cursor-not-allowed disabled:hover:brightness-100 ${
+                className={`flex-grow font-bold px-6 py-2 rounded-full text-white hover:brightness-[1.1] focus:outline-none disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:cursor-not-allowed disabled:hover:brightness-100 ${
                  side === 'buy' ? 'bg-th-green-dark' : 'bg-th-red'
                }`}
              >
--- a/pages/account.tsx
+++ b/pages/account.tsx
@ -185,7 +185,7 @@ export default function Account() {
            <>
              <div className="pb-3 md:pb-0">
                <div className="flex items-center mb-1">
-                  <h1 className={`font-semibold mr-3 text-th-fgd-1 text-2xl`}>
+                  <h1 className={`mr-3`}>
                    {mangoAccount?.name || t('account')}
                  </h1>
                  {!pubkey ? (
--- a/pages/borrow.tsx
+++ b/pages/borrow.tsx
@ -6,6 +6,7 @@ import AccountBorrows from '../components/account_page/AccountBorrows'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import useMangoStore from '../stores/useMangoStore'
 import { mangoGroupSelector } from '../stores/selectors'
+import { useTranslation } from 'next-i18next'

 export async function getStaticProps({ locale }) {
  return {
@ -19,6 +20,7 @@ export async function getStaticProps({ locale }) {
 export default function Borrow() {
  const [showAccountsModal, setShowAccountsModal] = useState(false)
  const mangoGroup = useMangoStore(mangoGroupSelector)
+  const { t } = useTranslation('common')

  const handleCloseAccounts = useCallback(() => {
    setShowAccountsModal(false)
@ -36,7 +38,12 @@ export default function Borrow() {
    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
      <TopBar />
      <PageBodyContainer>
-        <div className="bg-th-bkg-2 overflow-none p-4 sm:p-6 rounded-lg mt-10 md:mt-12">
+        <div className="flex flex-col sm:flex-row py-4 md:pb-4 md:pt-10">
+          <h1 className={`text-th-fgd-1 text-2xl font-semibold`}>
+            {t('borrow')}
+          </h1>
+        </div>
+        <div className="bg-th-bkg-2 overflow-none p-4 sm:p-6 rounded-lg">
          {mangoGroup ? <AccountBorrows /> : null}
        </div>
      </PageBodyContainer>
--- a/pages/referral.tsx
+++ b/pages/referral.tsx
@ -210,11 +210,9 @@ export default function Referral() {
      <TopBar />
      <PageBodyContainer>
        <div className="py-4 md:pb-4 md:pt-10">
-          <h1 className={`mb-1 text-th-fgd-1 text-2xl font-semibold`}>
-            Sow the Mango Seed
-          </h1>
+          <h1 className={`mb-1`}>Sow the Mango Seed</h1>
          <div className="flex flex-col sm:flex-row items-start">
-            <p className="mb-0 mr-2 text-th-fgd-1">
+            <p className="mb-0 mr-2">
              Earn 16% of the perp fees paid by anyone you refer. Plus, they get
              a 4% perp fee discount.
            </p>
@ -375,7 +373,7 @@ export default function Referral() {
                          </p>

                          <Link href={'/?name=MNGO/USDC'} shallow={true}>
-                            <a className="mt-4 px-6 py-2 bg-th-bkg-4 font-bold rounded-full text-th-fgd-1 hover:brightness-[1.15] hover:text-th-fgd-1 focus:outline-none">
+                            <a className="mt-4 px-6 py-2 bg-th-bkg-button font-bold rounded-full text-th-fgd-1 hover:brightness-[1.15] hover:text-th-fgd-1 focus:outline-none">
                              Buy MNGO
                            </a>
                          </Link>
@ -412,7 +410,7 @@ export default function Referral() {
                          ) : null}
                        </div>
                        <button
-                          className="bg-th-primary flex items-center justify-center text-th-bkg-1 text-sm px-4 py-2 rounded-full hover:brightness-[1.15] focus:outline-none disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:cursor-not-allowed disabled:hover:brightness-100"
+                          className="bg-th-primary flex items-center justify-center text-th-bkg-1 text-sm px-4 py-2 rounded-full hover:brightness-[1.1] focus:outline-none disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:cursor-not-allowed disabled:hover:brightness-100"
                          onClick={submitRefLink}
                          disabled={existingCustomRefLinks.length === 5}
                        >
--- a/pages/risk-calculator.tsx
+++ b/pages/risk-calculator.tsx
@ -1295,9 +1295,7 @@ export default function RiskCalculator() {
      <TopBar />
      <PageBodyContainer>
        <div className="flex flex-col pt-8 pb-3 sm:pb-6 md:pt-10">
-          <h1 className={`mb-2 text-th-fgd-1 text-2xl font-semibold`}>
-            {t('calculator:risk-calculator')}
-          </h1>
+          <h1 className={`mb-2`}>{t('calculator:risk-calculator')}</h1>
          <p className="mb-0">{t('calculator:in-testing-warning')}</p>
        </div>
        {scenarioBars?.rowData.length > 0 ? (
@ -1305,9 +1303,9 @@ export default function RiskCalculator() {
            <div className="grid grid-cols-12">
              <div className="col-span-12 md:col-span-8 p-4">
                <div className="flex justify-between pb-2 lg:pb-3 px-0 lg:px-3">
-                  <div className="pb-4 lg:pb-0 text-th-fgd-1 text-lg">
+                  <h2 className="mb-4 lg:mb-0">
                    {t('calculator:scenario-balances')}
-                  </div>
+                  </h2>
                  <div className="flex justify-between lg:justify-start">
                    <Button
                      className={`text-xs flex items-center justify-center sm:ml-3 pt-0 pb-0 h-8 pl-3 pr-3 rounded`}
@ -1399,11 +1397,11 @@ export default function RiskCalculator() {
                    {({ open }) => (
                      <>
                        <Disclosure.Button className="bg-th-bkg-1 default-transition flex items-center justify-between p-3 w-full hover:bg-th-bkg-1 focus:outline-none">
-                          <div className="text-th-fgd-3">
+                          <p className="mb-0">
                            {open
                              ? t('calculator:scenario-details')
                              : t('calculator:scenario-maint-health')}
-                          </div>
+                          </p>
                          {open ? null : (
                            <div className="text-th-fgd-3 text-xs">
                              {scenarioDetails.get('maintHealth') * 100 >= 9999
@ -1945,9 +1943,7 @@ export default function RiskCalculator() {
              {/*Populate detailed scenario summary*/}
              {scenarioBars?.rowData.length > 0 ? (
                <div className="bg-th-bkg-3 col-span-4 hidden md:block p-4 relative rounded-r-lg">
-                  <div className="pb-4 text-th-fgd-1 text-lg">
-                    {t('calculator:scenario-details')}
-                  </div>
+                  <h2 className="mb-4">{t('calculator:scenario-details')}</h2>
                  {/* Joke Wrapper */}
                  <div className="relative col-span-4">
                    {scenarioDetails.get('liabilities') === 0 &&
--- a/pages/stats.tsx
+++ b/pages/stats.tsx
@ -58,9 +58,7 @@ export default function StatsPage() {
      <TopBar />
      <PageBodyContainer>
        <div className="flex flex-col sm:flex-row py-4 md:pb-4 md:pt-10">
-          <h1 className={`text-th-fgd-1 text-2xl font-semibold`}>
-            {t('stats')}
-          </h1>
+          <h1>{t('stats')}</h1>
        </div>
        {!isMobile ? (
          <Tabs activeTab={activeTab} onChange={handleTabChange} tabs={TABS} />
--- a/pages/swap.tsx
+++ b/pages/swap.tsx
@ -55,11 +55,7 @@ export default function Swap() {
          <div className="grid grid-cols-12">
            <div className="col-span-12 xl:col-span-10 xl:col-start-2 pt-8 pb-3 sm:pb-4 md:pt-10">
              <div className="flex flex-col items-start md:flex-row md:items-end md:justify-between mb-1">
-                <h1
-                  className={`mb-1.5 md:mb-0 text-th-fgd-1 text-2xl font-semibold`}
-                >
-                  {t('swap')}
-                </h1>
+                <h1 className={`mb-1.5 md:mb-0`}>{t('swap')}</h1>
                <div className="flex flex-col md:items-end">
                  <p className="mb-0 text-xs">
                    {t('swap:swap-between-hundreds')}
--- a/styles/index.css
+++ b/styles/index.css
@ -74,7 +74,7 @@ body {
 }

 h1 {
-  @apply font-bold text-th-fgd-1 text-xl;
+  @apply font-bold text-th-fgd-1 text-2xl;
 }

 h2 {