rename Message component

 import React from "react";
 import styled from "styled-components";
+import { parse, format } from "date-fns";
 
-const OutcomingBox = styled.div`
+const MessageWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -43,15 +44,15 @@ const Time = styled.span`
 
 export default ({ time, text }) => {
   return (
-    <OutcomingBox className="OutcomingMsg">
+    <MessageWrapper className="MessageWrapper">
       <MsgContainer>
         <MsgBox>
-          <Msg /> {text} Outcoming Message
+          <Msg> {text} Outcoming Message </Msg>
         </MsgBox>
         <TimeBox>
-          <Time /> {time} Monday 00:00
+          <Time> {format(parse(time, "MM/DD/YYYY hh:mma"))} </Time>
         </TimeBox>
       </MsgContainer>
-    </OutcomingBox>
+    </MessageWrapper>
   );
 };

-import React from "react";
-import styled from "styled-components";
-import ImgIconBox from "./ProfileIcon";
-
-const IncomingBox = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  padding: 20px 10px;
-  margin-top: 20px;
-  margin-left: 10px;
-`;
-
-const MsgContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 10px;
-`;
-
-const MsgBox = styled.div`
-  background-color: #20bf6b;
-  color: white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 20px;
-  margin-bottom: 10px;
-`;
-
-const Msg = styled.span`
-  font-size: 20px;
-  padding: 20px 10px;
-`;
-
-const TimeBox = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  opacity: 0.7;
-`;
-
-const Time = styled.span`
-  font-size: 15px;
-`;
-
-export default ({ time, text }) => {
-  return (
-    <IncomingBox className="IncomingMsg">
-      <ImgIconBox />
-      <MsgContainer>
-        <MsgBox>
-          <Msg /> {text} Incoming Message
-        </MsgBox>
-        <TimeBox>
-          <Time /> {time} Monday 00:00
-        </TimeBox>
-      </MsgContainer>
-    </IncomingBox>
-  );
-};