From 0bca0c3761f7ad6fa21ee89bfc94b0d145ae033e Mon Sep 17 00:00:00 2001
From: Harpal Jadeja <jadejaharpal14@gmail.com>
Date: Fri, 7 Oct 2022 13:05:19 +0530
Subject: [PATCH 1/2] chore: convert statLoadingMessage

---
 src/components/StatLoadingMessage.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/StatLoadingMessage.tsx b/src/components/StatLoadingMessage.tsx
index e99fa56eff4..d1935013fe7 100644
--- a/src/components/StatLoadingMessage.tsx
+++ b/src/components/StatLoadingMessage.tsx
@@ -1,19 +1,14 @@
 import React from "react"
-import styled from "@emotion/styled"
-import { typography, TypographyProps } from "styled-system"
+import { Text } from "@chakra-ui/react"
 
 import Translation from "./Translation"
 
-export interface IProps extends TypographyProps {}
-
-export const IndicatorSpan = styled.span<IProps>`
-  ${typography}
-`
+export interface IProps {}
 
 const StatLoadingMessage: React.FC<IProps> = (props) => (
-  <IndicatorSpan fontSize="2rem" {...props}>
+  <Text as="span" fontSize="2rem" {...props}>
     <Translation id="loading" />
-  </IndicatorSpan>
+  </Text>
 )
 
 export default StatLoadingMessage

From c2b84fa3d9f23f2fe16bbddff93f09894e158d37 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 25 Jan 2023 10:50:51 -0300
Subject: [PATCH 2/2] update types and migrate StatErrorMessage component

---
 src/components/StatErrorMessage.tsx   | 9 ++++-----
 src/components/StatLoadingMessage.tsx | 4 ++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/StatErrorMessage.tsx b/src/components/StatErrorMessage.tsx
index e096f21e7a8..0b02bb6a10f 100644
--- a/src/components/StatErrorMessage.tsx
+++ b/src/components/StatErrorMessage.tsx
@@ -1,15 +1,14 @@
 import React from "react"
-import { TypographyProps } from "styled-system"
+import { Text, TextProps } from "@chakra-ui/react"
 
 import Translation from "./Translation"
-import { IndicatorSpan } from "./StatLoadingMessage"
 
-export interface IProps extends TypographyProps {}
+export interface IProps extends TextProps {}
 
 const StatErrorMessage: React.FC<IProps> = (props) => (
-  <IndicatorSpan fontSize="2rem" {...props}>
+  <Text as="span" fontSize="2rem" {...props}>
     <Translation id="loading-error-refresh" />
-  </IndicatorSpan>
+  </Text>
 )
 
 export default StatErrorMessage
diff --git a/src/components/StatLoadingMessage.tsx b/src/components/StatLoadingMessage.tsx
index d1935013fe7..813c87612e4 100644
--- a/src/components/StatLoadingMessage.tsx
+++ b/src/components/StatLoadingMessage.tsx
@@ -1,9 +1,9 @@
 import React from "react"
-import { Text } from "@chakra-ui/react"
+import { Text, TextProps } from "@chakra-ui/react"
 
 import Translation from "./Translation"
 
-export interface IProps {}
+export interface IProps extends TextProps {}
 
 const StatLoadingMessage: React.FC<IProps> = (props) => (
   <Text as="span" fontSize="2rem" {...props}>