Merge pull request #6 from Skidragon/error-messages

All Error messages are red.

src/App.tsx

@@ -41,7 +41,7 @@ import {
 } from "./App-styles";
 import { Spacer } from "./common/Spacer";
 import { Loader } from "./components/Loader";
-import { PasswordField } from "./components";
+import { PasswordField, ErrorText } from "./components";
 
 type extStates =
   | "not-authenticated"
@@ -805,12 +805,7 @@ function App() {
             />
           </Box>
           <Spacer height="10px" />
-          <Typography sx={{
+          <ErrorText>{sendPaymentError}</ErrorText>
-            color: "red",
-            fontSize: "12px",
-            fontFamily: "Inter",
-            fontWeight: '600'
-          }}>{sendPaymentError}</Typography>
           {/* <Typography>{sendPaymentSuccess}</Typography> */}
           <Spacer height="25px" />
           <CustomButton
@@ -893,7 +888,7 @@ function App() {
               decline
             </CustomButton>
           </Box>
-          <Typography color="errror">{sendPaymentError}</Typography>
+          <ErrorText>{sendPaymentError}</ErrorText>
         </>
       )}
       {extState === "web-app-request-connection" && (
@@ -1073,9 +1068,9 @@ function App() {
               <CustomButton onClick={authenticateWallet} >
                 Authenticate
               </CustomButton>
-              <Typography color="error">
+              <ErrorText>
                 {walletToBeDecryptedError}
-              </Typography>
+              </ErrorText>
             </>
         </>
       )}
@@ -1144,9 +1139,9 @@ function App() {
               <CustomButton onClick={confirmPasswordToDownload}>
                 Confirm password
               </CustomButton>
-              <Typography color="error">
+              <ErrorText>
                 {walletToBeDownloadedError}
-              </Typography>
+              </ErrorText>
             </>
           )}
 
@@ -1229,9 +1224,9 @@ function App() {
               <CustomButton onClick={createAccountFunc}>
                 Create Account
               </CustomButton>
-              <Typography color="error">
+              <ErrorText>
                 {walletToBeDownloadedError}
-              </Typography>
+              </ErrorText>
             </>
           )}
 

src/components/ErrorText/ErrorText.spec.tsx

@@ -0,0 +1,17 @@
+import {
+    describe,
+    expect,
+    test
+} from 'vitest';
+import { render } from '@testing-library/react'
+import {
+    ErrorText
+} from './ErrorText'
+
+
+describe('ErrorText', () => {
+    test('it renders with the text', () => {
+        const { queryByTestId } = render(<ErrorText data-testid="test-id">An Error has occured!</ErrorText>)
+        expect(queryByTestId('test-id')?.textContent).toEqual('An Error has occured!')
+    })
+})

src/components/ErrorText/ErrorText.tsx

@@ -0,0 +1,7 @@
+import { Typography, TypographyProps, } from "@mui/material";
+
+export const ErrorText: React.FunctionComponent<TypographyProps> = ({ ...props }) => {
+    return (
+        <Typography color="error" {...props} />
+    )
+}

src/components/index.ts

@@ -1 +1,2 @@
-export * from './PasswordField/PasswordField';
+export * from './PasswordField/PasswordField';
+export * from './ErrorText/ErrorText';