WIP Styling Changes

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -1,10 +1,10 @@
-import { MessageFilled } from "@ant-design/icons";
 import { notification } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
+import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
 const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
@@ -12,16 +12,13 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
   const { t } = useTranslation();
+  if (!phone) return <></>;
   return (
-    <MessageFilled
-      style={{ margin: 4 }}
+    <a
+      href="# "
       onClick={(e) => {
         e.stopPropagation();
         const p = parsePhoneNumber(phone, "CA");
-        console.log(
-          "🚀  ~ file: chat-open-button.component.jsx  ~ line 21  ~ p",
-          p
-        );
 
         if (p && p.isValid()) {
           openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
@@ -29,7 +26,9 @@ export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
           notification["error"]({ message: t("messaging.error.invalidphone") });
         }
       }}
-    />
+    >
+      <PhoneNumberFormatter>{phone}</PhoneNumberFormatter>
+    </a>
   );
 }
 export default connect(null, mapDispatchToProps)(ChatOpenButton);