placed reusable component into /common

frontend/src/components/common/StatusMessage.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Text } from "@chakra-ui/react";
+
+interface StatusMessageProps {
+  message: string;
+  color?: string;
+}
+
+const StatusMessage = ({ message, color = "blue.700" }: StatusMessageProps): React.ReactElement => {
+    return (
+      <Text
+        color={color}
+        textAlign="center"
+        lineHeight="120%"
+        marginTop="16px"
+      >
+        {message}
+      </Text>
+    );
+  };
+
+  export default StatusMessage;

frontend/src/components/pages/ForgotPassword.tsx

@@ -8,6 +8,7 @@ import {
   FormErrorMessage,
   Flex,
 } from "@chakra-ui/react";
+import StatusMessage from "../common/StatusMessage";
 import background from "./login_background.png";
 import backgroundMobile from "./login_background_phone.png";
 
@@ -16,23 +17,6 @@ type SentEmail = {
   timestamp: number;
 };
 
-const StatusMessage: React.FC<{ message: string; color?: string }> = ({
-  message,
-  color = "blue.700",
-}) => {
-  return (
-    <Text
-      color={color}
-      textAlign="center"
-      textStyle="bodyMobile"
-      lineHeight="120%"
-      marginTop="16px"
-    >
-      {message}
-    </Text>
-  );
-};
-
 const ForgotPassword = (): React.ReactElement => {
   const [validUser, setValidUser] = useState(true);
   const [sentEmail, setSentEmail] = useState(false);