Font and typography update

dapp/src/DApp.tsx

@@ -5,6 +5,7 @@ import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
 import Header from "./components/Header"
 import Overview from "./components/Overview"
+import GlobalStyles from "./components/GlobalStyles"
 
 function DApp() {
   useDetectThemeMode()
@@ -24,6 +25,7 @@ function DAppProviders() {
     <LedgerWalletAPIProvider>
       <WalletContextProvider>
         <ChakraProvider theme={theme}>
+          <GlobalStyles />
           <DApp />
         </ChakraProvider>
       </WalletContextProvider>

dapp/src/components/GlobalStyles/index.tsx

@@ -0,0 +1,47 @@
+import React from "react"
+import { Global } from "@emotion/react"
+
+import SegmentRegular from "../../fonts/Segment-Regular.otf"
+import SegmentMedium from "../../fonts/Segment-Medium.otf"
+import SegmentSemiBold from "../../fonts/Segment-SemiBold.otf"
+import SegmentBold from "../../fonts/Segment-Bold.otf"
+import SegmentBlack from "../../fonts/Segment-Black.otf"
+
+export default function GlobalStyles() {
+  return (
+    <Global
+      styles={`
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentRegular}) format("otf");
+          font-weight: 400;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentMedium}) format("otf");
+          font-weight: 500;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentSemiBold}) format("otf");
+          font-weight: 600;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBold}) format("otf");
+          font-weight: 700;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBlack}) format("otf");
+          font-weight: 900;
+          font-style: normal;
+        }
+      `}
+    />
+  )
+}

dapp/src/components/Overview/Statistics.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function Statistics(props: CardProps) {
   return (

dapp/src/components/Overview/TransactionHistory.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { CardBody, Card, CardProps } from "@chakra-ui/react"
-import { TextMd } from "../Typography"
+import { TextMd } from "../shared/Typography"
 
 export default function TransactionHistory(props: CardProps) {
   return (

dapp/src/components/shared/Typography/index.tsx

@@ -0,0 +1,104 @@
+import React from "react"
+import { Text, TextProps } from "@chakra-ui/react"
+
+export function H2Xl(props: TextProps) {
+  return (
+    <Text
+      as="h1"
+      fontWeight="medium"
+      fontSize="h2Xl"
+      lineHeight="h2Xl"
+      {...props}
+    />
+  )
+}
+
+export function HXl(props: TextProps) {
+  return (
+    <Text
+      as="h2"
+      fontWeight="medium"
+      fontSize="hXl"
+      lineHeight="hXl"
+      {...props}
+    />
+  )
+}
+
+export function HLg(props: TextProps) {
+  return (
+    <Text
+      as="h3"
+      fontWeight="medium"
+      fontSize="hLg"
+      lineHeight="hLg"
+      {...props}
+    />
+  )
+}
+
+export function HMd(props: TextProps) {
+  return (
+    <Text
+      as="h4"
+      fontWeight="medium"
+      fontSize="hMd"
+      lineHeight="hMd"
+      {...props}
+    />
+  )
+}
+
+export function HSm(props: TextProps) {
+  return (
+    <Text
+      as="h5"
+      fontWeight="medium"
+      fontSize="hSm"
+      lineHeight="hSm"
+      {...props}
+    />
+  )
+}
+
+export function HXs(props: TextProps) {
+  return (
+    <Text
+      as="h6"
+      fontWeight="medium"
+      fontSize="hXs"
+      lineHeight="hXs"
+      {...props}
+    />
+  )
+}
+
+export function TextXl(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
+  )
+}
+
+export function TextLg(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="lg" lineHeight="lg" {...props} />
+  )
+}
+
+export function TextMd(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="md" lineHeight="md" {...props} />
+  )
+}
+
+export function TextSm(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="sm" lineHeight="sm" {...props} />
+  )
+}
+
+export function TextXs(props: TextProps) {
+  return (
+    <Text as="p" fontWeight="medium" fontSize="xs" lineHeight="xs" {...props} />
+  )
+}

dapp/src/theme/index.ts

@@ -2,14 +2,15 @@ import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
-import { colors, fontSizes, fontWeights, lineHeights } from "./utils"
+import { colors, fontSizes, fontWeights, fonts, lineHeights } from "./utils"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
 Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
 
 const defaultTheme = {
   colors,
+  fonts,
   fontSizes,
   fontWeights,
   lineHeights,

dapp/src/theme/utils/fonts.ts

@@ -1,22 +1,40 @@
 export const fontSizes = {
-  xs: "0.75rem",
-  sm: "0.875rem",
-  md: "1rem",
-  lg: "1.125rem",
+  h2Xl: "4.5rem",
+  hXl: "3.75rem",
+  hLg: "3rem",
+  hMd: "2.25rem",
+  hSm: "1.875rem",
+  hXs: "1.5rem",
   xl: "1.25rem",
+  lg: "1.125rem",
+  md: "1rem",
+  sm: "0.875rem",
+  xs: "0.75rem",
 }
 
 export const fontWeights = {
+  normal: 400,
   medium: 500,
   semibold: 600,
   bold: 700,
   black: 900,
 }
 
 export const lineHeights = {
-  xs: "1.125rem",
-  sm: "1.25rem",
-  md: "1.5rem",
-  lg: "1.75rem",
+  h2Xl: "5.625rem",
+  hXl: "4.5rem",
+  hLg: "3.75rem",
+  hMd: "2.75rem",
+  hSm: "2.375rem",
+  hXs: "2rem",
   xl: "1.875rem",
+  lg: "1.75rem",
+  md: "1.5rem",
+  sm: "1.25rem",
+  xs: "1.125rem",
+}
+
+export const fonts = {
+  heading: "Segment, sans-serif",
+  body: "Segment, sans-serif",
 }