Font and typography update (#67)

This PR updates typography components:

-
[adds](https://chakra-ui.com/community/recipes/using-fonts#option-2-using-font-face)
`Segment` font
- sets the correct styles based on the
[designs](https://www.figma.com/file/OUdSfHsmgV8EJpWxAzXjl5/Design-Tasks?node-id=2251%3A20910&mode=dev)
- creates a directory for the shared components

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("opentype");
+          font-weight: 400;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentMedium}) format("opentype");
+          font-weight: 500;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentSemiBold}) format("opentype");
+          font-weight: 600;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBold}) format("opentype");
+          font-weight: 700;
+          font-style: normal;
+        }
+        @font-face {
+          font-family: "Segment";
+          src: url(${SegmentBlack}) format("opentype");
+          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,56 @@
+import React from "react"
+import { Heading, HeadingProps, Text, TextProps } from "@chakra-ui/react"
+
+export function H1(props: HeadingProps) {
+  return <Heading as="h1" size={{ base: "6xl", md: "7xl" }} {...props} />
+}
+
+export function H2(props: HeadingProps) {
+  return <Heading as="h2" size={{ base: "5xl", md: "6xl" }} {...props} />
+}
+
+export function H3(props: HeadingProps) {
+  return <Heading as="h3" size={{ base: "4xl", md: "5xl" }} {...props} />
+}
+
+export function H4(props: HeadingProps) {
+  return <Heading as="h4" size={{ base: "3xl", md: "4xl" }} {...props} />
+}
+
+export function H5(props: HeadingProps) {
+  return <Heading as="h5" size={{ base: "2xl", md: "3xl" }} {...props} />
+}
+
+export function H6(props: HeadingProps) {
+  return <Heading as="h6" size={{ base: "xl", md: "2xl" }} {...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/Heading.ts

@@ -0,0 +1,32 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Heading: ComponentSingleStyleConfig = {
+  sizes: {
+    "7xl": {
+      fontSize: "4.5rem",
+      lineHeight: "5.625rem",
+    },
+    "6xl": {
+      fontSize: "3.75rem",
+      lineHeight: "4.5rem",
+    },
+    "5xl": {
+      fontSize: "3rem",
+      lineHeight: "3.75rem",
+    },
+    "4xl": {
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+    },
+    "3xl": {
+      fontSize: "1.875rem",
+      lineHeight: "2.375rem",
+    },
+    "2xl": {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+    },
+  },
+}
+
+export default Heading

dapp/src/theme/index.ts

@@ -2,16 +2,16 @@ 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, fonts, lineHeights } from "./utils"
+import Heading from "./Heading"
 
 // 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,
-  fontSizes,
-  fontWeights,
+  fonts,
   lineHeights,
   styles: {
     global: (props: StyleFunctionProps) => ({
@@ -25,6 +25,7 @@ const defaultTheme = {
   components: {
     Button,
     Switch,
+    Heading,
   },
 }
 

dapp/src/theme/utils/fonts.ts

@@ -1,22 +1,12 @@
-export const fontSizes = {
-  xs: "0.75rem",
-  sm: "0.875rem",
-  md: "1rem",
-  lg: "1.125rem",
-  xl: "1.25rem",
-}
-
-export const fontWeights = {
-  medium: 500,
-  semibold: 600,
-  bold: 700,
-  black: 900,
-}
-
 export const lineHeights = {
-  xs: "1.125rem",
-  sm: "1.25rem",
-  md: "1.5rem",
-  lg: "1.75rem",
   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",
 }