From 7da8c9c6dff2f3bd084d84bed1e32f05ef7c0ac6 Mon Sep 17 00:00:00 2001
From: Varsha Menon <varshamenon04@gmail.com>
Date: Mon, 18 Nov 2024 14:32:53 -0500
Subject: [PATCH] feat: add css

---
 .../MessageDivider/MessageDivider.scss        | 36 ++++++++-----------
 src/components/MessageDivider/index.jsx       | 12 ++-----
 2 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/src/components/MessageDivider/MessageDivider.scss b/src/components/MessageDivider/MessageDivider.scss
index 6581ebd3..4dab3e23 100644
--- a/src/components/MessageDivider/MessageDivider.scss
+++ b/src/components/MessageDivider/MessageDivider.scss
@@ -1,27 +1,21 @@
 @use '../../utils/variables';
 
-.divider {
-  width: fit-content;
-  max-width: 70%;
-  border-radius: 10px;
+divider {
+  display: flex;
+  flex-direction: row;
   font-size: 15px;
-
-  &.user {
-    background: variables.$dark-green;
-    color: white;
-  }
-
-  &.assistant {
-    background: #F2F0EF;
-  }
 }
-
-// bootstrap automatically adds a bottom margin of 1rem,
-// which we do not need for the chat messages
-.message p {
-  margin-bottom: 0rem;
+divider:before, divider:after{
+  content: "";
+  flex: 1 1;
+  border-bottom: 1px solid;
+  margin: auto;
 }
-
-.time {
-  font-size: 10px;
+divider:before {
+  margin-right: 10px;
+  margin-left: 10px
+}
+divider:after {
+  margin-right: 10px;
+  margin-left: 10px
 }
diff --git a/src/components/MessageDivider/index.jsx b/src/components/MessageDivider/index.jsx
index b614eae9..259a8c20 100644
--- a/src/components/MessageDivider/index.jsx
+++ b/src/components/MessageDivider/index.jsx
@@ -1,17 +1,11 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import './MessageDivider.scss';
 import PropTypes from 'prop-types';
 
 const MessageDivider = ({ text }) => (
-  <div
-    className={`divider ${text} text-center my-1 mx-2 py-2 px-3`}
-    data-hj-suppress
-  >
-    <ReactMarkdown>
-      {text}
-    </ReactMarkdown>
-  </div>
+  <divider>
+    {text}
+  </divider>
 );
 
 MessageDivider.propTypes = {